Create different routes that we can navigate to.
- [Instructor] In this lesson, we will set up the Angular router. Let's head over to our main app module, and import the router module. So let's open up our app module. And below the first line, since I like to keep some of the Angular components together, I will import RouterModule from angular/router. Next we can add the router module to the imports list.
But we also need to pass along our routes with it. So first let's create an empty list for now called routes. And now let's add our router module to the imports list, and pass along our routes. And we'll do that with the forRoot call which will take in our route's parameter. If we try the app now, you might get an error about a base href.
The current version of the Quickstart template has that already added for us inside our index.html which lets Angular know what the base URL is. As we can see on line five, we have base href with a slash provided for the value. Without what we have on line five, we would be getting an error in Angular. And older versions of the Quickstart did not include this line. So if by any chance you're missing this line, make sure you add that. Next, we'll need a home component so that we can register it with the router as our default route.
We are currently using our app component for this purpose, but the app component will now need to render the current route's view. This will make more sense once I make the changes. Let's begin by creating a home component, and let's start by copying over our app component content. And let's make the appropriate changes, so I'll change the selector to home. And I'll also get rid of the nav bar, since we'll want the nav in all of our views, no matter what route we're in.
Then back in our app component, then we can get rid of the two components, new message and messages. And we can also remove them from the imports. The next thing we need to do is tell the router where to render the view of the current route. And we'll need to add a special Angular element that will do that. So below our nav element, let's add router-outlet.
And eventually, when we have buttons in our nav bar that will allow us to navigate to different views in our app, they will all render within this element, router-outlet. Now that our app component and home components are ready, let's add our home component as the default route. We'll go back to our routes list inside app module, and we'll add that route. We'll begin by adding an object to our routes on line 12. This object will have a path property with an empty string to show it will be our default route.
And with a component property that has home component as the value to show that we would like to load that component by default. And we'll also need to import a home component. And finally, let's change the class name in our home component from AppComponent to HomeComponent.
And the last thing we need to do is add our home component to our app module. Let's check our app to make sure there's no errors. We can see that our app now looks like it did before, but now routes is enabled. Since routes is enabled, let's take a look at how we can create a new route that we can navigate with Angular and our browser, next.
- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Q: This course was updated on 10/17/2017. What changed?
A: We updated five videos to reflect changes to the setup and data retrieval and display processes in Angular 2. For example, instead of using a Git Angular template, the updated course uses the Angular CLI to generate a starting template, for a smooth runtime experience.