Here we will learn routing in angularjs with an example, how to use ngRoute module in angularjs routing, routing with parameters in angularjs example, routing with multiple local views in angularjs with example.
In angularjs routing is the way to view multiple views in the single HTML page.
Now a day’s lot of people are using single-page applications (SPA) to show multiple HTML templates in a single page without loading or changing the page to implement this routing is the best feature to load content dynamically without changing page.
By using routing, we can specify URLs after the “#” sign and that URLs like as shown below.
To use the routing concept in angularjs application we need to add ngRoute reference while creating a module in the application.
Following is the syntax of adding routing in angularjs applications.
var app = angular.module("routesApp", ['ngRoute']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/routeURL1', {
templateUrl: 'templateURL1',
controller: 'routesController'
}).
when('/routeURL2', {
templateUrl: 'templateURL2',
controller: 'routesController'
}).
otherwise({
redirectTo: '/login'
});
}
]);
</script>
<div ng-view></div>
If you observe above routing syntax we have 3 main components those are ngRoute, $routeProvider and ng-view.
ngRoute – To enable routing configuration we need to add this reference to our application module.
ng-view – The ng-view directive is used to display HTML content from specified URLs. For more information on ng-view check this URL ng-view directive in angularjs.
$routeProvider – By using this component we can configure the routes.
By using these components, we can achieve routing easily in angularjs applications.
The following are the steps to implement routing in angularjs applications.
Now create a new application and add the following angularjs reference file in the header section.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
To enable routing configuration ngRoute in application we need to add following routing module url in header section.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
Now we need to add routing reference ngRoute in the module which we create for an application like shown following
var app = angular.module("routesApp", ['ngRoute']);
After adding ngRoute reference now add following routeProvider configuration in script
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/routeURL1', {
templateUrl: 'sample1.htm',
controller: 'sample1Controller'
}).
when('/routeURL2', {
templateUrl: 'sample2.htm',
controller: 'sample2Controller'
}).
otherwise({
redirectTo: '/login'
});
}
]);
app.controller('sample1Controller',function($scope){
$scope.message='Test Sample Page 1 URL';
})
app.controller('sample2Controller',function($scope){
$scope.message='Test Sample Page 2 URL';
})
If you observe above code, we defined two html pages 'sample1.html' and 'sample2.html' as templateUrls whenever url changes ng-view will load data from respective html pages. Now open html pages and write following code.
Sample1.html
<h2>Sample1 Route Page</h2>
{{message}}
Sample2.html
<h2>Sample2 Route Page</h2>
{{message}}
Now add following code in body tag of angularjs application page.
<div ng-app="routesApp">
<ul>
<li>
<a href="#/routeURL1">Sample Route1</a>
</li>
<li>
<a href="#/routeURL2">Sample Route2</a>
</li>
</ul>
<div ng-view></div>
</div>
Following is the complete example of implementing routing in angularjs applications.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Routing Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script type="text/javascript">
var app = angular.module("routesApp", ['ngRoute']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/routeURL1', {
templateUrl: 'sample1.htm',
controller: 'sample1Controller'
}).
when('/routeURL2', {
templateUrl: 'sample2.htm',
controller: 'sample2Controller'
}).
otherwise({
redirectTo: '/login'
});
}
]);
app.controller('sample1Controller',function($scope){
$scope.message='Test Sample Page 1 URL';
})
app.controller('sample2Controller',function($scope){
$scope.message='Test Sample Page 2 URL';
})
</script>
</head>
<body>
<h2>AngularJS Routing Example</h2>
<div ng-app="routesApp">
<ul>
<li>
<a href="#/routeURL1">Sample Route1</a>
</li>
<li>
<a href="#/routeURL2">Sample Route2</a>
</li>
</ul>
<div ng-view></div>
</div>
</body>
</html>
As we discussed previously for 'sample1.html' and 'sample2.html' pages add above mentioned code. Now we will run and see the output of application.
Following is the result of implementing routing in angularjs applications.
We learned how to implement routing in angularjs application now we will see how to pass parameters to routing URLs in angularjs.
Generally passing parameters to URL in routing will be like as shown following
Following is the syntax of passing parameters to URLs in angularjs.
$routeProvider.when('/routeURL1/:userId', {
templateUrl: 'sample1.htm',
controller: 'sample1Controller'
})
If you observe above syntax we defined userId as parameter in url routing and we can get that parameter values using $routeParams like as shown below
$scope.uid = $routeParams.userId;
Now we will see how to use parameters with url routing in angularjs with example.
Following is the example of using parameters in URL routing in angularjs applications.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Routing with Prameters Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script type="text/javascript">
var app = angular.module("routesApp", ['ngRoute']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/routeURL1/:userId', {
templateUrl: 'sample1.htm',
controller: 'sample1Controller'
}).
when('/routeURL2', {
templateUrl: 'sample2.htm',
controller: 'sample2Controller'
}).
otherwise({
redirectTo: '/login'
});
}
]);
app.controller('sample1Controller',function($scope,$routeParams){
$scope.uid = $routeParams.userId;
})
app.controller('sample2Controller',function($scope){
$scope.message='Test Sample Page 2 URL';
})
</script>
</head>
<body>
<h2>AngularJS Routing with Parameters Example</h2>
<div ng-app="routesApp">
<ul>
<li>
<a href="#/routeURL1/34124">Route1 with Parameters</a>
</li>
<li>
<a href="#/routeURL2">Sample Route2</a>
</li>
</ul>
<div ng-view></div>
</div>
</body>
</html>
If you observe above example, we mentioned two pages 'sample1.htm' and 'sample2.htm' in url routing create those pages in your application and add code like as shown below to get parameter values.
Sample1.htm
Add following code in sample1.htm page
<h2>Sample1 Route Page with Parameters</h2>
<b>UserId:</b> {{uid}}
Sample2.htm
Add following code in sample2.htm page
<h2>Sample2 Route Page</h2>
{{message}}
Once we done with adding now run application and check the output.
Following is the result of sending parameters with URLs in angularjs routing.
In the above angularjs routing and routing with parameters example, we loaded content from 'sample1.htm' and 'sample2.htm' pages in case if those pages contain less content then it’s better to keep that content in the main page instead of loading content from separate pages.
By using ng-template directive we can define small templates in our page and include all the content in the same page.
Following is the syntax of defining templates using ng-template directive in angularjs.
<script type="text/ng-template" id="sample1.htm">
<h2>Sample1 Route Page with Parameters</h2>
<b>UserId:</b> {{uid}}
</script>If you observe above syntax we defined template 'sample1.htm' in script tag and this template will load in ng-view whenever 'sample1.htm' page referred in routing.
Following is the example of loading multiple template views with ng-template directive on the same page in angularjs application.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Routing with Local Views Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script type="text/javascript">
var app = angular.module("routesApp", ['ngRoute']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/routeURL1/:userId', {
templateUrl: 'sample1.htm',
controller: 'sample1Controller'
}).
when('/routeURL2', {
templateUrl: 'sample2.htm',
controller: 'sample2Controller'
}).
otherwise({
redirectTo: '/login'
});
}
]);
app.controller('sample1Controller',function($scope,$routeParams){
$scope.uid = $routeParams.userId;
})
app.controller('sample2Controller',function($scope){
$scope.message='Test Sample Page 2 URL';
})
</script>
</head>
<body ng-app="routesApp">
<h2>AngularJS Routing with Local Views Example</h2>
<div>
<ul>
<li>
<a href="#/routeURL1/34124">Route1 with Parameters</a>
</li>
<li>
<a href="#/routeURL2">Sample Route2</a>
</li>
</ul>
<div ng-view></div>
</div>
<script type="text/ng-template" id="sample1.htm">
<h2>Sample1 Route Page with Parameters</h2>
<b>UserId:</b> {{uid}}
</script>
<script type="text/ng-template" id="sample2.htm">
<h2>Sample2 Route Page</h2>
{{message}}
</script>
</body>
</html>
If you observe above example, we added two templates for 'sample1.htm' and 'sample2.htm' pages using ng-template directive and loading templates whenever respective pages referred in routing.
Following is the result of using local views with ng-template directive in angularjs routing.
This is how we can implement routing in angularjs applications based on our requirements.