Angular 8 Training

0(0 Ratings)

Categories Angular 8 Training, Web Designing

Overview

Angular Training 8 Course by Cambridge Infotech is an online training course designed to help developers learn the fundamentals of Angular. It covers all aspects of the Angular framework from components to data binding and more, providing a comprehensive overview of its features. The course is broken down into eight lessons that explore different aspects of the platform, such as how it handles user interaction, how to set up basic routes and services, and how to build powerful UI components with its various tools. Each lesson provides ample hands-on training with real-world examples that help learners get a better grasp on concepts quickly. The instructors are experienced software professionals who have been using Angular for years and can provide valuable insight into best practices when using this popular front-end framework. At the end of each lesson, learners take part in interactive quizzes that test their understanding of the material covered in class.

Course Modules

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

Module 2: Development Setup of Angular

Angular Development Life cycle
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

Module 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

Module 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 template Url 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

Module 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

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

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

Module 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

Module 9: Reactive Forms

Reactive Forms Overview
The Building Blocks
Import Reactive Forms Module
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 Form Groups
Summary

Module 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

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

Module 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 People Service Client Component
Error Handling
Making a POST Request
Making a PUT Request
Making a DELETE Request
Summary

Module 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

Module 14: Introduction to Single Page Applications

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

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

Module 17: Consuming Web Sockets 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

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

Module 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 Debug Element Class
Simulating User Interaction
Summary

Module 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!’
Summary

Module 21: Introduction to Angular Material

Material Design (MD)
Angular Material (AM)
Adding Angular Material to a Project
Angular Default Component
Angular Material Schematics
Angular Material Modules
Adding Angular Material Modules to a Project
material.module.ts File
Adding material.module.ts to a Project
Angular Material Themes
Using Themes
Configuring Animations
Enabling Gesture Support
Angular Material Icons
Angular Material Components
Navigation
Layout
Layout Examples
Form Components
Example Controls
Summary

Student Ratings & Reviews

No Review Yet

Cart