If you are interested to learn about the AngularJS Animation
The ngRoute
module helps your application to become a Single Page Application. Routing in AngularJS is used when the user wants to navigate to different pages in an application but still wants it to be a single page application. AngularJS routes enable the user to create different URLs for different content in an application
What is Routing in AngularJS?
If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute
module. The ngRoute
module routes your application to different pages without reloading the entire application. AngularJS supports SPA using routing module ngRoute. This routing module acts based on the url. When a user requests a specific url, the routing engine captures that url and renders the view based on the defined routing rules.
Example:
Navigate to “red.htm”, “green.htm”, and “blue.htm”:
<body ng-app="myApp"> <p><a href="#/!">Main</a></p> <a href="#!red">Red</a> <a href="#!green">Green</a> <a href="#!blue">Blue</a> <div ng-view></div> <script> var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "main.htm" }) .when("/red", { templateUrl : "red.htm" }) .when("/green", { templateUrl : "green.htm" }) .when("/blue", { templateUrl : "blue.htm" }); }); </script> </body>
What do I Need?
To make your applications ready for routing, you must include the AngularJS Route module:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
Then you must add the ngRoute
as a dependency in the application module:
var app = angular.module("myApp", ["ngRoute"]);
Now your application has access to the route module, which provides the $routeProvider
. Use the $routeProvider
to configure different routes in your application:
app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "main.htm" }) .when("/red", { templateUrl : "red.htm" }) .when("/green", { templateUrl : "green.htm" }) .when("/blue", { templateUrl : "blue.htm" }); });
Where Does it Go?
Your application needs a container to put the content provided by the routing. This container is the ng-view
directive There are three different ways to include the ng-view
directive in your application:
Example:
<div ng-view></div>
Example:
ng-view> /ng-view>
Example:
div class="ng-view"> /div>
Applications can only have one ng-view
directive, and this will be the placeholder for all views provided by the route.
$routeProvider
With the $routeProvider
you can define what page to display when a user clicks a link.
Example:
Define a $routeProvider
:
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "main.htm" }) .when("/london", { templateUrl : "london.htm" }) .when("/paris", { templateUrl : "paris.htm" }); });
Define the $routeProvider
using the config
method of your application. Work registered in the config
method will be performed when the application is loading.
Controllers
With the $routeProvider
you can also define a controller for each “view”.
Example:
Add controllers:
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "main.htm" }) .when("/london", { templateUrl : "london.htm", controller : "londonCtrl" }) .when("/paris", { templateUrl : "paris.htm", controller : "parisCtrl" }); }); app.controller("londonCtrl", function ($scope) { $scope.msg = "I love London"; }); app.controller("parisCtrl", function ($scope) { $scope.msg = "I love Paris"; });
The “london.htm” and “paris.htm” are normal HTML files, which you can add AngularJS expressions as you would with any other HTML sections of your AngularJS application. The files looks like this:
london.htm
<h1>London</h1> <h3>London is the capital city of England.</h3> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>{{msg}}</p>
paris.htm
<h1>Paris</h1> <h3>Paris is the capital city of France.</h3> <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p> <p>{{msg}}</p>
Template
In the previous examples we have used the template Url
property in the $routeProvider.when
method. You can also use the template
property, which allows you to write HTML directly in the property value, and not refer to a page.
Example:
Write templates:
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { template : "<h1>Main</h1><p>Click on the links to change this content</p>" }) .when("/banana", { template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>" }) .when("/tomato", { template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>" }); });
The otherwise method
In the previous examples we have used the when
method of the $routeProvider
. You can also use the otherwise
method, which is the default route when none of the others get a match.
Example:
If neither the “Banana” nor the “Tomato” link has been clicked, let them know:
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/banana", { template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>" }) .when("/tomato", { template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>" }) .otherwise({ template : "<h1>None</h1><p>Nothing has been selected</p>" }); });
AngularJS Routing Example
Now let’s go through a simple example to understand the AngularJS rounting. At first, we will define a module, some routes, create controllers and create multiple views. Finally, we will create the shell page of our application to hold the multiple views.
- Create a module named
mainApp
and loadngRoute
as a dependent module. - Configure the routes using
$routeProvider
. - We use two paths in the example, /home and /viewStudents.
- We use only a single controller in this example,
StudentController
StudentController
is initialized with an array of students and a message. We will be showing the message in the home page and the students list in viewStudents page.- Save this file as
main.js
main.js
var mainApp = angular.module("mainApp", ['ngRoute']); mainApp.config(function($routeProvider) { $routeProvider .when('/home', { templateUrl: 'home.html', controller: 'StudentController' }) .when('/viewStudents', { templateUrl: 'viewStudents.html', controller: 'StudentController' }) .otherwise({ redirectTo: '/home' }); }); mainApp.controller('StudentController', function($scope) { $scope.students = [ {name: 'Mark Waugh', city:'New York'}, {name: 'Steve Jonathan', city:'London'}, {name: 'John Marcus', city:'Paris'} ]; $scope.message = "Click on the hyper link to view the students list."; });
For example, if the URL is like https://www.journaldev.com/index.html#/home, The URL part after the # matches /home
, it will load home.html
page and if it matches /viewStudents
then it will load viewStudents.html
in to the shell page. If nothing matches then it will go in otherwise condition and page will be redirected to home.html
. Now we can create our views and save as home.html
and viewStudents.html
files.
home.html
<div class="container"> <h2> Welcome </h2> <p>{{message}}</p> <a href="#/viewStudents"> View Students List</a> </div>
This is the default page of our application. In this view, we just print out the message, which we have already initialized in the StudentController. You can also see a link to the viewStudents
page.
viewStudents.html
<div class="container"> <h2> View Students </h2> Search: <br/> <input type="text" ng-model="name" /> <br/> <ul> <li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li> </ul> <a href="#/home"> Back</a> </div>
In the above view, you can see a list of students with a search option. Finally, follow below steps to complete our AngularJS routing example application.
ng-app
auto-bootstraps our application mainAppngView
directive is the placeholder of the views –home.html
andviewStudents.html
- Include
angular.min.js
andangular-route.min.js
- Include
main.js
which we have created in the earlier steps. - Save the file as
index.html
index.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>AngularJS Routing</title> </head> <body> <div ng-app="mainApp"> <ng-view></ng-view> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html>