"Charting the Course... Comprehensive Angular 6 Course Summary

Transcription

1 Course Summary Description Build applications with the user experience of a desktop application and the ease of deployment of a web application using Angular. Start from scratch by learning the JavaScript package manager (npm), the language (TypeScript), and the tools. Use those foundational skills to implement an Angular application using components, templates, services, routing and tests. Along the way, understand best practices as well as the architecture and design of Angular applications. Objectives At the end of this course, students will be able to: Understand how single-page web application architectures are different than traditional web application architectures Use new JavaScript (ES6) language features including Classes, Modules, and Arrow Functions Use new TypeScript language features including Types, Decorators, Interfaces, and Generics Learn Angular coding and architecture best practices including project layout and using container and presentation components Understand and use Angular model-driven forms, observables, dependency injection, and routing Communicate with a backend server using Angular s HttpClient to load and save data Configure the router and navigate between components Unit test all parts of an application including Components, Services, and Pipes Understand RxJS and Observables and where they can be used Implement Authentication and Authorization in an Angular Application Optimize Angular Performance by changing Change Detection Strategies Setup new projects from scratch using the Angular CLI Scaffold modules, components, services, models, routes, and unit tests in accordance with best practices using the Angular CLI Build and deploy an application to production using the Angular CLI Write End-to-End Tests (optional; taught only if this applies to your group) Upgrade an existing application from AngularJS to Angular 6 (optional; taught only if this applies to your group) Topics Overview TypeScript and ECMAScript 6 (ES6) Fundamentals Angular Basics Data Binding Directives Components Services & Dependency Injection Dependency Injection Model-driven Forms (Reactive Forms) Communicating with the Server using the HttpClient Service Router Unit Testing RxJS and Observables Security Change Detection Strategies Advanced Routing Advanced Dependency Injection Pipes Angular CLI Deploying an Angular Application to Production npm QuickStart Managing Shared Application State using ngrx and Redux Upgrade Strategies from AngularJS End-to-End Testing Creating Custom Attribute Directives Webpack Guide Template-driven Forms Conclusion

2 Course Summary (cont d) Audience This course is designed for those wanting to learn how to build an application from scratch using Angular 6. Prerequisites All Angular training students must have substantial prior experience developing with JavaScript. If attendees will not have prior JavaScript experience, we would be delighted to precede this class with a one- or two-day intensive JavaScript primer. Duration Five days

3 Course Outline I. Overview A. Benefits of Building using Angular B. Understanding Angular Versions C. Single-page Web Application Architectures vs. Traditional Server-side Web Application Architectures D. Angular Style Guide E. Angular Architecture F. What's New in Angular 6 G. Upgrading to Angular 6 from earlier versions of Angular II. TypeScript and ECMAScript 6 (ES6) Fundamentals A. Classes B. ES Modules C. Arrow Functions D. Template Literals E. Scoping using let, var, and const Keywords F. Spread Syntax and Rest Parameters G. Destructuring H. Static Type Annotations I. Decorators III. Angular Basics A. Components B. Templates: Inline, Multi-line, and External with Component-relative Paths C. Angular Modules (NgModule) D. Angular Modules vs. ES Modules IV. Data Binding A. Interpolation B. Property binding C. Event binding D. Two-way data binding V. Directives A. Structural: ngfor, ngif, ngswitch B. Attribute: ngclass, ngstyle VI. Components A. Component Lifecycle Hooks B. Component C. Component Styles VII. Services & Dependency Injection A. Using a service to access data B. Using a service to encapsulate business logic C. Understanding the scope of services VIII. Dependency Injection A. Understanding Dependency Injection B. Angular s Dependency Injection System C. Registering D. Injecting E. Hierarchical Injection IX. Model-driven Forms (Reactive Forms) A. Importing the ReactiveFormsModule B. FormControl, FormGroup, and AbstractControl C. Binding DOM Elements to FormGroups and FormControls D. Validation Rules, Messages, and Styles E. Refactoring ReactiveForms for Reuse F. Custom Validators X. Communicating with the Server using the HttpClient Service A. Deciding between Promises or Observables (RxJS) B. Making an HTTP GET Request C. Sending data to the server using Http POST and PUT Requests D. Issuing an Http DELETE Request E. Intercepting Requests and Responses F. WebSockets XI. Router A. Importing the RouterModule and Routes B. Configuring Routes C. Displaying Components using a RouterOutlet D. Navigating declaratively with RouterLink E. Navigating with code using the Router F. Accessing parameters using ActivatedRoute G. Organizing your code into Modules

4 Course Outline (cont d) XII. Unit Testing A. Tools: Jasmine, Karma B. Jasmine Syntax: describe, it, beforeeach, aftereach, matchers C. Setup and your First Test D. Testing Terminology: Mock, Stub, Spy, Fakes E. Angular Testing Terminology: TestBed, ComponentFixture, debugelement, async, fakeasync, tick, inject F. Simple Component Test G. Detecting Component Changes H. Testing a Component with properties (inputs) and events (outputs) I. Testing a Component that uses the Router J. Testing a Component that depends on a Service using a Spy K. Testing a Component that depends on a Service using a Fake L. Testing a Service and Mocking its Http requests M. Testing a Pipe XIII. RxJS and Observables A. What is an Observable? B. Creating Observables C. What is an Observer? D. Observer Example E. Operators: map, switchmap, debouncetime, distinctuntilchanged F. Practical Application of using RxJS G. Subject H. Subject Example I. EventEmitter or Observable XIV.Security A. Best Practices B. Preventing Cross-site Scripting (XSS) C. Trusting values with the DOMSanitizer D. HTTP Attacks (CSRF and CSSI) E. Authentication using JSON Web Tokens (JWT) F. Authorization: Router Guards XVI.Advanced Routing A. Lazy-loading Angular Modules B. Location Strategies C. Nested or Child Routes XVII. Advanced Dependency Injection A. Providers B. Using Decorators XVIII. Pipes A. Built-in Pipes: Using, Passing Parameters, Chaining B. Creating a custom Pipe using PipeTransform C. Understanding Pure and Impure Pipes XIX.Angular CLI A. Creating a New Project B. Generating Modules, Components, Models, and Services C. Customizing the CLI to include CSS Preprocessors (SASS) and other UI libraries: Bootstrap, Material, or Clarity XX. Deploying an Angular Application to Production A. Manually B. Using the Angular CLI Choose any two of the following optional topics. If desired the course outline can be customized to include more than two of these topics if other topics are scaled back or removed. XXI.npm QuickStart A. Installing Dependencies B. Understanding package.json and package-lock.json C. Using npm as a Build Tool XV. Change Detection Strategies A. Default B. OnPush

5 Course Outline (cont d) XXII. Managing Shared Application State using ngrx and Redux A. Benefits Overview B. Three Principles of Redux: Single Source of Truth, State is Read-Only, Pure Functions C. Examples of Pure Functions D. Reducers E. Simple ngrx Example F. Time-traveling with Redux Devtools G. Full ngrx Example Application XXIII. Upgrade Strategies from AngularJS A. High-level Approaches B. Concept Mapping AngularJS to Angular C. UpgradeAdapter D. What can be Upgraded or Downgraded E. What cannot be Upgraded or Downgraded F. UpgradeAdapter and Dependency Injection XXIV. End-to-End Testing A. What is Protractor? B. Why Protractor? C. Using Locators D. Page Objects E. Debugging E2E Tests XXV. Creating Custom Attribute Directives A. Creating a custom Attribute Directive using ElementRef and Render XXVI. Webpack Guide A. Installation B. Building/Bundling C. Development Builds D. Production Builds XXVII. Template-driven Forms A. NgSubmit Directive B. FormsModule C. NgForm, NgModel, and NgModelGroup Directives D. Validation Directives E. Conclusion