Angular JS


Start End Duration Location Details
January 24, 2022 January 28, 2022 KDE 3.1 Virtual Classroom (GMT+08:00)
February 21, 2022 February 25, 2022 KDE 3.1 Virtual Classroom (GMT+08:00)
March 21, 2022 March 25, 2022 KDE 3.1 Virtual Classroom (GMT+08:00)
April 04, 2022 April 08, 2022 KDE 3.1 Virtual Classroom (GMT+08:00)
May 23, 2022 May 27, 2022 KDE 3.1 Virtual Classroom (GMT+08:00)
June 20, 2022 June 24, 2022 KDE 3.1 Virtual Classroom (GMT+08:00)

Course Details

Angular JS

Duration: 5 Days

Course Code: AJS

Course Outline:

Writing Your First Angular Web Application
o Introduction to Single Page Application
o What do we need Angular for?
o Setting up the Development Environment
o Angular Application Architecture
o First Angular App
o Bootstrapping crash course

o Angular is built in TypeScript
o What do we get with TypeScript?
o Built-in types
o Classes
? Properties
? Methods
? Constructors
? Inheritance
o Utilities
? Fat Arrow Functions
? Template String

Angular Components
o    Angular Components and the @Component Decorator 
o    Creating an Angular Component using the Angular CLI 
o    Component Decorator Metadata 
o    Data Binding - String Interpolation - {{ }} 
o    Property Binding - [] 
o    Event Binding - () 
o    @Input and @Output Property Decorators 
o    Two-way Data Binding - [()] 
o    Attribute Binding - [attr.] 
o    Class Binding - [class.]
o    Style Bindings - [style.]

Angular Directive and Pipes
o Introduction to Directives 
o Built in Structural Directives 
o Built in Attribute Directives 
o Building custom Attribute Directives 
o Building Custom Structural Directives 
o Introduction to Pipes in Angular 
o Using Built In Pipes 
o Creating Custom Pipes in Angular 
o Pure and Impure Pipes in Angular

Angular Forms
o Types of Form in Angular 
o Reactive form in Angular 
o Dynamically Adding or Removing Form Control(s) or Form Group(s) using Form Array(s) 
o Validations to your Reactive Form 
o Validations to your Reactive Form 
o Resetting the value of a form

    Angular Routing with Guards
o Why Do We Need Routing?
o How client-side routing works
o Components of Angular routing
? Imports
? Routes
? Installing our Routes
? RouterOutlet using <router-outlet>
? RouterLink using [routerLink]
o Putting all together
o Implementing Child Routes 
o Introduction to Route Guards in Angular 
o CanActivate and CanActivateChild Guards in Angular 
o CanDeactivate Guard in Angular 
o Prefetching Data for a Component using Resolve

HTTP, Observables
o Dependency Injection 
o Hierarchical Dependency Injection 
o Introduction to Services in Angular 
o GET data from a Rest API using HttpClient 
o CRUD Operations using HttpClient, HttpParams and HttpHeaders 
o Observables and Operators in Observables - Map, Retry, Catch 
o Custom HTTP Headers 

Data Architecture in Angular

Introduction to Redux with TypeScript
o Redux
o Storing our state
o Setting up Redux

Intermediate Redux in Angular

Advance Component
o Styling
o Lifecycle Hooks
o Advance Templates
o Change Detection

o End to end testing
o Unit testing
o Testing Services and component