Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
AngularJS Routing with Multiple Views Example
Keywords : Angularjs routing multiple views example, Angularjs routing with ng-template example, Angularjs routing with ng-view template example, Angularjs use multiple views in single page example
Example
<!DOCTYPE html> <html> <head> <title>AngularJS Routing with Multiple Views Example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://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>
Click Here to See Result
Result
Previous
Next