New power of Angular2 Router
42
New power of Angular2 Router Zhentian Wan
-
Upload
zhentian-wan -
Category
Documents
-
view
87 -
download
5
Transcript of 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?
