Angular 2 with Typescript

What Will I Learn?

1. Understand what is SPA
2. Be able to work as front-end developer in SPA application (using Angular2)
3. Separate re-usable function into isolated component/ directive
4. Understanding which type of directive should be used in specified situation
5. Understanding which type of binding should be used in specified case
6. Use DI in Angular to build loose coupled and testable application
7. Call to backend API (RESTful webservice) for getting and posting data from/to
8. Organize a clear and clean structure for your app
9. Config nodejs to build and packages your application (Angular2 with Typescript)
10. Deploy your application into IIS, other webserver
11. Create complete Sing Page Applicatino (SPA using Angular2) yourself
12. Refactoring the code

Requirements

1. Basic knowledge about HTML
2. Basic knowledge about Js
3. Basic knowledge about OOPD

Description

Angular now becomes a nice framework for creating Single Page Application (SPA).
Understand and full-control are necessary knowledge that all developers need to know for implementing your application using Angular2 rather than just follow the sample code on the internet. This sample code was not for building the app.
My mind-set in the video is clear “let technologies serve your business purpose”. this mind-set requires new approach for transferring knowledge to you. Let discover how  is it?
In this course, we will go through these parts in order:

1. Overview about Single Page Application (SPA) and Angular2
2. Navigating between pages in Angular (called routing in Angular2)
3. Declare and register a page in Angular2 (called component in Angular2)
4. Show data on UI and receive input from user (called data binding in Angular2)
5. Divide the page into isolated and reusable component/ control (called directive in Angular2)
6. Manage life-cycle of page/ component/  control (called life-cycle event in Angular2)
7. Write loose-coupled and testable application (called DI & Injection in Angular2)
8. Refactoring the code
9. Organize project structure of application in a clean and clear. This will make the code easier for maintenance, extend/ develop new feature with less potential issue/ cost.

Who is the target audience?

For those who want to build or learn how to build Single Page Application using Angular2 with typescript

Agenda

Angular2 overview

Introduction
What is Angular?
Architechture of Angular application
Set up environment
Your first “Hello world” sample
Build and deploy your app

Routing

Overview about routing
Add route config
Add component mapped to route config
Config default route
Fix route problem on IIS
Routing and <base /> tag
Control the content region using RouterOutlet
Navigate between pages with RouteLink
Navigation between pages programatically
Passing parameters between pages
Multiple parameters and optional parameter issue

Component/ Page

Overview about component/ page
Map URI to your component/ page
Define class/ logic handler for component/ page
Specify the template for component/ page
Display data in template
Call external service from component
Using style-sheet in component

Data binding

Overview about data binding
Display data on UI (one-way binding)
Receive input data from user (two-way binding)
Register event callback (event binding)

Directive

Overview about directive
Look at first sample of “hightlightBaseOnFirstName” directive
Overview about Attribute Directive
Access to DOM which our directive was attached to
Passing parameter into Directive
Using alias for input parameter
Publish event to outside
Two-way binding property

Life-cycle hook

ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy

Refactoring