Introduction to Angularjs Routing

Routing is one of the core features of angularjs Framework. Routing is used to load multiple views without reloading the whole application or we can say that loading multiple views on the single page. Here we'll see the angularjs routing example by making a single page application with multiple views.

ngRoute

The ngRoute module provides routing with deep linking with controller and views. In order to use this routing feature, angular-route.js script is required which contain ngRoute module and it can be download from the angularjs official site. Or we can use CDN in our application to include ngRoute module.

we can bundle this file into our application. Below is an example of how to bundle this file.

  <script src="angular-route.js">
 

we can also use CDN to include the the file. Below is the example to insert file via CDN

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
 

Then load ngRoute into our angularjs application by adding the dependency. Below is code to how to add ngRoute as the dependency.

  angular.module('appName', ['ngRoute']);
 

Some important terms that we have to remember are:-
1. Path: It is part of URL after # symbol.
2. templateUrl: It is the property that defines which HTML template angularjs should load inside the div with ngView directive.
3. controller: It defines which controller is to be loaded for that particular HTML template.

ngView

ngView is angularjs directive that is used to display a particular HTML template for the specific route. Whenever route changes included a view inside ngView changes according to the $route configuration.

$routeProvider

$routeProvider is service provided by angularjs framework which is used to configure different routes. $routeProvider is configure by config() method which takes parameter $routeProvider. Below is the example for configuring $routeProvider.

var app = angular.module("appName", ['ngRoute']);
app.config(function($routeProvider) {
	$routeProvider
		.when('/view1', {
			templateUrl: 'view1.html',
			controller: 'FirstController'
		})
		.when('/view2', {
			templateUrl: 'view2.html',
			controller: 'SecondController'
		})
		.otherwise({
			redirectTo: '/view1'
		});
});
 

Here when() takes two parameter path and route. path is part of URL after # symbol used for routing. the route includes two properties templateUrl and controller.
When angularjs application starts, the path of $routeProvider is matched with the part of URL after # symbol and load the template and controller with the same path. if no URL found then it redirects to the path written in otherwise().
You have now learned about Angularjs Routing.

Reference:

If you'd like to learn more about angularjs or angularjs routing , please visit the following link:- Angularjs Routing Documentation