In this angularjs example we will see how to create routing, that will load multiple pages i.e. load multiple views within a single page without reloading, using an Angular module called ngRoute.
<html ng-app="myApp">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script>/* Creating one module, you need to specify ngRoute if you are using this module for routing
myApp=angular.module('myApp',['ngRoute']), this name 'myApp' functions as the directive in the
html tag before which tells that this html page is going to use angular js.*/
/* Calling config function which has $routeProvider as parameter which actually handles routing
of parameters. Here we have used 2 scenario comp_mst and emp_mst which routes to 2
different pages comp_mst.html and emp_mst.html, and controller is specified for the pages, this
controller will control to which <div> (if we are using divider) tag the page will be viewed. */
myApp.config(function($routeProvider) {
$routeProvider.
when('/comp_mst', {
templateUrl: 'comp_mst.jsp',
controller: 'RouteController'
}).
when('/empl_mst', {
templateUrl: 'emp_mst.jsp',
controller: 'RouteController'
}).
when('/shift_mst', {
templateUrl: 'shift_mst.jsp',
controller: 'RouteController'
}).
when('/desig_mst', {
templateUrl: 'designation_mst.jsp',
controller: 'RouteController1'
}).
otherwise({
redirectTo: '/'
});
}) /*Route param is defined in controller for RouteController routing to comp_mst */
app.controller('RouteController',function($scope,$routeParams) {
$scope.page_name = $routeParams.comp_code + ' ' + $routeParams.comp_namee;
});
/*Route param is defined in controller for RouteController1 routing to emp_mst */
app.controller('RouteController1',function($scope,$routeParams) {
$scope.page_name = $routeParams.emp_code + ' ' + $routeParams.emp_namee;
});
</script>
</head>
<body>
<h1>Routing example</h1>
<!-- Two separate div is pointed to two different controller using ng-controller this controller will decide which template will be loaded to which div -->
<div ng-controller="RouteController">
<div id="divRoute" ng-view>
</div>
<div ng-controller="RouteController1">
<div id="divRoute1" ng-view>
</div>
</body>
</html>
Now the file comp_mst.html has it's content like
<div>
<h1>Company Code and Name : {{comp_code}} {{comp_name}};
</div>
Now the file emp_mst.html has it's content like
<div>
<h1>Employee Code and Name : {{emp_code}} {{emp_name}};
</div>
No comments:
Post a Comment