Comprehensive Angular 5 Programming Training

Chapter 1 - Introducing Angular

• What is Angular?
• Central Features of the Angular Framework
• Why Angular?
• Building Blocks of an Angular Application
• Basic Architecture of an Angular Application
• Angular vs. AngularJS
• Angular Semantic Versioning
• Installing and Using Angular
• A Basic Angular Application
• Anatomy of a Basic Application
• The Main Component File
• The Application Module File
• The index.html File
• The Bootstrap File
• Running the Application
• Building the Application
• Summary

Chapter 2 - Development Setup of Angular

• Angular Development Lifecycle
• Angular is Modular
• What is Node.js?
• Installing Node.js and NPM
• Node Package Manager (NPM)
• Package Descriptor File - package.json
• Semantic Version Numbering
• Package Version Numbering Syntax
• Updating Packages
• Uninstalling Packages
• Installing Angular Packages
• Angular CLI
• Creating a New Project
• Angular Development Dependencies
• TypeScript Typings
• Testing Tools
• Development Web Server
• Configuring the Web Server
• The Build System
• Configuring the Build
• Summary

Chapter 3 - Introduction to TypeScript and ES6

• Programming Languages for Use with Angular
• TypeScript Syntax
• Programming Editors
• The Type System – Defining Variables
• The Type System – Defining Arrays
• Type in Functions
• Type Inference
• The Type System – Classes & Objects
• Class Constructors
• Class Constructors – Alternate Form
• Interfaces
• Working with ES6 Modules
• Visibility Control
• var, let and const - Defined
• var, let and const - Usage
• Arrow Functions
• Arrow Function Compact Syntax
• Arrow Function and Caller Context
• Template Strings
• Template Strings – Variables and Expressions
• Template Strings – Multiline
• Generics - Class
• Generics - Methods
• Generics - Restricting Types
• Generics - Restricting Types: Example
• TypeScript Transpilation
• Summary

Chapter 4 - Components in Angular

• What is a Component?
• An Example Component
• The Component Class
• Adding a Component to Its Module
• Creating a Component Using Angular CLI
• Developing a Simple Login Component
• Component Template
• Login Component: Add HTML
• The HTML Component Template
• The templateUrl property
• Login Component: Add CSS Styling
• Login Component: Hook Up Input Fields and Button
• Login Component: Fields & Button in the Component Class
• Component Decorator Properties
• Component Hierarchy
• The Application Root Component
• Using a Regular Component
• The Build System
• Component Lifecycle Hooks
• Using a Lifecycle Hook: OnInit
• Summary

Chapter 5 - Data and Event Binding

• Binding Syntax
• One-Way Output Binding
• Binding Displayed Output Values
• Setting Component Properties
• More About Setting Properties
• Setting DOM Element Properties
• Event Binding
• Binding Events Examples
• Firing Event from a Component
• @Output() Example - Child Component
• @Output() Example - Parent Component
• Two-Way Binding of Input Fields
• Input Binding Examples
• Two Way Binding in a Component
• Use Two Way Binding
• Breaking Down ngModel
• Summary

Chapter 6 - Attribute Directives

• What are Attribute Directives
• Apply Styles by Changing Classes
• Changing Classes – Example
• Applying Styles Directly
• Applying Styles Directly - Example
• Controlling Element Visibility
• Setting Image Source Dynamically
• Setting Hyperlink Source Dynamically
• Writing a Custom Attribute Directive
• Using a Custom Attribute Directive
• Supplying Input to a Directive
• Handling Event from a Custom Directive
• Summary

Chapter 7 - Structural Directives

• Structural Directives
• Adding and Removing Elements Dynamically
• If-Else Syntax of ngIf
• Declare Variables in ngIf
• Looping Using ngFor
• ngFor - Basic Syntax
• ngFor - Full Template Syntax
• Creating Tables with ngFor
• ngFor Local Variables
• ngFor Changes in the Backing Data Source
• Swapping Elements with ngSwitch
• ngSwitch - Basic Syntax
• Summary

Chapter 8 - Template Driven Forms

• Template Driven Forms
• Importing Forms Module
• A Basic Angular Form
• Binding Input Fields
• Accessing the NgForm Directive
• Binding the Form Submit Event
• The Submit Function
• Basic HTML5 Validation - "required" Attribute
• HTML5 vs. Angular Validation
• Angular Validators
• The NgModel Directive
• Controlling when validation is applied
• Displaying Form Validation State
• Displaying Field Validation State
• Displaying Validation State Using Classes
• Disabling Submit when Form is Invalid
• Submitting the Form
• Binding to Object Variables
• Binding to Object Variables - Code
• Additional Input Types
• Checkboxes
• Select (Drop Down) Fields
• Rendering Options for Select (Drop Down)
• Date fields
• Radio Buttons
• Summary

Chapter 9 - Reactive Forms

• Reactive Forms Overview
• The Building Blocks
• Import ReactiveFormsModule
• Form Component Setup
• Design a Form
• FormControl Constructor
• Getting Form Values
• Setting Form Values
• The Synchronous Nature
• Validation
• Built-In Validators
• Showing Validation Error
• Custom Validator
• Using a Custom Validator
• Sub FormGroups - Component Class
• Sub FormGroups - HTML Template
• Why Use Sub FormGroups
• Summary

Chapter 10 - Angular Modules

• Why Angular Modules?
• But, We Already Had ES6 Module
• Angular Built-in Modules
• The Root Module
• Feature Modules
• Create Feature Module Using CLI
• The Module Class
• @NgModule Properties
• Using One Module From Another
• Importing BrowserModule or CommonModule
• Lazy-Loaded Modules
• How to Organize Modules?
• Third Party Modules
• Summary

Chapter 11 - Services and Dependency Injection

• What is a Service?
• Creating a Basic Service
• What is Dependency Injection?
• What Dependency Injection Looks Like
• Injecting Services
• Dependency Injection Hierarchy Diagram
• Using a Service in a Component: Dedicated Instance
• Injection Hierarchy - Dedicated Instance
• Using a Service in a Component: Dedicated Instance - Example Code
• Using onInit to Initialize Component Data
• Using a Shared Service Instance
• Injection Hierarchy - Shared Instance
• Dependency Injection and @Host
• Dependency Injection and @Optional
• Summary

Chapter 12 - HTTP Client

• The Angular HTTP Client
• Using The HTTP Client - Overview
• Importing HttpClientModule
• Simple Example
• Service Using HttpClient
• ES6 Import Statements
• Making a GET Request
• What does an Observable Object do?
• Using the Service in a Component
• The PeopleService Client Component
• Error Handling
• Customizing Error Object with .catch()
• Making a POST Request
• Making a PUT Request
• Making a DELETE Request
• Summary

Chapter 13 - Pipes and Data Formatting

• What are Pipes?
• Built-In Pipes
• Using Pipes in HTML Template
• Chaining Pipes
• Using Pipes in Code
• Internationalized Pipes (i18n)
• Loading Locale Data
• Decimal Pipe
• Currency Pipe
• Custom Pipes
• Custom Pipe Example
• Using Custom Pipes
• Using a Pipe with ngFor
• A Filter Pipe
• A Sort Pipe
• Pipe Category: Pure and Impure
• Pure Pipe Example
• Impure Pipe Example
• Summary

Chapter 14 - Introduction to Single Page Applications

• What is a Single Page Application (SPA)
• Traditional Web Application
• SPA Workflow
• Single Page Application Advantages
• HTML5 History API
• SPA Challenges
• Implementing SPA's Using Angular
• Summary

Chapter 15 - The Angular Component Router

• The Component Router
• View Navigation
• Component Router Terminology
• Setting up the Routes
• Using Angular CLI
• Hosting the Routed Component
• Navigation Using Links and Buttons
• Programmatic Navigation
• Basic Navigation
• Passing Data During Navigation
• Creating Routes with Route Parameters
• Navigating with Route Parameters
• Obtaining the Route Parameter Values
• Retrieving the Route Parameter Synchronously
• Retrieving a Route Parameter Asynchronously
• Query Parameters
• Supplying Query Parameters
• Retrieving Query Parameters Asynchronously
• Problems with Manual URL entry and Bookmarking
• Fixing Manual URL entry and Bookmarking
• Summary

Chapter 16 - Advanced HTTP Client

• Request Options
• Returning an HttpResponse Object
• Setting Request Headers
• Observable Operators
• Creating a Simple Observable
• The create() Operator
• The map() Operator
• The flatMap() Operator
• The zip() Operator
• Caching HTTP Response
• Making Sequential HTTP Calls
• Making Parallel Calls
• Summary

Chapter 17 - Consuming WebSockets Data in Angular

• Web Sockets Overview
• Web Sockets Use Cases
• Web Socket URLs
• Web Sockets Servers
• Web Socket Client
• The socket.io-client library
• Using socket.io-client in JavaScript
• Setting up socket.io-client in Angular Projects
• Using socket.io-client in an Angular service
• Angular websocket.service Notes:
• The Angular Web Socket Client Sample App
• Angular websocket.component.ts
• The Full websocket.component.ts code
• Implementation Modifications
• Summary

Chapter 18 - Advanced Routing

• Routing Overview
• Routing Enabled Project
• Routing Enabled Feature Module
• Using the Feature Module
• Lazy Loading the Feature Module
• Creating Links for the Feature Module Components
• More About Lazy Loading
• routerLinkActive binding
• Default Route
• Wildcard Route Path
• redirectTo
• Child Routes
• Defining Child Routes
• <router-outlet> for Child Routes
• Links for Child Routes
• Navigation Guards
• Creating Guard Implementations
• Using Guards in a Route
• Route Animations
• Summary

Chapter 19 - Angular Animations

• What is Animation?
• Animation Configuration
• Animation Techniques
• Animation Concepts
• CSS Property Animation
• Animation Property Settings
• CSS Transforms
• Starting and Stopping Animation
• Animation Events
• Browser Support
• Angular Animations
• Animation Imports
• Named Animation States
• Transitions
• Special States: void, *
• The animate() function
• Triggers
• Assigning Animations to Elements using Trigger
• Invoking Transitions
• Assigning Animation to Routes
• External Animation Definitions
• Summary

Chapter 20 - Introduction to Testing Angular Applications

• Unit Testing Angular Artifacts
• Testing Tools
• Testing Setup
• Typical Testing Steps
• Test Results
• Jasmine Test Suites
• Jasmine Specs (Unit Tests)
• Expectations (Assertions)
• Matchers
• Examples of Using Matchers
• Using the not Property
• Setup and Teardown in Unit Test Suites
• Example of beforeEach and afterEach Functions
• Angular Test Module
• Example Angular Test Module
• Testing a Service
• Injecting a Service Instance
• Test a Synchronous Method
• Test an Asynchronous Method
• Using Mock HTTP Client
• Supplying Canned Response
• Testing a Component
• Component Test Module
• Creating a Component Instance
• The ComponentFixture Class
• Basic Component Tests
• The DebugElement Class
• Simulating User Interaction
• Summary

Chapter 21 - Debugging

• Overview of Angular Debugging
• Viewing TypeScript Code in Debugger
• Using the debugger Keyword
• Inspecting Components
• Saving ng.probe Component References
• Modifying Values using Component References
• Debug Logging
• What is Augury?
• Installing Augury
• Opening Augury
• Augury - Component Tree
• Augury - Router Tree.
• Augury - NgModules Tab
• Common Exceptions
• Common Exceptions: 'No such file: package.json'
• Common Exceptions: 'Cant bind to ngModel'
• Common Exceptions: 'router-outlet not a known element'
• Common Exceptions: 'No provider for Router!'
• Summary

Chapter 22 - Angular Style Guide

• What is the Angular Style Guide?
• Style Categories
• Single Responsibility
• Naming
• Coding Conventions
• App Structure and Angular Modules
• Components
• Directives and Services
• Summary

Appendix A - Overview of JSON Web Tokens (JWT)

• RESTful Web Service API Refresher
• JSON Web Tokens
• JSON Web Token Architecture
• JWT Header
• JWT Payload
• JWT Example Payload
• JWT Example Signature
• How JWT Tokens are Used
• Adding JWT to HTTP Header
• How The Server Makes Use of JWT Tokens
• What are “Scopes”?
• What About OAuth?
• Summary