2. Table of content
● Why need router?
● About @NgModule
● Router Basic
● Lazy loading
● Preload
● Guards
● Auxiliary router (named router)
3. Why need router?
● Separate different areas of the app
● Maintain the state in the app
● Protect areas of the app based on certain rules
4. 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.
6. 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
7. 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
9. 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
30. Auxiliary Router
● Multiple outlets, but only one url
● Divide browser into multi small windows, each with its own separate url
31. 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
32. 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
33. 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!
34. UI Router -- Named views
Similar to UI Router Named views:
35. UI Router -- Named views
Similar to UI Router Named views:
36. 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)
