This page demonstrates how routing could help in creating single-page application in a very easy manner without writing much of a code. Following are some of the key advantages of using routing functionality:
  1. Helps avoid writing duplicate header and footer code.
  2. Helps configure views and associated controller as part of module routing configuration at one place. Makes it easier to manage.
Following two views (in grey color) are routed using a single page with URL as "/spa". Click on the links below to see the different views getting loaded without loading this page. Play around with the instructions and see them working without whole page load. Quite amazing!
  1. views/searchtable.html: The view get associated with CompanyCtrl controller. The partial page/view demonstrates the two-way binding by making use of "filter" filter.
  2. views/sorttablecolumn.html: The view get associated with CompanyCtrl controller. The partial page/view demonstrates the two-way binding by making use of "orderBy" filter in conjunction with "filter" filter.

Notes

  • routeProvider is configured to route the requests to different views based on the URL routes. Look at the code below for sample.
Routing scripts inclusion
In addition to angular.min.js, one would also be required to include angular-route.js for routing to work. Thus, following two scripts are required.
			
<script	src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js"></script>		
			
			
Routing configuration code
Pay attention to the module dependency on "ngRoute". This step is important for the routing to work.
			
var helloApp = angular.module("helloApp", ['ngRoute']);
helloApp.config(function($routeProvider){
	$routeProvider
		.when( '/searchtable', { controller: 'CompanyCtrl', templateUrl: 'views/searchtable.html' } )
		.when('/sorttablecolumn', { controller: 'CompanyCtrl', templateUrl: 'views/sorttablecolumn.html' })
		.otherwise( { redirectTo: '/searchtable' } );
});			
			
			
comments powered by Disqus