Duration
5 days
Overview
All students will:
- 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 Static Types, Interfaces, and Generics
- Build applications from scratch using Angular 5
- Learn Angular coding and architecture best practices
- Understand and use Angular model-driven forms, observables, dependency injection, and routing
- Communicate Angular’s HttpClient service to load and save data from a server backend
Overview
Why Angular?
Understanding Angular Versions
Upgrading to Angular 5 from Angular 2 or Angular 4
Angular 5 Features
TypeScript and ECMAScript 6 (ES6) Fundamentals
Classes
ES Modules
Arrow Functions
Template Literals
Scoping using let and const Keywords
Spread Syntax and Rest Parameters
Destructuring
Decorators (JavaScript Aspect-Oriented Programming)
Angular 5 Basics
Components
Inline Templates
Multi-line Templates using ES6 Template Literals
External with Component-relative Paths
Angular Modules vs. ES Modules
Models
Template Syntax
HTML in templates
Interpolation
Binding syntax
Property binding
Event binding
Two-way data binding
Attribute, class, and style bindings
Built-in Directives
Template Input Variables
The NgSwitch Directives
Template Reference Variables
Input and output properties
Template Expression Operators
Pipe ( | )
Safe Navigation Operator ( ?. )
Components
Component Lifecycle Hooks
Component Communication
Services & Dependency Injection
Using a service to access data
Using a service to encapsulate business logic
Understanding the scope of services
Dependency Injection
Understanding Dependency Injection
Angular’s Dependency Injection System
Registering
Injecting
Hierarchical Injection
Model-driven Forms (Reactive Forms)
Importing the ReactiveFormsModule
FormControl, FormGroup, and AbstractControl
Binding DOM Elements to FormGroups and FormControls
Validation Rules, Messages, and Styles
Refactoring ReactiveForms for Reuse
Custom Validators
RxJS and Observables
What is an Observable?
Observable Operators
Creating Observables Using Static Operators
What is an Observer?
Observer Example
Subject
Subject Example
EventEmitter or Observable
Communicating with the Server using the HttpClient Service
Deciding between Promises or Observables (RxJS)
Making an HTTP GET Request
Sending data to the server using Http POST and PUT Requests
Issuing an Http DELETE Request
Intercepting Requests and Responses
WebSockets
Router
Importing the RouterModule and Routes
Configuring Routes
Displaying Components using a RouterOutlet
Navigating declaratively with RouterLink
Navigating with code using the Router
Accessing parameters using ActivatedRoute
Organizing your code into Modules
Conclusion
Programme scope, delivery arrangements and suitability are confirmed during enquiry.