AngularJS 2 with TypeScript - 2 Hours each session

Introduction to AngularJs 2

Session 1
ES6
Session 2 & 3
TypeScript I
Session 4
TypeScript II
Session 5

Evolution of the web,Introduction to front end frameworks,What is Single Page Application,How SPA
works,Traditional website,Misconception about SPA,Whats new in SPA,Benefits of SPA,History of Angular,Problems
with angular 1.x,Introduction to Angular 2,Transpilers,Tech Supporting ng2,Dev Environment Setup,Hello World
Example - ng2
What is ES6?,Does All browser supports ES6?,Some basic features of ES6,Scoping,Destructuring,Promises,Arrow
functions,Drawback of Arrow Function,Sets and Maps,WeakMap,Rest parameters,Spread,Iterators,Generators,
Classes,Inheritance,Get & Set,Module,
Typescript features,Typescript: Data types,Functions,Function: Inferring the types,Typescript: Classes,Typescript:
Inheritance,Typescript: Interface,Public ; private; and protected modifiers,Generics,Generic Types,Generic
Classes,Generic Constraints,
Typescript: Decorators,Enable Experimental Support for Decorators,Class Decorator,Property Decorator,Method
Decorator,Parameter Decorator,TypeScript Modules,Implicit Internal Modules,Named Internal
Modules,Exports,External Modules,Namespace,Mixins,

Seed Project,
BootStrapping,Project
Structure,Angular
Module,Component Basics
Session 6

Session 7

Session 8
Session 9
Session 10

Session 11

Angular 2 Project,Angular 2 Architecture,Angular 2 beta,Gulp,Webpack,webpack dev

server,Sass,Jasmine,Karma,Angular 2 beta,Running Angular 2 beta application,Understanding
Tsconfig.json,Typings,Bootstrapping Angular App,Project Structure,Angular Module,Angular Library Module,Basics
of component,Component Decorator,Component Decorator details,Advantage and limitations of component,
Interpolation,Template Expressions,Template Statements,Binding Syntax,Property Binding,Property binding or
AngularJs Template Syntax,
interpolation?,Attribute Bindings,Class binding,Style binding,Event Binding,Local Template Variables,Built-in
InBuilt Directives
Directives - NgClass ; NgStyle;NgIf;NgFor;ngNonBindable;NgSwitch,* and <template>,
Data Bindings, Forms in Angular 2 Difference in Event & Property Binding,Two way data binding with ngModel,User Input,Form Controls in Angular
2,Controls and Control Groups,Form & NgForm,input & NgControl,Error & Validation Handling,CSS for
Forms,Custom validation
Dependency Injection in Angular Dependency Injection, Why dependency injection?,Dependency Injection: Usage,Configuring the injector,Injectable
2
Decorators,Dependency Injection Tokens
Component in Angular 2,Metadata for Classes,Styles,Encapsulation,Templates,Component
Components in Detail
Availability,Annotations,Event Delegation,Delegation: EventEmitter,ViewChildren & Content Children,
Directives,Difference between Directives and Component,Directive Metadata,Types of directive,Point to
Directives in Detail
remember,Host,HostBinding,HostListener,Web
Component,ExportAs,LifeCycle,ngOnInit,ngOnChanges,ngDoCheck,ngOnDestroy,Input,Output,
Pipes,Chaining pipes,Parameters in Pipe,Custom Pipe,Async Pipes,Built In Pipes Pipes

Session 12

date;Slice;Decimal;Percent;Currency;Json;Lowercase;Uppercase,About Pipe in detail

Routing, Navigation

Session 13
Http Client
Session 14
Services, Providers,LifeCycle
hooks

Router,Behaviour of Browser,Introduction to Router,The

Basics,Configuration,RouteConfig,RouterOutlet,RouterLink,ROUTER_PROVIDERS,Navigation,Life Cycle,Two critical
points,Child Routers,Query Parameters,URL Style/HTML5 Mode,Linker Route Parameters,
Http Client,HTTP Get,Post Methods,Promises,Observables vs Promises,Transforming Data,JSONP,Custom
Headers,Query String Parameters,Intro to RxJS,
Intro to Services in Angular 2,Service,Inject the HeroService,Providers Overview,Simple Service Example, Lifecycle
Hooks Component Lifecycle, Methods - OnInit, OnDestroy, DoCheck, OnChanges, AfterContentInit,
AfterContentChecked, AfterViewInit

Session 15
Events in angular 2, data & state Events in Angular Event Emitter Class, Emit Method, Next Method, Subscribe Method
Data & State Management - Observables, State Management with Observables, RxJS in Detail, ngRedux
management
Session 16
Migrating Angular 1 to 2,
Performance Considerations,
change detection

Migrating Angular 1 to 2 Code Changes, Upgrade Adapter, Hybrid App Angular 1 & 2, Upgrade , Controllers
Performance Considerations, Change detection - Performance Considerations, Change Detection system, Change
Detection Strategies, Bypassing Components

Session 17
Testing & deployment

Testing Angular 2 Apps Unit Testing, Technologies - Jasmine, Mock Dependencies, Testing, Components, End to End
Tests, Performance Tests
Deployment

ReactJS I

Introduction, Data driven web application in Ideal shape , Data driven web application in reality , What is React? ,
What is Flux? , What is Relay? , What is Relay? , Why ES2015 (ES6),Introduction of Target project, Book Store
Application

Session 18

Session 19
ReactJS II
Session 20
Session 21-24

Setup React,Setup Webpack and Babel,Setup Project (A node project),Building project,Test the project,HMR (Hot
Module Replacement),Linting our project,Putting style to our project,Adding Twitter Bootstrap & test it
Project