Angular — Just another introduction to ngNewRouter

Gerard Sans
Feb 19, 2015 · 3 min read

Introduction to the new router in AngularJS 1.5+/2.0

Image for post
Image for post

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


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>


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

{ 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 incomponents/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

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


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

AngularZone Community

Get in touch to submit new articles or ideas

Gerard Sans

Written by

Developer Advocate @AWSCloud | Just be AWSome | MC Speaker Trainer Community Leader | Views are my own | @fullstackcon @ReactiveConf @ngcruise @UphillConf UK ☂

AngularZone Community

Get in touch to submit new articles or ideas

Gerard Sans

Written by

Developer Advocate @AWSCloud | Just be AWSome | MC Speaker Trainer Community Leader | Views are my own | @fullstackcon @ReactiveConf @ngcruise @UphillConf UK ☂

AngularZone Community

Get in touch to submit new articles or ideas

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store