Welcome to this review of the Pluralsight course
Building Components with Angular 1.5 by Scott Allen.
Scott has over 25 years of commercial software development experience across a wide range of technologies. He has successfully delivered software products for embedded, Windows, and web platforms.
To learn more about him, see my career strategies interview with him and other successful developers on Outlier Developer.
Angular JS Routing with Components
There are two routers in Angular JS: the original one and the new component based router.
In this module Scott begins with the first one and then moves onto demonstrating use of the component based router.
We typically use the
ng-view directive when working with directives. Scott quickly explains the process.
Routing with the Original Router
Scott shows us we need to include a reference to angular-route.js and use the
ng-view element instead of our
In module.js we specify
ngRoute as a dependency. In here we load our components as templates.
Scott says the new router is much more sophisticated.
Introducing the Component Router
Scott explains that this router is compatible with both Angular 2 and Angular 1.5.
It supports lifecycle hooks, nested routing and link generation.
Routing with the Component Router
We see Scott has added
"angular-component-router" as a dependency in his bower.json.
In module.js, the
"ngRoute" dependency is replaced by
module.config code can be removed and in index.html we replace the
ng-view tag with a
module.value which registers a service.
Three component templates are referenced in the index.html, for example movie-app.component.html, where we add a
ng-outlet directive to specify the location of our component within the template.
Inside movie-app.component.js we use
$route.config to identify the routing and navigation rules.
Scott shows us that we replace the
href attributes with
ng-link and pass the routing parameters in as an array.
Using Route Parameters
We create a new feature in our movie list app: the ability to click a link and see more information about the movie.
We see the use of the Bootstrap zoom in glyphicon to add a magnifiying glass button, the
ng-link directive is used on this button.
The code for this new section is added into a new file movie-details.component.js and the template is movie-details.component.html.
Component Router Lifecycle Hooks
The component router comes with more lifecycle hooks to learn:
In this lesson Scott shows us how to use a couple of these in our project:
We’ve seen how the user can navigate from component to component, but how do we programatically route to a new component?
Scott shows us how. We see a link replaced with a button without any
We add a special
"$router" binding into our movieList component.
The new component router offers several advantages over the original angular router.