Complete Guide To Angularjs ngRoute For Beginners

angularjs routing used to be part of the core angularjs library before being split off into an optional module that needs to be included if it is being used. This was done because there were a lot of open source alternatives to routing that started being used heavily. With angularjs version 1.2, routing became an optional module for angularjs. To use angularjs’s routing module (or technically any other routing module that follows the angularjs routing paradigm), the steps are as follows:

  1. Include the optional module source code in the application’s HTML. Most of the time, it’s as simple as:

    <script type="text/javascript" src="/path/to/angular-route.min.js"></script>
  2. Include the module as a dependency of our main angularjs app module, like so:

    angular.module("myApp", ["ngRoute"])
  3. Mark which section of the page angularjs should change when the route changes. With the ngRoute module, this is done using the ng-view directive in the HTML.
  4. Define our routes in the config section using the $routeProvider service.

Let’s look at a very simple example that loads two different templates when the route changes:

<html><head><title>angularjs Routing</title><script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script><script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script></head><bodyng-app="routingApp"><h2>angularjs Routing Application</h2><ul><li><ahref="#/">Default Route</a></li><li><ahref="#/second">Second Route</a></li><li><ahref="#/asdasdasd">Nonexistent Route</a></li></ul><divng-view></div><script type="text/javascript">angular.module('routingApp',['ngRoute']).config(['$routeProvider',function($routeProvider){$routeProvider.when('/',{template:'<h5>This is the default route</h5>'}).when('/second',{template:'<h5>This is the second route</h5>'}).otherwise({redirectTo:'/'});}]);</script></body></html>

This example shows a very simple angularjs application that enables routing

The $routeProvider allows us to define our routes in one place using the when() function. The when function takes two arguments:

  • The first is a URL or a URL regex that specifies when this particular route is applicable.
  • The second is a configuration object that specifies what needs to happen when the particular route is encountered.

We keep the previous example simple by telling angularjs to load only a certain HTML template that we specify inline. Both of these are very simple, but could include
We also call an otherwise function on the $routeProvider that specifies what angularjs needs to do if the user tries to go to a URL that is not specified in the configuration. That is, if the user tries to go to /#/asdasdsa, it redirects the user to /, which loads the default route template. Without the otherwise, the user would see an empty page because angularjs does not know what template or HTML to load for that particular URL.

 

Routing Options

In the previous section, we saw how to define a very simple angularjs application that leverages routing. We simply loaded different templates for different routes, and nothing else. The angularjs route definition allows us to define more complex templates. The $routeProvider.when function takes a URL or URL regular expression as the first argument, and the route configuration object as the second. The syntax is as follows:

$routeProvider.when(url,{template:string,templateUrl:string,controller:string,functionorarray,controllerAs:string,resolve:object<key,function>});

The following are the options we can specify and define when specifying route definitions with the $routeProvider service:

url
This is the first argument passed to the $routeProviderwhen function. This specifies the URL (or URLs, in case it is a regular expression) for which the route configuration must be triggered. It also allows us to specify variables in the route that could be used to have the ID or relevant information needed for the page. For example, valid routes are /list, /recipe/:recipeId, and so on. In the case of the latter, it tells the $routeProvider that the URL will have some variable content after /recipe/, and the value of that needs to be picked up and passed to the controller using the $routeParams service. We explore that in the next section.
template
In cases where the HTML to be displayed is not very large, it can directly be inlined as a string as part of the route configuration object that is passed as the second argument to the $routeProvider.when function. angularjs directly inserts this template HTML into the ng-view directive.
templateUrl

Often, the HTML for individual views will be significantly complex and large. In these cases, we can extract the HTML into separate files, and give the URL to the HTML file as the templateUrl. angularjs loads the HTML file from the server when it needs to display the particular route. Future requests for that template are served from a local cache to prevent repeated calls to the server. An example of this follows:

$routeProvider.when('/test',{templateUrl:'views/test.html',});

This fetches views/test.html from the server and loads it into the ng-view.

 

In THe next chapter you will learn about controller

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares

Get the best in web dev

Join dunebook.com and recieve best in web dev , once a week FREE

An email has been Sent to your Inbox ! Please Confirm your Subscription :)