AngularJS Routes enable us to implement multiview SPAs [Single Page Applications]. A multiview application would consist of multiple views [HTML Templates where each template is associated with a specific route] which would be loaded dynamically as a result of user action (clicking a link, typing a specific URL in browser e.g.). Using routing, AngularJS application can show different content based on which route is selected. Routes are basically bookmark-able URL’s to specific content [specific view] of AngularJS application. Let’s get going.
AngularJS Routing leverages hashbang URLs, means routes are added after # in URL. For example, normally URL looks like http://www.angularapp.com/first/page. In a Single-Page Application, however, it would usually look like http://www.angularapp.com/#/first/page. This is due to the fact that Browser treats URL with # differently than standard URL.
Thus following URL will all make same request to server.
http://angularapp.com/#/first http://angularapp.com/#/second http://angularapp.com/#/third
When User clicks on any of these links (or directly types them in the browser) , same request (http://angularapp.com/) is sent to the server. Any URL fragment after the # sign gets ignored by the browser in the server call. It becomes the job of client to deal with part of URL after the #. AngularJS in this case will look at the route [part of URL after the #] and decide which HTML template to load.
Let’s see a quick and simple example showing AngularJS routing, before diving into details.
<html>
<head>
<title>RoutingDemo App</title>
</head>
<body ng-app='routingDemoApp'>
<h2>AngularJS Routing Application</h2>
<ul>
<li><a href="#/">Default Route</a></li>
<li><a href="#/computers">Computer Route</a></li>
<li><a href="#/printers">Printers Route</a></li>
<li><a href="#/blabla">Unknown Route</a></li>
</ul>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
<script>
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'This is the default Route'})
.when('/computers',{template:'This is the computers Route'})
.when('/printers',{template:'This is the printers Route'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
</html>
Let’s dig deeper, explaining each step in detail.
1.Including the AngularJS Route Module source code in Application’s HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
Very first step is to include the Javascript containing source code of routing module. It can be included in head or body section.
2.Include the ngRoute module as a dependency of our main AngularJS app module
angular.module('routingDemoApp',['ngRoute'])
Next step is to include the ‘ngRoute’ module as a dependency to the main module. It is required before we can use anything from this routing module in our code.
3.Using ngView directive
<div ng-view></div>
Next step is to 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. Please note that with ngRoute, there can be only One ng-view per application. If your application demands more, you should prefer ui-router over ngRoute.
4.Configure $routeProvider
Define our routes in the config section using the $routeProvider service. Below is the simplest configuration to configure routes using @routeProvider.
module.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'This is the default Route'})
.when('/computers',{template:'This is the computers Route'})
.when('/printers',{template:'This is the printers Route'})
.otherwise({redirectTo:'/'});
}]);
AngularJS module’s config function is used to configure the routes. config function takes an array as parameter where the last element is the definition function while the others are dependencies to be injected which will eventually be used in definition function. In this case, $routeProvide dependency is injected.
The $routeProvider provides us when(path,object) & otherwise(object) functions in order to define all routes in one place. The when function takes two arguments:
In our example, we kept it simple by telling AngularJS to load only a certain HTML template that we specify inline, when that route is encountered. Configuration object provides many configuration options to configure. We will go in details in the next section.
The otherwise function is a catch-all function which specifies what AngularJS needs to do if the user tries to go to a URL that is not specified in the configuration. It takes configuration object as the argument. Most of the time, however, you will see that otherwise function takes redirectTo as a key which will simply redirect any unknown URL to the route mentioned in value of redirectTo key.
Previous example was very simple where 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 with route configuration object is as follows:
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function or array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
Each key is explained below:
template: When the HTML to be displayed is not very large, we can inline it as a string, using ‘template’ as a key and this string as a value in configuration object. AngularJS directly inserts this template HTML into the ng-view directive.
.when('/computers',{template:'This is the computers Route'})
This loads the content specified with template key into the ng-view.
templateUrl: When the HTML to be displayed is complex and large, it’s better to break them into separate templates/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.
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});
This fetches views/computers.html from the server and loads it into the ng-view.
controller: Using controller key, we can define the controller to be used for a particular route. There are two ways we can define the controller to be used for a particular route.
//earlier in application
App app = angular.module('myApp',['ngRoute'])
app.controller('AppController1', [function() {
var self = this;
self.message= 'Hello';
self.doSomething = function() {
self.message = 'Bye';
};
}]);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'This is the default Route'})
.when('/computers',{template:'This is the computers Route. And the message is {{ctrl.message}}',
controller:'AppController1 as ctrl'})
.when('/printers',{template:'This is the printers Route'})
.otherwise({redirectTo:'/'});
}]);
$routeProvider.when('/computers', {
template: 'This is the computers Route',
controller: ['$log', function($log) {
$log.log('Computers route has been loaded!');
}]
});
In above example, we have defined the controller definition inline with the route. One drawback of this approach is that we can not reuse the template if we wanted to, without duplicating the code.
controllerAs: You can use controllerAs syntax in case you don’t want to name the controller using ‘as’ syntax with ‘controller’ key [as we did in previous example. The two route definitions in the following example are equivalent in terms of functionality:
$routeProvider
.when('/computers',{template:'This is the computers Route. And the message is {{ctrl.message}}',
controller:'AppController1 as ctrl'})
$routeProvider
.when('/',{template:'This is the default Route'})
.when('/computers',{template:'This is the computers Route. And the message is {{ctrl.message}}',
controller:'AppController1'
controllerAs:'ctrl'
It’s your personal preference which one you should choose.
redirectTo: There might be cases where you want to redirect to a different URL [For example, some URL has been moved,or does not exist anymore]. In those cases, ‘redirectTo’ key comes handy. It is specially useful in error handling.
$routeProvider.when('/computers', {
template: 'This is the computers Route.'
});
$routeProvider.when('/desktops', {
redirectTo: '/computers'
});
In above example, AngularJS will open /#/computers when user enters either /#/computers or /#/desktops in the browser.
resolve: Resolves provides us a way to define a set of asynchronous tasks to execute before the route is loaded. In case any of the asynchronous tasks is not successful, route will not be loaded. It is a handy way to check for example if a user is logged in and has authorization before accessing a protected route. A resolve is a set of keys and functions. Each function can return a value or a promise.
Let’s see this using more realistic setup:
$routeProvider
.when('/items/computers', {
templateUrl: 'items/computers',
controller : "ItemListController as itemListCtrl",
resolve: {
async: ['ItemService', function(ItemService) {
return ItemService.fetchAllItems('computers');
}]
}
})
App.factory('ItemService', ['$http', '$q', function($http, $q){
return {
fetchAllItems: function(category) {
return $http.get('http://localhost:8080/Spring4MVCAngularJSRoutingExample/item/'+category)
.then(
function(response){
return response.data;
},
function(errResponse){
console.error('Error while fetching Items');
return $q.reject(errResponse);
}
);
}
};
}]);
App.controller('ItemListController', ['async', function(async) {
var self = this;
self.items=async;
}]);
In above example, when user tries to access /item/computers, resolves comes in action. It has a set of key [it has named ‘async’ here but you can name anything you want] and function. There can be more than one key:function in one resolve definition. function in this example takes a user defined service ‘ItemService’ as a dependency and calls fetchAllItems function which send a request to server. In this particular scenario, resolve returns a promise, which is passed in controller here. In case the server returns unsuccessful response, route will not be loaded. In case the server response in success [list of items], route gets loaded.
Routes can have parameters. These parameters can then directly be accessed in controllers using AngularJS #routeParams service. Let’s take an example:
<html>
<head>
<title>RoutingDemo App</title>
</head>
<body ng-app='routingDemoApp'>
<h2>AngularJS Routing Application</h2>
<ul>
<li><a href="#/">Default Route</a></li>
<li><a href="#/route/1?name=crap&age=33">route with params and query string</a></li>
<li><a href="#/blabla">Unknown Route</a></li>
</ul>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
<script>
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'This is the default Route'})
.when('/route/:id',
{
template:'Referred item is {{ctrl.id}}' + ' and passed query-string values are {{ctrl.qStrName}} , {{ctrl.qStrAge}}',
controller: ['$routeParams', function($routeParams) {
var self=this;
self.id = $routeParams.id;
self.qStrName = $routeParams.name;
self.qStrAge = $routeParams.age;
}],
controllerAs: 'ctrl'
})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
</html>
In above example, route is defined as /route/:id. Look at : followed by a variable. This is an indication for AngularJS routing that there will be a value after the /route in the URL that should be stored and further make available in controller using $routeParams service.
For example, URL’s like /route/12345?a=2&b=3 will match the route /route with id 12345 and query string variables a & b. Now those values can be accessed in controller code using $routeParams service. Any parameter [preceded by ‘:’] in route can be accessed in controller by it’s name using $routeParams.paramName. Additionally, any query string passed in URL can be accessed in controller using $routeParams.variableName
That’s it. Complete source code for this post can be downloaded from Spring 4 MVC+AngularJS Routing Example using ngRoute.
If you like tutorials on this site, why not take a step further and connect me on Facebook , Google Plus & Twitter as well? I would love to hear your thoughts on these articles, it will help improve further our learning process.
In this post we will be developing a full-blown CRUD application using Spring Boot, AngularJS, Spring Data, JPA/Hibernate and MySQL,…
Spring Boot complements Spring REST support by providing default dependencies/converters out of the box. Writing RESTful services in Spring Boot…
Being able to start the application as standalone jar is great, but sometimes it might not be possible to run…
Spring framework has taken the software development industry by storm. Dependency Injection, rock solid MVC framework, Transaction management, messaging support,…
Let's secure our Spring REST API using OAuth2 this time, a simple guide showing what is required to secure a…
This post shows how an AngularJS application can consume a REST API which is secured with Basic authentication using Spring…
View Comments
how I can add spring security on this., Spring security not working with hash bang
Brilliant tutorial with many details that are skipped or not explained properly on other sites. Thank you