Angular — Just another introduction to ngNewRouter

Introduction to the new router in AngularJS 1.5+/2.0

thedotisblack

Update 31/5/15: Angular 1.4 was released this week and the new router was not part of it. Now it’s planned to be in Angular 1.5.

I am going to skip the theory blurb and show you two implementations (ngRoute vs ngNewRouter) so you can figure it out the differences by looking at the code. Hope I don’t lose you. Use the links below to see it running.

Demo code for ngRoute | Demo code for ngNewRouter

Follow me on Twitter for latest updates @gerardsans.

Let’s dive right into it to get a better feel of the changes.

Warning: be aware changes are expected prior official 1.5 release.

Setting up routes

Let’s imagine we have a basic website with two sections: home and users. Using ngRoute we would do:

First I included ngRoute to the app and during the config phase I setup the routes by using $routeProvider. As this is happening during AngularJS configuration phase you need to know the routes ahead of time.

Let’s see how you would do the same with ngNewRouter.

Here you can see how I moved the router logic into the AppController component; to setup the routes I used $router instead, this time we are out of the configuration phase, so its being applied dynamically. See also how the resulting syntax is much cleaner than before. We are using redirectTo to redirect to the /home route as we did before.

This magic can be done by using some conventions so Angular can figure out the old controller, controllerAs and the templateUrl.

This is a list of alias written by Brian Ford. source

Placeholder

Before with ngRoute we were using ng-view on our index.html like this

So when the user navigated to /home, angular would instantiate the HomeController using the AsController as home and then it would render the components/home/home.html template inside the placeholder wherever you defined your ng-view.

With ngNewRouter you will use the ng-viewport directive instead.

Here we see AppController, where we defined our routes. The convention for ng-viewport is that it will be equal to ‘default’ when omitted. So the previous code would be equal to ng-viewport=”default”.

For more complex scenarios you can use multiple ng-viewport rendering different content like this

<div ng-viewport="master"></div>
<div ng-viewport="detail"></div>

Links

With ngRoute you can use links like these ones below

<a href=”#/home”>Home</a>
<a href=”#/user/5”>Batman</a>

In ngNewRouter you can still use the previous syntax or use the new ng-link directive.

<a ng-link="home">Home</a>
<a ng-link="users({id:5})">Batman</a>

For the last bit of the previous example the setup for the route would be

$router.config([
  { path: '/users/:id', component: 'users' },
  ...
]);

New Route Components

As we have seen before, with ngRoute all routes were defined using $routeProvider during the configuration phase so when a new route was triggered angular could use the registered controller, controllerAs and templateUrl.

Now with ngNewRouter this changes slightly so instead we are linking components to routes. By doing this we get the same features as before but now dynamically. The default conventions for a home component would be HomeController, using controllerAs home, and the templateUrl being placed in ‘components/home/home.html’.

If you want to use a different setup you can do so by using the $componentLoaderProvider. For example, to change the template convention to be like /home.tpl.html you would do

angular
.module('myapp')
.config(function ($componentLoaderProvider) {
 $componentLoaderProvider.setTemplateMapping(function (name) {
   // name is component name
   return name + ‘.tpl.html’;
 });
})

That’s all for the introduction. Hope you enjoyed it!

If you want to go deeper I recommend you the fantastic links below. I am leaving child routes for another post. Thanks for reading! Have any questions? Ping me on Twitter @gerardsans.

Resources

A 10 minute primer to the new Angular router, Preview of the New Angular Router (Official AngularJS blog), angular/router (GitHub)

Special mention

René Post, from Dutch AngularJS Meetup Group, kindly wrote a more extended example of the ngNewRouter shown in this post.

GitHub | Live | Twitter