Introduction to new component router in AngularJS

June 29, 2015
by Rahil Shaikh

The feature of utmost importance for any SPA frameworks like AngularJS is the routing mechanism and history management. AngularJS has supported routing since the beginning with the ngRoute module.

ngRoute has a lot of limitations when it comes to building complex single page applications. No support for nested and parallel views are a few of them. However these limitations are covered by a popular third party library, the UI-Router which turns your application into a state machine by allowing you to configure states. The new Angular 2.0’s router also aims to solve these limitations and at the same time divide your application into components instead of states.

The new router is built for Angular 2.0 but will also support Angular 1.4. Now as I write this article the newRouter for angular Js is still under development and the APIs are subject to change.

The new router is not yet given a name but I’ve heard it called as the component router in some discussions.

The component router aims to provide routing at component level, so that each separate component will have its own route and URL. Component Router will help you break down your application into smaller mini applications. This basically means that you can build smaller working components and then combine them into a giant single page application.
 

DOWNLOAD

Installation

This guide uses npm to setup the project, however I’ll also provide an alternate method without using node.

Navigate to your working directory in your command line tool and run the below.

npm install angular-new-router

This will download the necessary files required for the component router.

Alternatively you can download the file from this link.

Now lets go ahead and setup our index.html.

index.html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My app</title>
    </head>
    <body ng-app="myApp" ng-controller="AppController as app">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
        <script src="node_modules/angular-new-router/dist/router.es5.js"></script>
        <script src="components/home/home.js"></script>
        <script src="app.js"></script>
    </body>
</html>

As you can see above in index.html we have included Angular 1.4 and the js library for the newRouter.

You can get Angular 1.4 from the below link.

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js

We have also included app.js, this would be our js file where we will define our main app and controller.

Also on the body tag we have defined our Angular Module and controller.
Next we will place the ng-viewport directive where we would like our route to load html content.
ng-viewport is a directive provided by the component router similar to what we had as ng-view in ngRoute

Add the below line inside the body tag.
<div ng-viewport></div>

Time to create our controller and add routes.

app.js
angular.module('myApp', ['ngNewRouter'])
    .controller('AppController', ['$router', function AppController ($router) {
        $router.config([
             {path: '/', component: 'home' }
        ])
    }]);

Here we have injected the module ngNewRouter and in our controller if you see, we are configuring our router. Above we have defined a component and the url but we haven’t yet created any component as home yet.
 
If you observe above, with the component router we configure our routes within the controller itself.
 

Components

As I’ve talked earlier in this post, the component router aims to modularise your app into small components and provide routing at component level.

The default behaviour of component router is to serve from ./components directory. A component called myWidget loads the template from ./components/my-widget/my-widget.html and uses a controller named MyWidgetController.

We can change these default setting by using $componentLoaderProvider.

So as per the default settings the template and js will reside inside ./components/home/.

./components/home/home.js
angular.module('myApp.home', [])
  .controller('HomeController', [function () {
    this.name = 'Friend';
  }]);
./components/home/home.html
<h1>Hello {{home.name}}!</h1>

Above in home.js we have created a new module as myApp.home. In the controller we are setting this.name as “Friend”.
The component router uses controller-as syntax, so in our controller we have to define variables and functions on the this keyword instead of $scope and in the template we refer to it using the alias. In component router, the alias is the component name by default so for our home component alias would be as home.

Next you need to include the home.js file in your index.html.

<script src=”components/home/home.js”></script>

Also add 'myApp.home' as dependncy to your main app in app.js. See below.
 
angular.module('myApp', ['ngNewRouter','myApp.home'])
 

Now when you navigate to your project directory in your browser you should see “Hello Friend!” in bold text.
Component Router
 

Linking to Views

The component router provides ng-link directive to link to different views similar to ng-href in ngRoute. Syntax as below.
 
<a ng-link="componentName({optional params})">link to component</a>

So in our case if we want to link to our home view, we will write as <a ng-link="home()">Home</a>
 

Parallel views

The component router allows you to have multiple ng-viewport directive on same page therby supporting parallel views.

Lets quickly create a new component to display along side home.

./components/details/details.js
angular.module('myApp.details', [])
  .controller('DetailsController', [function () {
    this.text = 'This is the details view.';
  }]);
./components/details/details.html
<h4>{{details.text}}</h4>

Now that we have a new component ready, add the script tag to link with details.js and also myApp.details as a dependency to our main app.

To hook the new details component parallely with home component we need to tweak our $router config a bit in app.js

Replace the $router.config part of code that we had earlier with below.

app.js
$router.config([
    {
     path: '/', component: {
        home : 'home',
        details : 'details'
     }
    }
])

And in our main markup, that is index.html we need to specify two ng-viewports along with the name. Change the

line in index.html to the below two lines.
<div ng-viewport="home"><div>
<div ng-viewport="details"></div>

Refresh the browser and you will see both views on same page.
 
Component Router

 

Conclusion

The Component Router will overcome the limitations in ngRoute and will enable us to build complex single page applications. It also aims to modularize your app into smaller components and provide routing at component level. The work on Component Router is still in progress but it is worth having a look at and experimenting, it will also make your transition to Angular 2.0 easier.

 

References

About

Engineer. Blogger. Thinker. Loves programming and working with emerging tech. We can also talk on Football, Gaming, World Politics, Monetary Systems.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

1 comment

  1. Oni
    |

    It’s like vue.js , compponent system and routing

Leave a Comment