Defining the routes

The routes is a list of route entries that specifies what routes exist in the application and what components should respond to a specific route. It can look like this:

let routes = [{
path: 'products',
component: ProductsComponent
}, {
path: '**',
component: PageNotFound
}]

Every item in the route list is an object with a number of properties. The two most important properties are path and component. The path property is the routing path, note that you should specify the path value without a leading /. So, setting it to products, as with the preceding code, means that we define what would happen if the user navigates to /products. The component property points to the component that should respond to this route. The pointed-out components, template and data is what the user will see when navigating to the route. 

The first specified route defines the path /products, and the last route item specifies **, which means it matches any path. Order matters. Had we defined the route item ** first, then products would never have been hit. The reason ** was defined last was that we wanted a route that would take care of the case when a user enters an unknown route. Rather than showing the user a blank page, we can now show them a nice page defined by the PageNotFound components template.

There are a ton more properties you can define on a route item, and also more complex routes you can set up. This will suffice for now, so we gain a basic understanding of routing setup.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset