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.

Routing Overview

We typically use the ng-view directive when working with directives. Scott quickly explains the process.

For more detail on working with the original router either see Scott’s Get Started – Angular JS Routing module or Jim Cooper’s Fundamentals – Routing module.

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 movie-list element.

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 "ngComponentRouter"

The module.config code can be removed and in index.html we replace the ng-view tag with a movie-app element.

We add 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.

Creating Links

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:

• $canActivate
• $routerOnActivate
• $routerCanDeactivate
• $routerOnDeactivate
• $routerCanReuse

In this lesson Scott shows us how to use a couple of these in our project: $canActivate and $routerOnActivate.

Navigating Programatically

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 ng-click handler.

We add a special "$router" binding into our movieList component.

Summary

The new component router offers several advantages over the original angular router.