AngularJS routes allow you to create different URLs for different information and content in your application. Different URLs for different information and content allows user to bookmark URLto specific content. In AngularJS, such bookmarkable URL is called a route.
AngularJS routes enable you to show different page (content/information) depending on what route is chosen. A route is declared in the URL after the # sign. The following URL's point to different routes but point to the same AngularJS project or application:
http://myangularjsdemoapp.com/index.html#animals
http://myangularjsdemoapp.com/index.html#birds
http://myangularjsdemoapp.com/index.html#games
http://myangularjsdemoapp.com/index.html#savinaccounts
When the browser loads these URLs, the same AngularJS application will be loaded (as athttp://myangularjsdemoapp.com/index.html), but AngularJS will look the part of the URL after the # and decide what HTML template to show.
Let us look at a fully working AngularJS route example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routes Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>
<body ng-app="sampleAngularJsApp">
<a href="#/path1">Route 1</a><br/>
<a href="#/path2">Route 2</a><br/>
<div ng-view></div>
<script>
var module = angular.module("sampleAngularJsApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/path1', {
templateUrl: 'angular-route-template-1.jsp',
controller: 'NgRouteController'
}).
when('/path2', {
templateUrl: 'angular-route-template-2.jsp',
controller: 'NgRouteController'
}).
otherwise({
redirectTo: '/'
});
}]);
module.controller("NgRouteController", function($scope) {
})
</script>
Parts of the above sample application is explained in the below sections.
- Including the AngularJS Route Module
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
The AngularJS Route module is defined in its own JavaScript file. To implement this, we have to include it in our AngularJS application.
- Declaration of Dependency on the AngularJS Route Module
AngularJS module of this application (called sampleAngularJsApp) declares a dependency on the AngularJS route module:
var module = angular.module("sampleAngularJsApp", ['ngRoute']);
The AngularJS module of the application needs to declare this dependency in order to use the ngRoute module
- The ngView Directive
<div ng-view></div>
Inside the div with the ngView (can also be written ng-view) directive the HTML template specific to that given route will be displayed.
- Configuring the $routeProvider
The $routeProvider creates the $route service. Here is the code from the example:
<script>
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/path1', {
templateUrl: 'angular-route-template-1.jsp',
controller: 'NgRouteController'
}).
when('/path2', {
templateUrl: 'angular-route-template-2.jsp',
controller: 'NgRouteController'
}).
otherwise({
redirectTo: '/'
});
}]);
</script>
The $routeProvider is configured in the config() function of module. We pass a configuration function to the config() function which takes the $routeProvider as parameter. The $routeProvideris configured in this function.
The $routeProvider is defined by callingtwo functions when() and otherwise().
The when() function has two parameters a route path and a JavaScript object.
When the application is loaded, the route path is matched with the part of the URL after #. As you can seein the same example, the two route paths passed to the two when() function calls match theese two route paths in the hrefattribute of the links.
The JavaScript object contains two properties as templateUrl and controller. The templateUrl property tells which HTML page AngularJS should load and display in the div with the ng-View directive. The controller property tells which controller functions that should be used with that HTML page.
The otherwise() function takes a JavaScript object. This JavaScript object defines AngularJS what it should do if no route paths matches the given URL. In the given example above the browser is redirected to the same URL with #/ as a route path.
Links to Routes
<a href="#/path1">Route 1</a><br/>
<a href="#/path2">Route 2</a><br/>
The part of the URLs after the # matches the routes configured on the $routeProvider.
When one of these links is clicked, the URL in the address bar of browser window changes and the div with the ng-View directive will show the HTML page matching the route path.
