Angular 8 Programming

Course subjects

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

• 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

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

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

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

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

Chapter 6 – Attribute Directives

• What are Attribute Directives?

• Apply Styles by Changing CSS 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

Chapter 7 – Structural Directives

• Structural Directives

• Adding and Removing Elements Dynamically

• If-Else Syntax of ngIf

• Looping Using ngFor

• ngFor – Basic Example

• Creating Tables with ngFor

• ngFor Local Variables

• Manipulating the Collection

• Example – Deleting an Item

• Swapping Elements with ngSwitch

• ngSwitch – Basic Syntax

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

Chapter 9 – Reactive Forms

• Reactive Forms Overview

• The Building Blocks

• Import ReactiveFormsModule

• Construct a Form

• Design the Template

• FormControl Constructor

• Getting Form Values

• Setting Form Values

• The Synchronous Nature

• Subscribing to Input Changes

• 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

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 Organise Modules

• Third Party Modules

Chapter 11 – Services and Dependency Injection

• What is a Service?

• Creating a Basic Service

• What is Dependency Injection?

• What Dependency Injection Looks Like

• Injectors

• Injector Hierarchy

• Register a Service with a Module Injector

• Registering a Service with the Root Injector

• Registering a Service with a Component’s Injector

• Where to Register a Service

• Dependency Injection in Other Artifacts

• Providing an Alternate Implementation

• Dependency Injection and @Host

• Dependency Injection and @Optional

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

• Making a POST Request

• Making a PUT Request

• Making a DELETE Request

Chapter 13 – Pipes and Data Formatting

• What are Pipes?

• Built-In Pipes

• Using Pipes in HTML Template

• Chaining Pipes

• Using Pipes in Code

• Internationalised 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

Chapter 14 – Introduction to Single Page Applications

• What is a Single Page Application (SPA)?

• Traditional Web Application

• SPA Workflow

• SPA Advantages

• HTML5 History API

• SPA Challenges

• Implementing SPAs Using Angular

Chapter 15 – The Angular Component Router

• The Component Router

• View Navigation

• The Angular Router API

• Creating a Router Enabled Application

• Hosting the Routed Component

• Navigation Using Links and Buttons

• Programmatic Navigation

• Passing 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

Chapter 16 – Advanced HTTP Client

• Request Options

• Returning an HttpResponse Object

• Setting Request Headers

• Creating New Observables

• Creating a Simple Observable

• The Observable.create() Method

• Observable Operators

• More About map

• Piping Operators

• The flatMap() Operator

• The tap() Operator

• The zip() Operator

• Caching HTTP Response

• Making Sequential HTTP Calls

• Making Parallel Calls

• Customising Error Object with catchError()

• Error in Pipeline

• Error Recovery

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

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

• for Child Routes

• Links for Child Routes

• Navigation Guards

• Creating Guard Implementations

• Using Guards in a Route

• Route Animations

Chapter 19 – 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

Chapter 20 – 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!’

Lab Exercises

• Lab 1: Introduction to Angular

• Lab 2: Introduction to TypeScript

• Lab 3: Introduction to Components

• Lab 4: Create the Subscription Form Component

• Lab 5: Understanding Data Binding

• Lab 6: One Way Data Binding in a Custom Component

• Lab 7: Using Basic Angular Directives

• Lab 8: Using Structural Directives

• Lab 9: Custom Attribute Directive

• Lab 10: Template Driven Form

• Lab 11: Validation of a Template Driven Form

• Lab 12: Reactive Forms

• Lab 13: Service and Dependency Injection

• Lab 14: HTTP Client Development

• Lab 15: Using Pipes

• Lab 16: Basic Single Page Application Using Router

• Lab 17: Angular Communication with REST Services

• Lab 18: HTTP Error Handling and Recovery

• Lab 19: Using Angular Bootstrap

• Lab 20: Consuming Data from Web Sockets

• Lab 21: Lazy Module Loading

• Lab 22: Advanced Routing

• Lab 23: Introduction to Unit Testing

• Lab 24: Debugging Angular Applications