April 12, 2016

Routing in angularjs using angular-route

Routing in angularjs using angular-route

Single page apps are becoming increasingly popular. Sites that mimic the single page app behavior are able to provide the feel of a phone/tablet application. Angular helps to create applications like this easily.

The magic of Routing is taken care by a service provider that Angular provides out of the box called $routeProvider This service makes it easy to wire together controllers, view templates, and the current URL location in the browser. Using this feature we can implement deep linking. You can notice when the page route changes the page does not get refreshed. You can see this type of routing in google, gmail etc...

Below is the syntax to add routing and views information to an angular application. We defined an angular app "app" using angular.module method. Once we have our app, we can use config() method to configure $routeProvider. $routeProvider provides method .when() and .otherwise() which we can use to define the routing for our app.


var app = angular.module('app', ['ngRoute']);

app.config(function($routeProvider) {
      .when('/', {
         templateUrl: "partials/home.html",
         controller: "HomeCtrl"
      .when('/page1', {
         templateUrl: "partials/page1.html",
         controller: "Page1Ctrl"
      .when('/page2', {
         templateUrl: "partials/page2.html",
         controller: "Page2Ctrl"
         redirectTo: "/"

In above code we defined three urls /, /page1 and /page2 and mapped them with views partials/home.html, partials/page1.html and partials/page2.html respectively. When we open http://localhost/#/page1 url in browser, Angular automatically matches it with the route we configured and load page1.html template. It then invokes Page1Ctrl where we can add logic for our view.

Notice how we used otherwise() method to define a default route. In case routeProvider does not match with any url, it redirects to default route.

Below index.html file is the main html file. It includes AngularJS library and define structure for our app. We have three links: Home, Page 1 and Page 2. Each link loads template inside ng-view directive. This becomes the placeholder for views. Each view referred by the route is loaded in this section of document. I am using bootstrap here.


<html ng-app="app">
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
   <div class="container">
      <nav class="navbar navbar-inverse">
         <div class="container-fluid">
            <div class="navbar-header">
               <ul class="nav navbar-nav">
                  <li><a href="#/">Home</a></li>
                  <li><a href="#/page1">Page 1</a></li>
                  <li><a href="#/page2">Page 2</a></li>

      <div ng-view></div>

   <script src="libs/angular/angular.min.js"></script>
   <script src="libs/angular-route/angular-route.min.js"></script>
   <script src="app.js"></script>
   <script src="controller/controller.js"></script>

I have added an external angular-route.js. This is not necessary for the older versions of angular say 1.0.8. In newer version say 1.5.3 which i am using here we require the external angular-route.js or we get error in console Uncaught Error: [$injector:modulerr]

Now the main html is over, lets write the controller page which i have written separately.


var app = angular.module('app');
app.controller('HomeCtrl', function($scope) {
   $scope.title = "Home Page";

app.controller('Page1Ctrl', function($scope) {
   $scope.title = "Page 1";

app.controller('Page2Ctrl', function($scope) {
   $scope.title = "Page 2";

The controllers for each page home.html, page1.html and page2.html is written.

I kept the contents minimal as i gave importance to routing alone.


<div class="jumbotron">

No comments:

Post a Comment

Popular Posts