JFT ANGULAR JS 6
ANGULAR TRAINING OUTLINE
• Overview
o Benefits of Building using Angular
o Understanding Angular Versions
o Single-page Web Application Architectures vs. Traditional Server-side
Web Application Architectures
o Angular Style Guide
o Angular Architecture
o What's New in Angular 6
o Upgrading to Angular 6 from earlier versions of Angular
• TypeScript and ECMAScript 6 (ES6) Fundamentals
o Classes
o ES Modules
o Arrow Functions
o Template Literals
o Scoping using let, var, and const Keywords
o Spread Syntax and Rest Parameters
o Destructuring
o Static Type Annotations
o Decorators
• Angular Basics
o Components
o Templates: Inline, Multi-line, and External with Component-relative
Paths
o Angular Modules (NgModule)
o Angular Modules vs. ES Modules
• Data Binding
o Interpolation
o Property binding
o Event binding
o Two-way data binding
• Directives
o Structural: ngFor, ngIf, ngSwitch
o Attribute: ngClass, ngStyle
• Components
o Component Lifecycle Hooks
o Component Communication using @Input, @Output
o Component Styles
• Services & Dependency Injection
o Using a service to access data
JFT ANGULAR JS 6
o Using a service to encapsulate business logic
o Understanding the scope of services
• Dependency Injection
o Understanding Dependency Injection
o Angular’s Dependency Injection System
o Registering
o Injecting
o Hierarchical Injection
• Model-driven Forms (Reactive Forms)
o Importing the ReactiveFormsModule
o FormControl, FormGroup, and AbstractControl
o Binding DOM Elements to FormGroups and FormControls
o Validation Rules, Messages, and Styles
o Refactoring ReactiveForms for Reuse
o Custom Validators
• Communicating with the Server using the HttpClient Service
o Deciding between Promises or Observables (RxJS)
o Making an HTTP GET Request
o Sending data to the server using Http POST and PUT Requests
o Issuing an Http DELETE Request
o Intercepting Requests and Responses
o WebSockets
• Router
o Importing the RouterModule and Routes
o Configuring Routes
o Displaying Components using a RouterOutlet
o Navigating declaratively with RouterLink
o Navigating with code using the Router
o Accessing parameters using ActivatedRoute
o Organizing your code into Modules
• Conclusion
ADVANCED ANGULAR TRAINING OUTLINE
• Introduction
• Unit Testing
o Tools: Jasmine, Karma
o Jasmine Syntax: describe, it, beforeEach, afterEach, matchers
o Setup and your First Test
o Testing Terminology: Mock, Stub, Spy, Fakes
o Angular Testing Terminology: TestBed, ComponentFixture,
debugElement, async, fakeAsync, tick, inject
JFT ANGULAR JS 6
o Simple Component Test
o Detecting Component Changes
o Testing a Component with properties (inputs) and events (outputs)
o Testing a Component that uses the Router
o Testing a Component that depends on a Service using a Spy
o Testing a Component that depends on a Service using a Fake
o Testing a Service and Mocking its Http requests
o Testing a Pipe
• RxJS and Observables
o What is an Observable?
o Creating Observables
o What is an Observer?
o Observer Example
o Operators: map, switchMap, debounceTime, distinctUntilChanged
o Practical Application of using RxJS
o Subject
o Subject Example
o EventEmitter or Observable
• Security
o Best Practices
o Preventing Cross-site Scripting (XSS)
o Trusting values with the DOMSanitizer
o HTTP Attacks (CSRF and CSSI)
o Authentication using JSON Web Tokens (JWT)
o Authorization: Router Guards
• Change Detection Strategies
o Default
o OnPush
• Advanced Routing
o Lazy-loading Angular Modules
o Location Strategies
o Nested or Child Routes
• Advanced Dependency Injection
o Providers
o Using the @Optional and @Host Decorators
• Pipes
o Built-in Pipes: Using, Passing Parameters, Chaining
o Creating a custom Pipe using PipeTransform
o Understanding Pure and Impure Pipes
• Angular CLI
o Creating a New Project
JFT ANGULAR JS 6
o Generating Modules, Components, Models, and Services
o Customizing the CLI to include CSS Preprocessors (SASS) and other UI
libraries: Bootstrap, Material, or Clarity
• Deploying an Angular Application to Production
o Manually
o Using the Angular CLI
• Choose any two optional topics. If desired, the course can be customized to
include more than two of these topics if other topics are scaled back or
removed.
o npm QuickStart
▪ Installing Dependencies
▪ Understanding package.json and package-lock.json
▪ Using npm as a Build Tool
o Managing Shared Application State using ngrx and Redux
▪ Benefits Overview
▪ Three Principles of Redux: Single Source of Truth, State is Read-
Only, Pure Functions
▪ Examples of Pure Functions
▪ Reducers
▪ Simple ngrx Example
▪ Time-traveling with Redux Devtools
▪ Full ngrx Example Application
o Upgrade Strategies from AngularJS
▪ High-level Approaches
▪ Concept Mapping AngularJS to Angular
▪ UpgradeAdapter
▪ What can be Upgraded or Downgraded
▪ What cannot be Upgraded or Downgraded
▪ UpgradeAdapter and Dependency Injection
o End-to-End Testing
▪ What is Protractor?
▪ Why Protractor?
▪ Using Locators
▪ Page Objects
▪ Debugging E2E Tests
