Private Comprehensive Angular Programming Training

See Course Outline

Training for your Team

5
Days
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors
Overview

In this Comprehensive Angular Programming training class, students will learn to use Angular 4, which Google released officially in March 2017.

Goals
  1. Understand the Angular architecture.
  2. Use node.js’ package ecosystem npm.
  3. Work with TypeScript and ES6/ES2015.
  4. Develop Angular components.
  5. Use directives and work with data binding.
  6. Work with services and dependency Injection.
  7. Create and validate forms.
  8. Use HTTP with pbservables.
  9. Create a single-page application using Routing.
  10. Format data using Pipes.
  11. Set up a project from scratch.
  12. Organize and load your code when needed using Angular modules.
  13. Understand Angular change detection.
  14. Learn to unit test components, services, routes, and pipes.
  15. Create custom components, directives and pipes.
  16. Use the Angular CLI to scaffold and build your project.
  17. Create Model-driven (reactive) forms.
  18. Learn AngularJS (Angular 1.x) to Angular (Angular 2) migration strategies.
  19. Use a Redux data architecture.
Outline
  1. Introduction
    1. Why Angular?
    2. Angular Versions: Understanding the differences between AngularJS (Angular 1), Angular 2.x, Angular 4, and Angular
    3. Scope and Goal of Angular
    4. Who Uses Angular?
    5. Angular 4 changes
      1. View Engine generates smaller code
      2. Enhanced *ngIf syntax
      3. Animation code now in own packages
      4. TypeScript 2.1
      5. Improved compiler speed
      6. Compliant with StrictNullChecks
      7. Universal
      8. Flat ESModules
    6. Architecture (Big Picture/Concepts)
    7. Model-View Patterns Reviewed
      1. Single-page Application vs Traditional Web Application Architectures
      2. Browser Support
    8. Overview of Setup/Installation
    9. Our first Angular Application
  2. TypeScript and ES6/ES2015 Introduction
    1. Understanding TypeScript and ES6/ES2015
    2. How TypeScript Works
    3. Why TypeScript?
    4. Who's Behind TypeScript?
    5. Installing TypeScript
    6. Configuring TypeScript
    7. Compiling with TypeScript
    8. JavaScript is valid TypeScript
    9. ES2015
      1. Classes
      2. Arrow Functions
      3. Template Literals
      4. Modules
    10. TypeScript
      1. Type annotations
      2. Interfaces
      3. Decorators
      4. Automatic Property Assignment
  3. Components
    1. What is a component?
    2. Developing a simple component
    3. Angular Modules
    4. Bootstrapping
    5. Nesting components
    6. Templates
      1. Multi-line
      2. External
      3. Component-relative paths
    7. Models
      1. Models are just classes
      2. Importing
  4. Data Binding
    1. What is Data Binding?
      1. one way (model to view)
      2. two way (view to model)
    2. Data Binding in Angular
      1. Syntax
      2. Component to DOM (one way)
      3. DOM to Component (two way)
    3. Types
      1. Interpolation
      2. Property Binding
      3. Event Binding
      4. Two Way Data Binding
    4. Longhand
    5. Shorthand: [(ngModel)] Banana in a Box
    6. Html Attribute vs. DOM Properties
    7. Setting Html Attributes
  5. Directives
    1. What is a Directive?
    2. Kinds of Directives
      1. Component
      2. Structural
      3. Attribute
    3. Structural Directives
      1. Understand how ngIf works and the improved Angular 4 syntax options
      2. Using the <template> tag
      3. Removing vs Hiding Directives
      4. Using ngFor
      5. ngSwitch
    4. Attribute Directives
      1. ngClass
      2. ngStyle
  6. Service and Dependency Injection
    1. What is a Service?
    2. Service Example
    3. Dependency Injection Explained
    4. Dependency Injection Example
    5. Dependency Injection in Angular
    6. Registering a Service
    7. Injecting a Service
    8. Application Wide Dependency Injection
  7. Intermediate Components
    1. Lifecycle Hooks
    2. Composing Your User Interface
    3. Component Communication
    4. @Input
    5. @Output and EventEmitters
    6. Component Styles
    7. Metadata: styles and styleUrls
    8. View Encapsulation
  8. Forms
    1. Benefits of AngularForms
    2. Form Strategies
      1. Template-driven
      2. Model-driven
      3. Pros and Cons
    3. Form Directives: Template-driven
      1. ngForm
      2. ngModel
      3. ngModelGroup
      4. ngSubmit
    4. Getting Data from Form Controls
      1. Local Template Reference Variables
  9. Form Validation
    1. Validation Directives
    2. Tracking Change State of Form Controls
    3. CSS Classes
    4. Validation Messages
    5. Validation Styles
  10. Data Architectures
    1. Traditional
      1. Model-View-Controller (MVC): Traditional Web Applications
      2. Model-View-Whatever (MVW/MV*): AngularJS
    2. New Architectures
      1. Observables and Reactive Programming
      2. Flux
    3. Flexible Data Architecture in Angular
  11. HTTP
    1. Setup
    2. Importing
    3. Enable RxJS Operators
    4. Http in Services using Promises
    5. Fetching Data
    6. Handling the Response
    7. Handling Errors
    8. Http in Components using Promises
    9. Fetching Data
    10. Handling the Response
    11. Handling Errors
    12. Observables and Reactive Programming
    13. The Reactive Extensions for JavaScript (RxJS)
    14. Big Ideas About Streams
    15. Http in Services using Observables
    16. Http in Components using Observables
    17. Async Pipe
    18. Http Put
    19. Http Delete
    20. Cross-origin HTTP Requests
  12. Routing
    1. Component Router Overview
    2. Router Terminology
    3. Router Setup
    4. Router Directives
      1. routerLink
      2. routerLinkActive
      3. routerOutlet
    5. Your First Routes
    6. Organize Routes using Modules
    7. Navigating
      1. Creating a Link
      2. Navigating with Code (Router)
      3. Route parameters
      4. Query parameters
      5. Retrieving Parameters (ActivedRoute)
  13. Pipes
    1. What are Pipes?
    2. Using Pipes
      1. In Templates
      2. In Code
    3. Built-in Pipes
      1. Date, Number, Decimal, Currency, UpperCase and LowerCase
    4. Pipe Syntax
      1. Passing parameters to a pipe
    5. Chaining pipes
    6. Changes from AngularJS (deprecated pipes)
  14. Project Setup
    1. Defining npm Dependencies
    2. TypeScript configuration
    3. SystemJS configuration
    4. Build and run the app
  15. npm QuickStart
    1. Installing Dependencies
      1. global installs
      2. local installs
      3. package.json
      4. sharing dependencies
      5. updating/uninstalling dependencies
    2. Using npm as a Build Tool
    3. What about Grunt and Gulp?
    4. Your First Script
    5. Shortcut Scripts
    6. Running Local Node Modules
    7. Combining Scripts
  16. Change Detection
    1. Change Detection Strategies
    2. Default
    3. OnPush
  17. Advanced Dependency Injection
    1. @Injectable Classes
    2. Multiple Service Instances
    3. @Optional and @Host Decorators
    4. Providers
      1. Syntax
      2. Alternative/Aliased
      3. Class, Value, and Factory
  18. Unit Testing
    1. Tools: Jasmine & Karma
    2. Mocks, Stubs, Fakes, and Spies
    3. Angular Testing
    4. TestBed, ComponentFixture, and DebugElement
    5. async, fakeAsync, tick, and inject
    6. Your First JavaScript Test
    7. Testing a Simple Component
    8. Detecting Changes
    9. Using External Templates
    10. Components with Inputs and Outputs
    11. Component with Router
    12. Component with Service
    13. Testing a Service in Isolation
    14. Mocking HTTP Calls
    15. Testing Pipes
  19. Advanced Routing
    1. Lazy Loading Modules
    2. Location Strategies
      1. PathLocationStategy
      2. HashLocationStrategy
    3. Web Server Configuration
  20. Model-driven Forms
    1. Comparing Template-driven to Model-driven (Reactive Forms)
    2. Using the ReactiveFormsModule
    3. Creating a Reactive form
    4. formGroup and formControl directives
    5. Bind form controls to a model
    6. Add validations to the model
    7. Hide and show validation messages
  21. Custom Directives
    1. Access the DOM Element using the ElementRef
    2. Respond to User Events using HostListener
    3. Pass Values via Data Binding
  22. Angular CLI
    1. Installation
    2. Usage
    3. Generating a New Project
    4. Running Unit Tests with Jasmine and Karma
    5. Running End-to-end Tests with Protractor
    6. Generating Components, Directives, Pipes and Services
    7. Building with Webpack
      1. Ahead-of-time (AOT) Compilation
  23. Custom Pipes
    1. Custom Pipe Example
    2. Using a Custom Pipe
      1. In Templates
      2. In Code
    3. Pure and Impure Pipes
  24. AngularJS (Angular 1) to Angular (Angular 2+ including Angular 4) Migration Strategies
    1. Overview
    2. Adding TypeScript to an Angular Project
    3. Add Angular (Angular 2+) and Module Loader
    4. Using TypeScript in an AngularJS Project
    5. AngularJS and Angular in the same Project
    6. Upgrading Services
    7. Controllers to Components
    8. Filters to Pipes
    9. Upgrade Router
    10. Removing AngularJS from the Project
  25. Redux Basics (using ngrx)
    1. Create a Reducer
    2. Configure a Store
    3. Dispatch Actions
  26. Redux DevTools
    1. Configure the Redux DevTools in your Application
    2. Install the Redux DevTools Chrome Extension
    3. Using DevTools to Time Travel
Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Preparing for Class

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

90,172

Students who have taken Live Online Training

16,040

Organizations who trust Webucator for their training needs

100%

Satisfaction guarantee and retake option

9.45

Students rated our trainers 9.45 out of 10 based on 5076 reviews

I began the class with a limited knowledge base of Crystal Reports so I really enjoyed everything about the class. It was great to learn so much about this program.

Melissa Castle, People, Inc.
Abingdon VA

The Advanced Illustrator Course was fast paced but easy to follow and whenever I had a question, the instructor took the time to go over the section in detail.

Jenny Green, Edgewood Management Corporation
Gaithersburg MD

Well worth your time.

Donald Velard, Raritan

Instructor is a great teacher - very engaging, and patient.

Anjelica Grant, Friendship Public Charter School

Contact Us or call 1-877-932-8228