Differentiation of AngularJS Routing

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 load ngRoute 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 mainApp
ngView directive is the placeholder of the views – home.html and viewStudents.html
Include angular.min.js and angular-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>

Differentiation of AngularJS Routing

Differentiation of AngularJS Routing

What is Routing in AngularJS?

Example:

What do I Need?

Where Does it Go?

Example:

Example:

Example:

$routeProvider

Example:

Controllers

Example:

Template

Example:

The otherwise method

Example:

AngularJS Routing Example

Category Posts

Categories

Recent Posts