ANGULAR 8

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
• Customizing Error Object with catchError()
• Error in Pipeline
• Error Recovery
• Summary

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

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

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

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