In AngularJS Dynamic Routes is for creating dynamic URL, Which can useful to pass parameter in “GET” method.
In below example “home”,”login”,”profile” is static route and “blog” is dynamic routes. by $routeParams, you use dynamic value.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!DOCTYPE html> <html> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script type="text/javascript" src="https://code.angularjs.org/1.6.9/angular-route.min.js"></script> <body> <div ng-app="myApp" > <div ng-view > </div> </div> <script> var app = angular.module("myApp", ['ngRoute']); app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/', { controller: 'homeController', templateUrl: 'views/home.html' }) .when('/login', { controller: 'loginController', templateUrl: 'views/login.html', }) .when('/profile', { controller: 'profileController', templateUrl: 'views/profile.html' } .when('/blog/:id', { controller: 'blogController', templateUrl: 'views/blog.html' }) }]); app.controller('homeController', ['$scope', function($scope) { }]); app.controller('loginController', ['$scope', function($scope) { }]); app.controller('profileController', ['$scope', function($scope) { }]); app.controller('blogController', ['$scope','$routeParams', function($scope,$routeParams) { var blog_id=$routeParams.id; }]); </script> </body> </html> |
More Stories
Angular Demo Project
AngularJS Routes
AngularJS Dependency Injection