AngularJS Routing is the technique using which in a web application we can render multiple pages in a Single page without refresh the page. This technique is popular as “Single page Application” designing. To clarify your queries related to routing & routeProvider here I am with AngularJS routing example. In the below app I am with 3 pages Template-A.html, Template-B.html & Template-Param.html. In my Index.html I created an AngularJS module “routingApp”. Inside the module I am configuring the module for Angularjs routeProvider.
Using $routeProvider I am showing my three pages Template-A.html, Template-B.html & Template-Param.html in ng-view div. $routeProvider.when is used to detect the browser url & loads the respective html Template. Here in the below example I have 3 links in html body. Depending upon their href values the when statement works in routeProvider. For the first link I am sending Template-A to the browser like /Template-A. While the user click the first link inside $routeProvider function he will conditionally forcing the ng-view div to load Template-A.html. This is declared in templateUrl of $routeProvider.when. Including templateUrl here I am assigning the specific Controller for the specific template. For an example for Template-A I created Controller-A.
To show you the Complete features of AngularJS Routing here I created two more pages Template-B.html & Template-Param.html. Template-B is an example to show you how to pass Custom data using AngularJS Routing. In Template-Param you can found the example How to pass parameters using AngularJS Routing. First let us talk about Template-B. While use click on Template-B link including templateUrl & Controller details here I added one customData attribute. Using this way you can pass custom data in your routing mechanism. To show this custom data in Template-B.html inside the Controller-B I am assigning this data to a scope variable $scope.customData. In the next phase I am just printing this $scope.customData variable to my Template-B.html.
In Template-C I am showing the example how to pass parameters using AngularJS Routing. During the click of “Template Param” link in body I am calling a URL “Template-Param” with an id value 237. During $routeProvider.when using /Template-Param/:id I am sending the id value to the Template-Param controller. In Controller-Param I am using $routeParams to assign the id to a scope variable using $scope.paramId = $routeParams.id;.
In this example you can found How to use AngularJS Routing with How to pass parameters in AngularJS Routing & How to pass custom data in AngularJS Routing. To run this example in your local desk copy the below four files in their respective name. Store them in a folder & open Index.html.
angularjs-routing-example.htm
<!DOCTYPE html>
<html>
<head>
<title>Example to show how to use AngularJS Routing</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript">
/* Angular module */
var routingApp = angular.module('routingApp', []);
/* Define Routing */
routingApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/Template-A', {
templateUrl: 'Template-A.htm',
controller: 'Controller-A'
}).
when('/Template-B', {
templateUrl: 'Template-B.htm',
controller: 'Controller-B',
customData: 'Template B Custom Data'
}).
when('/Template-Param/:id', {
templateUrl: 'Template-Param.htm',
controller: 'Controller-Param'
}).
otherwise({
redirectTo: '/Template-A'
});
}]);
/* Controller for Template A */
routingApp.controller('Controller-A', function($scope) {
$scope.message = 'Message from Controller A. Using Routing showing in Template A.';
});
/* Controller for Template B */
routingApp.controller('Controller-B', function($scope, $route) {
$scope.message = 'Message from Controller B. Using Routing showing in Template B.';
$scope.customData = $route.current.customData;
});
/* Controller for Template Param */
routingApp.controller('Controller-Param', function($scope, $routeParams) {
$scope.message = 'Message from Controller Param. Using Routing showing in Template Param.';
$scope.paramId = $routeParams.id;
});
</script>
</head>
<body ng-app="routingApp">
<a href="#Template-A">Template A</a>
<a href="#Template-B">Template B</a>
<a href="#Template-Param/237">Template Param</a>
<!--ng-view to show different Templates-->
<div ng-view></div>
</body>
</html>
Template-A.htm
<h2>Template A</h2>
{{ message }}
Template-B.htm
<h2>Template B</h2>
{{ message }}
<br />
{{ customData }}
Template-Param.htm
<h2>Template Param</h2>
{{ message }}
<br />
{{ paramId }}
