In order to switch the view based upon user interaction, employ the Routing system in Angular. This passes information to the router as the URL string changes and then serves up a specific view within the router outlet. In Angular 4.2 and above, there is a built-in mechanism for animating route transitions. This is covered later on.
- [Narrator] In order to switch our view…based upon user interaction, we'll employ…the Routing System in Angular.…This will pass information to the Router…as the url string changes.…And then serve up a specific view within the Router Outlet.…Let's see how this works.…To start with, we'll go into our module, so open up…app.module.ts, and we're going to have to import…both RouterModule and Routes…from angular/router.…
We also need to go ahead, and import all of the router…components that we just created in the previous lesson.…So, I'm going to paste in a snippet here, which includes our…HomeComponent from routes/home.component, and the same…thing with Basic, Contained and AdvancedComponents.…The next thing we'll do is go ahead and paste in this rather…large snippet here, that goes through and creates a constant…called AnimationRoutes.…
Because eventually, we're going to be animating these Routes.…For now, though, they're just going to be static switching.…So, we can data type this as Routes,…and this is an array of objects…
- Installing the Angular CLI
- Creating a new project
- Verifying the animations package
- Configuring project routes
- Animating components
- Triggering animation between states
- Stepped and parallel animation
- Writing reusable animations
- Animating individual items with query and stagger
- Animating an existing Angular project
Skill Level Intermediate
1. Getting Ready to Animate
2. Enabling Angular Animations
3. Angular Animation Basics
4. Advanced Angular Animation
5. Animating an Existing Interface
6. Package for Distribution
Building the project1m 56s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.