New power of Angular2 Router

New power of Angular2 RouterZhentian Wan

Table of content

● Why need router?● About @NgModule● Router Basic● Lazy loading● Preload● Guards● Auxiliary router (named router)

Why need router?

● Separate different areas of the app● Maintain the state in the app● Protect areas of the app based on certain rules

Why need router?

The URL bar provides a huge advantage for web applications over native applications. It allows you to reference states, bookmark them, and share them with your friends. In a well-behaved web application, any application state transition results in a URL change, and any URL change results in a state transition. In other words, a URL is a serialized router state.

Router in Angular2

@angular/router V3.2.4

About @NgModule

NgModule is a way to organize your dependencies for the compiler and dependency injection (DI).

Three main benefits:

● Ahead of Time compiler (AoT compiler)● DI● Lazy load module with Router

About @NgModule

NgModule is a way to organize your dependencies for the compiler and dependency injection (DI).

Three main benefits:

● Ahead of Time compiler (AoT compiler)● DI● Lazy load module with Router

About @NgModule -- Define a feature module

Router Basic

Three main components that use to configure routing:

● Routers describe the routes our application supports● RouterOutlet is where page content goes into● RouterLink directive is used to do navigation

Router Basic -- Define routes

Router Basic -- Register root router

Router Basic -- Navigate to link

Router Basic -- Rendering the page

<router-outlet></router-outlet>

Lazy Loading

Core angularjs doesn’t (will NOT) support lazy loading with router!

UI Router + ocLazyLoad

+ webpack

Lazy Loading

Core angularjs doesn’t (will NOT) support lazy loading with router!

UI Router + ocLazyLoad Easy to use, Easy to configure

+ webpack

Lazy loading

Change

component

to

loadChildren

From:

Lazy loading

Change

component

to

loadChildren

Change To:

Lazy loading DEMO

DEMO

Preload

Proload lazy loaded module, from @angular/router V3.1.0

● Improve user experience● Load in background after main thread finish loading

Preload

● Preload All Modules● Customize preload modules

PreloadAngularConnect16

Preload -- Preload all modules

Preload -- Customize preload modules

Preload -- Customize preload modules

Preload -- Customize preload modules

Preload DEMO

DEMO

Guards

UI Router:

● Resolve ○ Auth○ Data○ redirection

Angular2 Router:

● CanActive● CanLoad● CanDeactive● Resolver (not really belongs to

guards)

Guards DEMO

DEMO

Auxiliary Router

● Multiple outlets, but only one url

Auxiliary Router

● Multiple outlets, but only one url● Divide browser into multi small windows, each with its own separate url

Auxiliary Router

● Multiple outlets, but only one url● Divide browser into multi small windows, each with its own separate url● Provide separate routing configuration for each url

Auxiliary Router

● Multiple outlets, but only one url● Divide browser into multi small windows, each with its own separate url● Provide separate routing configuration for each url● Each window navigate separately

Auxiliary Router

● Multiple outlets, but only one url● Divide browser into multi small windows, each with its own separate url● Provide separate routing configuration for each url● Each window navigate separately

Lots similar to UI Router named views, but away more powerful!

UI Router -- Named views

Similar to UI Router Named views:

UI Router -- Named views

Similar to UI Router Named views:

Auxiliary Router

● Multiple outlets, but only one url● Divide browser into multi small windows,

each with its own separate url● Provide separate routing configuration for

each url● Each window navigate separately

localhost:4200/speakers/(list:speakersList//bio:none)

Auxiliary Router

Divide browser into multi small windows, each with its own separate url

Github

Auxiliary Router

Auxiliary router DEMO

DEMO

Resources:

DEMO: https://github.com/zhentian-wan/tamperejs-2016-dec-ng2router-demo

Articles: http://blog.angular-university.io/angular2-router/https://vsavkin.com/angular-2-router-d9e30599f9ea#.r2fpxy2cphttp://blog.thoughtram.io/angular/2016/06/14/routing-in-angular-2-revisited.html

Videos:https://egghead.io/courses/intro-to-angular-2-routerhttps://www.youtube.com/watch?v=QLns6s02O48

Book:https://leanpub.com/router

Questions?

Thanks!

Twitter: @ZhentiwEmail: answer881215@gmail.com