AngularJS Routing (ngRoute) & Multiple Views

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.  

AngularJS Routing

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.

 

  1. http://tutlane.com/home.html#routeurl
  2. http://tutlane.com/home.html#routeurl2
  3. http://tutlane.com/home.html#routeurl

To use the routing concept in angularjs application we need to add ngRoute reference while creating a module in the application.

Syntax of AngularJS Routing

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.

Steps to Implement Routing in AngularJS

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>

AngularJS Routing Example

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.

Output of AngularJS Routing Example

Following is the result of implementing routing in angularjs applications.

 

Angularjs routing example result or output

AngularJS Routing with Parameters

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

 

  1. http://tutlane.com/home.html#routeurl/param1
  2. http://tutlane.com/home.html#routeurl2/param2

Syntax of Passing Parameters to Route URLs

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.

AngularJS Routing with Parameters 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.

Output of AngularJS Routing with Parameters

Following is the result of sending parameters with URLs in angularjs routing.

 

Angularjs routing with parameters example result or output

AngularJS Routing with Multiple Local Views

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.

Syntax of AngularJS Routing with Local Views

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.

Example of AngularJS Routing with Local Views

Following is the example of loading multiple template views with ng-template directive on the same page in angularjs application.

 

Live Preview

<!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.

Output of AngularJS Routing with Local Views

Following is the result of using local views with ng-template directive in angularjs routing.

 

Angularjs routing with multiple views example result or output

This is how we can implement routing in angularjs applications based on our requirements.