Angular.js Basics: Routes Part III: Creating a Default Route

Learn how to create a default route in your Angular single-page app.

In Part II of this series: “Angular.js Basics: Routes Part II: Partials“, we learned how to leverage partials in order to decouple our HTML from the associated controllers. This not only proved to be fairly simple, but it also helps to keep our JavaScript code easier to manage and allows us to create HTML templates that can support a higher degree of complexity.

But in the previous example, when our page loaded, the element with the ngView directive was empty by default. So, the user was required to click a link in order for us to display any content provided by a partial.

In this article, we will learn about a new method of the $routeProvider object that allows us to tell Angular which partial to inject into the DOM when the base page loads.

Two things to note: 1) This article is specific to Angular 1.0.8. 2) The example code that follows leverages code from Part II of this series: “Angular.js Basics: Routes Part II: Partials“. For the sake of brevity, I won’t review much of what we learned in the previous article in great detail. If you are completely new to the idea of Angular Routes, I highly recommend you read Parts I and II of this series, and then return here.

You can download a working version of this code here: https://github.com/kevinchisholm/angular-1.0.8-default-route

The JavaScript file with the code samples you see below can be found in the file: www/js/myApp.js

Configuring your routes

Example # 1

configFunction = function ($routeProvider) {
$routeProvider
    .when('/hello', {
    //code omitted for brevity
    })
    .when('/goodbye', {
      //code omitted for brevity
    })
    .otherwise({
      templateUrl: 'message.html',
      controller: function ($scope) {
            $scope.message = 'Welcome!!';
        }
    });
};

configFunction = function ($routeProvider) {

$routeProvider

.when('/hello', {

//code omitted for brevity

})

.when('/goodbye', {

//code omitted for brevity

})

.otherwise({

templateUrl: 'message.html',

controller: function ($scope) {

$scope.message = 'Welcome!!';

}

});

};

In Example # 1, we re-visit the function expression: configFunction. You may recognize the two calls to $routeProvider.when(). These let angular know how we want it to handle requests to the routes “/hello” and “/goodbye”. In both cases, I’ve omitted the properties of the object that makes up the second argument to that method call, just to keep the example code to a minimum (these details were covered in Part I and Part II of this series).

The otherwise method

What follows those two calls is the .otherwise() method of the $routeProvider object. This method tells Angular what to do if the current request does not match any of the ones specified by the one or more calls we have made to the $routeProvider.when() method.

This is quite a useful feature. It allows us to continue to leverage an Angular partial that will be injected into the DOM by default. A typical scenario for this would be some kind of “home” page. Since the examples provided in this series are focused around the routes “/hello” and “/goodbye”, I decided that when neither route has been requested, I’d like to show the message “Hello!”. I’ve leveraged the same partial file: “message.html”, but the inline anonymous function that is assigned to the “controller” property sets the value of $scope.message” to “Welcome!”. The end result is that when you load the base page (i.e. part-3.html), the default message is “Welcome!”.

Example # 2

<nav>
  <ul>
    <li><a href="#/">Home</a></li>
    <li><a href="#hello">Hello</a></li>
    <li><a href="#goodbye">Goodbye</a></li>
    <li><a href="#badroute">Bad Route</a></li>
  </ul>
</nav>

<nav>

<ul>

<li><a href="#hello">Hello</a></li>

<li><a href="#goodbye">Goodbye</a></li>

<li><a href="#badroute">Bad Route</a></li>

</ul>

</nav>

In Example # 2, we have added two hyperlinks to our navigation component: “Home” and “Bad Route”. The “Home” link simply requests an unspecified route: “#/”, which displays the default content “Welcome!”. We have specified this in the controller that is a property of the object passed to the $routeProvider.otherwise() method.

There is also a link named “Bad Route”, which requests the route: “/badroute”. Since we have not told Angular what to do when this route is requested, the details provided in our call to the $routeProvider.otherwise() method tells Angular to also display the default content: “Hello!”. But a subtle problem we have is the hash. In this case, the URL in the address bar will show: “#/badroute”, even though Angular does as we ask, and displays the default content. The problem here is that we are giving the user an opportunity to deep-link this URL, even though it is an un handled route. We need to fix this.

the redirect-to property

Example # 3

.otherwise({
  redirectTo: '/',
  templateUrl: 'message.html',
  controller: function ($scope) {
    $scope.message = 'Welcome!!';
  }
});

.otherwise({

redirectTo: '/',

templateUrl: 'message.html',

controller: function ($scope) {

$scope.message = 'Welcome!!';

}

});

In Example # 3, we have added a new property to the object that is passed to the $routeProvider.otherwise() method: “redirectTo”. This tells Angular that when a route that we have not specified is requested, then in addition to using the specified partial and controller, it should re-direct the requested route to the “root” of our application. We could also specify another valid route, for example “/login”, etc. In this case, we simply want the address bar to show the root of the app. This way, when the user requests a route that is un handled, that request fails gracefully.

Example # 4

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <title>Angular.js Basics: Routes Part II | blog.kevinchisholm.com</title>
</head>
<body ng-app="mainRouter">

  <header>
    <img src="http://sub1.kevinchisholm.com/blog/images/angularjs-logo-small.png" class="logo">
    <hgroup>
      <h1>Angular.js Basics:<span>Routes <i>Part II</i><span></h1>
      <h2>Working Example</h2>
      <h3><a href="http://blog.kevinchisholm.com" target="_blank">blog.kevinchisholm.com</a></h3>
    </hgroup>
  </header>

  <div id="main">
    <!-- hyperlinks for navigation -->
    <div class="box floatLeft widthHalf left">
      <p class="label">Click one of the links below:</p>
      <nav>
        <ul>
          <li><a href="#/">Home</a></li>
          <li><a href="#hello">Hello</a></li>
          <li><a href="#goodbye">Goodbye</a></li>
          <li><a href="#badroute">Bad Route</a></li>
        </ul>
      </nav>
    </div>

    <!-- this is the element in which
    the templates will be injected -->
    <div ng-view></div>
  </div>

  <!-- load angular.js -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

  <script>
    //create the router module
    var myRouter = angular.module('mainRouter', []),

        //the function expression that will 
        //configure our router module
        configFunction = function ($routeProvider) {
        $routeProvider

            //when the user clicks <a href="#hello">Hello</a>
            .when('/hello', {
                templateUrl: 'message.html',
                controller: function ($scope) {
                    $scope.message = 'Hello!';
                }
            })

            //when the user clicks <a href="#goodbye">Goodbye</a>
            .when('/goodbye', {
                templateUrl: 'message.html',
                controller: function ($scope) {
                    $scope.message = 'GoodBye!';
                }
            })

            .otherwise({
              redirectTo: '/',
              templateUrl: 'message.html',
              controller: function ($scope) {
                    $scope.message = 'Welcome!!';
                }
            });
        };

    //call the config method of our router module
    myRouter.config(['$routeProvider', configFunction]);
  </script>
</body>

<!DOCTYPE html>

<html>

<head>

<title>Angular.js Basics: Routes Part II | blog.kevinchisholm.com</title>

</head>

<h1>Angular.js Basics:<span>Routes <i>Part II</i><span></h1>

<h2>Working Example</h2>

<h3><a href="http://blog.kevinchisholm.com" target="_blank">blog.kevinchisholm.com</a></h3>

</hgroup>

</header>

<p class="label">Click one of the links below:</p>

<nav>

<ul>

<li><a href="#hello">Hello</a></li>

<li><a href="#goodbye">Goodbye</a></li>

<li><a href="#badroute">Bad Route</a></li>

</ul>

</nav>

</div>

<!-- this is the element in which

the templates will be injected -->

</div>

//create the router module

var myRouter = angular.module('mainRouter', []),

//the function expression that will

//configure our router module

configFunction = function ($routeProvider) {

$routeProvider

//when the user clicks <a href="#hello">Hello</a>

.when('/hello', {

templateUrl: 'message.html',

controller: function ($scope) {

$scope.message = 'Hello!';

}

})

//when the user clicks <a href="#goodbye">Goodbye</a>

.when('/goodbye', {

templateUrl: 'message.html',

controller: function ($scope) {

$scope.message = 'GoodBye!';

}

})

.otherwise({

redirectTo: '/',

templateUrl: 'message.html',

controller: function ($scope) {

$scope.message = 'Welcome!!';

}

});

};

//call the config method of our router module

myRouter.config(['$routeProvider', configFunction]);

</script>

</body>

In Example # 4, we have the full code for our working example.

View and test the full working example code

HERE IS THE LINK FOR THE FULL WORKIG EXAMPLE: http://examples.kevinchisholm.com/javascript/angular/routes/part-3.html

How to Demo: In the blue box, you’ll notice two hyperlinks: “Hello” and “Goodbye”. Click either one of those links. When you click either link, you’ll notice that the appropriate HTML is injected into the DOM on the right side of the page. Note as well that in your browser’s address bar, “#hello” and “#goodbye” are appended to the URL. This is Angular’s way of providing support for deep-linking. The web page you are on never refreshes, but the hash portion of the URL changes.

Differences in the code

The main difference between this example and the same one from Part # 2 of our series is our use of a default route. When the page initially loads, the message “Welcome!” is displayed. The reason why this happens is: we have specified that message in our call to the $routeProvider.otherwise() method. Also, if you click the link: “Bad Route”, the default route is displayed as well. From Angular’s perspective, it is the exact same scenario: the user has requested a route that has not been specified, so our default route is used.

Summary

In this article, we learned how to create a default Angular.js route. While covering this topic, we focused on the the $routeProvider.otherwise method, which tells Angular how to handle a request for a route that has not been specified by a call to the $routeProvider.when() method. We also discussed the importance of the “redirectTo” property, which tells Angular to redirect to a route that has been properly configured, which makes for a better user experience.

here are some Helpful Links for the $routeProvider.otherwise method

http://docs.angularjs.org/api/ngRoute.$routeProvider

https://www.bitcast.io/b/getting-started-with-angularjs?v=angularjs-routeprovider-api

http://vxtindia.com/blog/8-tips-for-angular-js-beginners/