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

This Comprehensive Angular training class teaches students the skills and best practices they need to design, build, test, and deploy applications that provide rich end-user experiences similar to a desktop application while still offering the ease of deployment of a web application.

Goals
  1. Understand how single-page web application architectures (including Angular) are different than traditional web development architectures
  2. Use new JavaScript (ES6) language features including Classes, Modules, and Arrow Functions
  3. Use new TypeScript language features including Static Types, Interfaces, and Generics
  4. Build an application from scratch using Angular 5
  5. Learn Angular coding and architecture best practices
  6. Understand and use Angular Model-driven Forms, Observables, Dependency Injection, and Routing
  7. Communicate with a backend server using Angular's HttpClient service to load and save data.
  8. Unit test all the parts of an Angular application including Modules, Components, Services, and Pipes
  9. Upgrade an existing application from AngularJS to Angular 5 over time by running both frameworks in the same project
  10. Start a new Angular project and scaffold modules, components, services, models, routes, and unit tests following best practices using the Angular CLI
  11. Build and deploy an Angular application including combining and minifying JavaScript and HTML files, Tree-shaking unused code, and doing Ahead-of-Time compilation to reduce the size of the Angular framework.
  12. Write End-to-End Tests if your application with Protractor which uses Selenium Web Driver
  13. Using Redux and NgRx to maintain the state in your application
Outline
  1. Introduction
  2. Why Angular?
    1. User Experience similar to a Desktop Application
    2. Productivity and Tooling
    3. Performance
    4. Community
    5. Full-featured Framework
    6. Platform for Targeting Native Mobile not just Web Browsers
  3. Understanding Angular Versions
    1. AngularJS (Angular 1.x)
    2. Angular
    3. Angular 2
    4. Angular 5
  4. Upgrading to Angular 5 from Angular 2 or Angular 4
    1. Angular Update Guide
  5. Angular 5 Features
    1. Build Optimizer
    2. Angular Universal State Transfer API and DOM Support
    3. Compiler Improvements
    4. Internationalized Number, Date, and Currency Pipes
      1. Replace the ReflectiveInjector with StaticInjector
    5. Zone Speed Improvements
    6. ExportAs Multiple Names
    7. HttpClient
    8. Angular CLI v1.5
    9. Angular Forms adds updateOn Blur / Submit
    10. RxJS 5.5
    11. New Router Lifecycle Events
  6. TypeScript and ECMAScript 6 (ES6) Fundamentals
    1. Classes
    2. ES Modules
    3. Arrow Functions
    4. Template Literals
    5. Scoping using let and const Keywords
    6. Spread Syntax and Rest Parameters
    7. Destructuring
    8. Decorators (JavaScript Aspect-Oriented Programming)
  7. Angular 5 Basics
    1. Components
    2. Templates
      1. Inline Templates
      2. Multi-line Templates using ES6 Template Literals
      3. External with Component-relative Paths
    3. Modules
      1. Angular Modules vs. ES Modules
    4. Models
  8. Template Syntax
    1. HTML in templates
    2. Interpolation
    3. Binding syntax
    4. Property binding
    5. Event binding
    6. Two-way data binding
    7. Attribute, class, and style bindings
    8. Built-in Directives
      1. Built-in attribute directives: NgClass, NgStyle, NgModel
      2. Built-in structural directives: NgIf (includes enhanced *ngIf syntax), NgFor
    9. Template Input Variables
    10. The NgSwitch Directives
    11. Template Reference Variables
    12. Input and output properties
    13. Template Expression Operators
    14. Pipe ( | )
    15. Safe Navigation Operator ( ?. )
  9. Components
    1. Component Lifecycle Hooks
      1. Implementing the OnInit Lifecycle Hook
    2. Component Communication
      1. Input properties
      2. Output properties: Custom Events using EventEmitters
  10. Services and Dependency Injection
    1. Using a services to access data
    2. Using a service to encapsulate business logic
    3. Understanding the scope of services
  11. Dependency Injection
    1. Understanding Dependency Injection
    2. Angular's Dependency Injection System
    3. Registering
    4. Injecting
    5. Hierarchical Injection
  12. Model-driven Forms (Reactive Forms)
    1. Importing the ReactiveFormsModule
    2. FormControl, FormGroup, and AbstractControl
    3. Binding DOM Elements to FormGroups and FormControls
    4. Validation Rules, Messages, and Styles
    5. Refactoring ReactiveForms for Reuse
    6. Custom Validators
  13. RxJS and Observables
    1. What is an Observable?
    2. Observable Operators
    3. Creating Observables Using Static Operators
    4. What is an Observer?
    5. Observer Example
    6. Subject
    7. Subject Example
    8. EventEmitter or Observable
  14. Communicating with the Server using the HttpClient Service
    1. Deciding between Promises or Observables (RxJS)
    2. Making a HTTP GET Request
    3. Sending data to the server using Http POST and PUT Requests
    4. Issuing a Http DELETE Request
    5. Intercepting Requests and Responses
    6. WebSockets
  15. Router
    1. Importing the RouterModule and Routes
    2. Configuring Routes
    3. Displaying Components using a RouterOutlet
    4. Navigating declaratively with RouterLink
    5. Navigating with code using the Router
    6. Accessing parameters using ActivatedRoute
    7. Organizing your code into Modules
  16. Unit Testing
    1. Tools: Jasmine, Karma
    2. Jasmine Syntax: describe, it, beforeEach, afterEach, matchers
    3. Setup and your First Test
    4. Testing Terminology: Mock, Stub, Spy, Fakse
    5. Angular Testing Terminology: TestBed, ComponentFixture, debugElement, async, fakeAsync, tick, inject
    6. Simple Component Test
    7. Detecting Component Changes
    8. Testing a Component with properties (inputs) and events (outputs)
    9. Testing a Component that uses the Router
    10. Testing a Component that depends on a Service using a Spy
    11. Testing a Component that depends on a Service using a Fake
    12. Testing a Service and Mocking its Http requests
    13. Testing a Pipe
  17. Security
    1. How to Prevent Cross-site Scripting (XSS)
    2. Trusting values with the DOMSanitizer
    3. HTTP Attacks
    4. Security Audits of Angular Applications
  18. Advanced Components
    1. Component Styles
      1. using MetaData properties: Styles and StyleUrls
      2. Encapsulation Strategies
    2. Change Detection Strategies
    3. Component Lifecycle Hooks
  19. Advanced Routing
    1. Lazy-loading Angular Modules
    2. Location Strategies
    3. Nested or Child Routes
    4. Route Guards
  20. Advanced Dependency Injection
    1. Providers
    2. Using the @Optional and @Host Decorators
  21. Attribute Directives
    1. Creating a custom Attribute Directive using ElementRef, Render
  22. Pipes
    1. Built-in Pipes: Using, Passing Parameters, Chaining
    2. Creating a custom Pipe using PipeTransform
    3. Understanding Pure and Impure Pipes
  23. Creating, Building, and Deploying an Angular Application
    1. Manually
    2. Using the Angular CLI
      1. Overview
      2. Features
      3. Installation
      4. Generating a New Project
      5. Generating Code
      6. Builds
      7. Customizing Builds
      8. Angular Material Setup
      9. Eject
  24. Template-driven Forms
    1. NgSubmit Directive
      1. FormsModule
      2. NgForm, NgModel, and NgModelGroup Directives
      3. Validation Directives
        1. Displaying validation messages
        2. Styling validation messages
  25. Upgrade Strategies from AngularJS
    1. Preparing your AngularJS Project
      1. Integrating a Module Loader
      2. Start using TypeScript
      3. Use Components instead of Controllers
    2. Angular 5 and AngularJS together
      1. Understanding the Upgrade Module
      2. Angular (Angular 5) Components in AngularJS Code
      3. AngularJS Directives in Angular Code
      4. Injecting AngularJS Services into Angular
      5. Injecting Angular Services into AngularJS
      6. Upgrade from AngularJS Router to Angular Router
  26. Redux
    1. Redux Basics
    2. Debugging and Time Traveling with Redux DevTools
  27. End-to-End Testing
    1. What is Protractor?
    2. Why Protractor?
    3. Using Locators
    4. Page Objects
    5. Debugging E2E Tests
  28. npm QuickStart
    1. Installing Dependencies Locally
    2. Using npm as a Build Tool
  29. Webpack Guide
    1. Installation
    2. Building/Bundling
      1. JavaScript
      2. CSS
      3. HTML
      4. Images
    3. Development Builds
    4. Production Builds
  30. Conclusion
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.

Class Prerequisites

Experience in the following is required for this Angular class:

  • Prior experience developing with JavaScript.
Preparing for Class

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

93,910

Students who have taken Live Online Training

16,156

Organizations who trust Webucator for their training needs

100%

Satisfaction guarantee and retake option

9.44

Students rated our trainers 9.44 out of 10 based on 4998 reviews

Overall, the class was excellent and the instructor did a great job. I will definitely use Webucator for any other professional development training that I need.

Jennifer Akowskey, Advanced Decision Vectors, LLC
Alexandria VA

I would recommend Webucator for any of your online IT training needs as they are very thorough in their training.

James Morgan, West Virginia School of Osteopathic Medicine
Lewisburg WV

The class was amazing! Will definitely be back.

Daniela Espinal, WBD Corp
Saint Cloud FL

The class was very well designed and facilitated, the pace was good, and I loved that the content was custom for our needs.

Meredith Patton, Kelley Blue Book
Irvine CA

Contact Us or call 1-877-932-8228