Angular 2/4/5 Training Course on Live Projects by working professional. Trainer â?? 12+ years experienced professional. Learn the core concepts of new Angular 2/4/5 with TypeScript, ES 6 by industry expert.
Create web based Single Page Applications using Angular 5. Learn how to make a static web page more interactive thus enhancing its user experience. 30 hours of Interactive sessions; Fundamental to Advanced level learning; Build web based SPAs using Angular 2/4/5.
Â
FREE Job Assistance, Hands on Training, Interview Prepare Session, Live ProjectÂ
Course Content
Angular 2/4/5 & TypeScript
1. Introduction to Angular 2/4
What is Angular ?
Why typescript ?
What is in typescript?
Central Features of the Angular Framework
Why Angular?
Scope and Goal of Angular
Angular vs. AngularJS
Installing and Using Angular
Adding Angular and Dependencies to Your App
Building Blocks of and Angular Application
A Basic Angular Application
Basic App â?? index.html â?? 1/2
Basic App â?? index.html â?? 2/2
Basic-App: Main Application File
Basic-App: The Component File â?? 1/2
Basic-App: The Component File â?? 2/2
2. Intro to TypeScript and ES6
Why typescript ?
What is in typescript?
Programming Languages for Use with Angular
TypeScript Syntax
The Type System â?? Defining Variables
The Type System â?? Defining Arrays
The Type System â?? Classes & Objects
Class Constructors
Class Constructors â?? Alternate Form
Interfaces
Parameter and Return Value Types
Working with Modules
TypeScript Transpilation
Arrow Functions
Template Strings
Template Strings â?? Variables and Expressions
Template Strings â?? Multiline
Generics â?? Class
Generics â?? Methods
Generics â?? Restricting Types
3. Components in Angular 2/4
What is a Component?
An Example Component
Component Starter
Developing a Simple Login Component
Login Component: Add HTML
The HTML Component Template
Login Component
Component Decorator Properties
Component Lifecycle Hooks
Using a Lifecycle Hook: OnInit
4. Data and Event Binding
Binding Syntax
One-Way Output Binding
Binding Displayed Output Values
Two-Way Binding of Input Fields
Input Binding Examples
Binding Events
Binding Events Examples
Setting Element Properties
Setting Properties: Examples
5. Attribute Directives and Property Bindings
What are Directives
Directive Types
Apply Styles by Changing Classes
Changing Classes â?? Example
Applying Styles Directly
Applying Styles Directly â?? Example
Obsolete Directives and Property Binding
Controlling Element Visibility
Setting Image Source Dynamically
Setting Hyperlink Source Dynamically
6. Structural Directives
Structural Directives
Adding and Removing Elements Dynamically
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
ngSwitch â?? Full Template Syntax
7. Template Driven Forms
Template Driven Forms
Note on Deprecated Forms APIs
A Basic Angular Form
Binding Input Fields
Accessing the Form Object
Binding the Form Submit Event
The Submit Function
Basic HTML5 Validation â?? â??requiredâ?? Attribute
HTML5 vs. Angular Validation
Angular Validation
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
Additional Input Types
Checkboxes
Select(drop down) Fields
Rendering Options for Select (drop down)
Date fields
Radio Buttons
8. Service and Dependency Injection
What is a Service?
Creating a Basic Service
What is Dependency Injection?
What Dependency Injection Looks Like
Injecting Services
Using a Service in a Component: Dedicated Instance
Using onInit to Initialize Component Data
Using a Shared Service Instance
Dependency Injection
9. HTTP Client
The Angular HTTP Client
Using The HTTP Client â?? Overview
Setting up the Root Component
Service Using Http Client
Importing Individual HTTP Providers into Services
Service Imports
The Observable object type
What does an Observable Object do?
Making a Basic HTTP GET Call
Using the Service in a Component
The Component
Component Code Review
Importing Observable Methods
Enhancing the Service with .map() and .catch()
Using .map()
Using .catch()
Using toPromise()
GET Request
GET Request with Options
POST Request
Reading HTTP Response Headers
10. Pipes and Data Formatting
What are Pipes?
More on Pipes
Formatting Changes in Angular
Using a Built-in Pipe
Built-In Pipes
Using Pipes in HTML
Chaining Pipes
Using Pipes in JavaScript
Some Pipe Examples
Decimal Pipe
CurrencyPipe
Custom Pipes
Custom Pipe Example
Using Custom Pipes
A Filter Pipe
A Sort Pipe
Pipe Category: Pure and Impure
Pure Pipe Example
Impure Pipe Example
11. Introduction to Single Page Application
What is a Single Page Application (Training Portal)
Training Portal Workflow
Traditional Web Application Capabilities
Single Page Application Advantages
Training Portal and Traditional Web Sites
Training Portal Challanges
Implementing Training Portal Using Angular
Simple Training Portal Using Visibility Control
Training Portal Using Angular Components
Training Portal with Angular Components â?? Switching
Training Portal with Angular Components â?? The Displayed Component
Implement Training Portal Using an Angular Component Router
12. The Angular 2/4 Component Router
Routing and Navigation
The Component Router
Traditional Browser Navigation
Component Router Terminology
Setting up the Component Router
Local URL Links
Browser pushState and
Routes
The app.routes.ts File
The app.routes.ts File â?? Example
Bootstrapping Routing in Main.ts
A Basic App With Routing
App Routes
AppComponent â?? Code
AppComponent â?? Router Related Features
AppComponent â??
AppComponent â?? precompile array
AppComponent â?? routerLinks
Programmatic Navigation
Basic Navigation
Passing Data During Navigation
Creating Routes with Route Parameters
Navigating with Route Parameters
Using Route Parameter Values
Retrieving the Route Parameter Synchronously
Retrieving a Route Parameter Asynchronously
Query Parameters
Query Parameters â?? Example Component
Query Parameters â?? queryParams
Query Parameters â?? Navigation
Retrieving Query Parameters Asynchronously
Problems with Manual URL entry and Bookmarking
Fixing Manual URL entry and Bookmarking
13. Introduction to Node.JS
What is Node.js?
Application of Node.js
Installing Node.js and NPM
Using Node Package Manager (NPM)
Installing a Package
About Global Installation
Setting Up Dependency
Package Version Numbering Syntax
Updating Packages
Uninstalling Packages