In My previous Article we have learned about Routing in angular JS . But in normal routing if we have 1000 route then at that time set config for every route is not a good choice . for this we will do Dynamic Routing. Thanks Angular you have provide $routeParams.
Dynamic routing with Angular JS is easily done by $routeParams. :)
In previous article example you can see that for every page we set routing configuration for below route
- home
- aboutus
- contactus
Now we will set it by Dynamic routing.
How we will set Dynamic Routing ?
Lets Start One by One.
First make a main file it will like our previous article in which we set all layout and linked all files like below.
index.html
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
<script src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<!--Now it Tells to AngularJS to be active in this portion of the page. In this case the entire document.(due to we apply on body tag ) -->
<div class="container">
<div class="jumbotron">
<img src="http://tech-blog.maddyzone.com/uploads/2013/10/maddyzone-logo-300x72.png" />
<br />
<h1>Dynamic Routing Example</h1>
<br />
<!-- navigation menu start-->
<a href="#home" class="btn btn-primary">Home</a>
<a class="btn btn-success" href="#about">About</a>
<a class="btn btn-danger" href="#contact">Contact</a>
<!-- navigation menu stop-->
<br />
<br />
<!-- by ng-view we create a space in this dynamic content come according to route by ng-view angular know that on which area content will set-->
<div ng-view="">in this area by $routeparam content will change</div>
<br />
<a href="http://maddyzone.com/angularjs/javascript/learn-complete-angularjs-5-steps-step-5-5" target="_blank">View Post on Maddyzone </a>
</div>
</div>
</body>
</html>
Now as per previous article we set three template.
home.html
<!-- content set for home page -->
<div style="font-size: 32px" >
<h1>Home </h1>
<h2 class="label label-info"></h2>
</div>
aboutus.html
<!-- content set for about us page -->
<div style="font-size: 32px">
<h1>About Us </h1>
<h2 class="label label-info"></h2>
</div>
contact.html
<!-- content set for contact page -->
<div style="font-size: 32px">
<h1>Contact </h1>
<h2 class="label label-danger"></h2>
</div>
But now we don’t need these above template files we will set a single file with name uirouter.html in which all above template file html set.
uirouter.html
<!-- this is our template which will set in ng-view section
in main page(index.html)
in this template by $routeParam set in script then scope value set dynamic
in our case we are using two variable $scope.page and $scope.message
-->
<div style="font-size: 32px">
<h1>[]({{ site.url }}/uploads/2014/09/Dynamamic-routing-with-angularjs.png)
In My previous Article we have learned about Routing in angular JS . But in normal routing if we have 1000 route then at that time set config for every route is not a good choice . for this we will do Dynamic Routing. Thanks Angular you have provide $routeParams.
Dynamic routing with Angular JS is easily done by $routeParams. :)
In previous article example you can see that for every page we set routing configuration for below route
- home
- aboutus
- contactus
Now we will set it by Dynamic routing.
How we will set Dynamic Routing ?
Lets Start One by One.
First make a main file it will like our previous article in which we set all layout and linked all files like below.
index.html
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
<script src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<!--Now it Tells to AngularJS to be active in this portion of the page. In this case the entire document.(due to we apply on body tag ) -->
<div class="container">
<div class="jumbotron">
<img src="{{ site.url }}/uploads/2013/10/maddyzone-logo-300x72.png" />
<br />
<h1>Dynamic Routing Example</h1>
<br />
<!-- navigation menu start-->
<a href="#home" class="btn btn-primary">Home</a>
<a class="btn btn-success" href="#about">About</a>
<a class="btn btn-danger" href="#contact">Contact</a>
<!-- navigation menu stop-->
<br />
<br />
<!-- by ng-view we create a space in this dynamic content come according to route by ng-view angular know that on which area content will set-->
<div ng-view="">in this area by $routeparam content will change</div>
<br />
<a href="http://maddyzone.com/angularjs/javascript/learn-complete-angularjs-5-steps-step-5-5" target="_blank">View Post on Maddyzone </a>
</div>
</div>
</body>
</html>
Now as per previous article we set three template.
home.html
<!-- content set for home page -->
<div style="font-size: 32px" >
<h1>Home </h1>
<h2 class="label label-info">{{message}}</h2>
</div>
aboutus.html
<!-- content set for about us page -->
<div style="font-size: 32px">
<h1>About Us </h1>
<h2 class="label label-info">{{message}}</h2>
</div>
contact.html
<!-- content set for contact page -->
<div style="font-size: 32px">
<h1>Contact </h1>
<h2 class="label label-danger">{{message}}</h2>
</div>
But now we don’t need these above template files we will set a single file with name uirouter.html in which all above template file html set.
uirouter.html
<!-- this is our template which will set in ng-view section
in main page(index.html)
in this template by $routeParam set in script then scope value set dynamic
in our case we are using two variable $scope.page and $scope.message
-->
<div style="font-size: 32px">
<h1>{{page}}</h1>
<div class="alert bg-success"><b>{{message}}</b></div>
</div>
In above uirouter.html we are using two $scope variables which value set according to route
$scope.page= by this we set title of page$scope.message= by this we set description of page
Now in our script code in which we will set route configuration.
app.js
//create a module myApp
var myApp = angular.module('myApp', ['ngRoute']);
//Now Configure our routing
myApp.config(function ($routeProvider, $locationProvider) {
console.log("route");
$routeProvider
// set route for the dynamic page
.when('/:pagename',
{
controller: 'RouteCtrl',
templateUrl: 'uirouter.html'
}) // if not match with any route config then send to home page
.otherwise({
redirectTo: '/'
});
});
// create the controller and inject Angular's $scope
// set for Route Controller
myApp.controller('RouteCtrl', function($scope,$routeParams) {
// create a message to display in our view
$scope.page=$routeParams.pagename;
$scope.message = "(',')---I am on "+$routeParams.pagename +" page---(',')";
});
in above script we use
$routeProvider
// set route for the dynamic page
.when('/:pagename',
{
controller: 'RouteCtrl',
templateUrl: 'uirouter.html'
}) // if not match with any route config then send to home page
.otherwise({
redirectTo: '/'
});
here ⁄:pagename is for route configuration.
| Route Name | $routeParams | $routeParams Ouput |
| /home | $routeParams.pagename | home |
| /aboutus | $routeParams.pagename | aboutus |
| /contactus | $routeParams.pagename | contactus |
Here you can see in this all route we use $routeParams.pagename and output come different which will shown in our uirouter.html template file $scope variables.
we can set any no of attributes in dynamic route like
for two parameters in URL.
xyz.com#/firstparameter/secondparameter
| url | $routeParams config | $routeParams | $routeParams Output |
| /javascript/a javascript post | /:category/:postname | $routeParams.category $routeParams.postname | javascript a javascript post |
for three parameters in URL.
xyz.com#/firstparameter/secondparameter/thirdparameter
| url | $routeParams config | $routeParams | $routeParams Output |
| /javascript/angular/a javascript post | /:category/:subcategory/:postname | $routeParams.category $routeParams.subcategory $routeParams.postname |
javascript angular a javascript post |
So you can set any no of route parameters and get easily and do Dynamic Routing.
Happy Dynamic Routing :)
Please give your comment and your suggestion Thanks. </h1> <div class="alert bg-success"></div> </div>
In above uirouter.html we are using two $scope variables which value set according to route
$scope.page= by this we set title of page$scope.message= by this we set description of page
Now in our script code in which we will set route configuration.
app.js
//create a module myApp
var myApp = angular.module('myApp', ['ngRoute']);
//Now Configure our routing
myApp.config(function ($routeProvider, $locationProvider) {
console.log("route");
$routeProvider
// set route for the dynamic page
.when('/:pagename',
{
controller: 'RouteCtrl',
templateUrl: 'uirouter.html'
}) // if not match with any route config then send to home page
.otherwise({
redirectTo: '/'
});
});
// create the controller and inject Angular's $scope
// set for Route Controller
myApp.controller('RouteCtrl', function($scope,$routeParams) {
// create a message to display in our view
$scope.page=$routeParams.pagename;
$scope.message = "(',')---I am on "+$routeParams.pagename +" page---(',')";
});
in above script we use
$routeProvider
// set route for the dynamic page
.when('/:pagename',
{
controller: 'RouteCtrl',
templateUrl: 'uirouter.html'
}) // if not match with any route config then send to home page
.otherwise({
redirectTo: '/'
});
here ⁄:pagename is for route configuration.
| Route Name | $routeParams | $routeParams Ouput |
| /home | $routeParams.pagename | home |
| /aboutus | $routeParams.pagename | aboutus |
| /contactus | $routeParams.pagename | contactus |
Here you can see in this all route we use $routeParams.pagename and output come different which will shown in our uirouter.html template file $scope variables.
we can set any no of attributes in dynamic route like
for two parameters in URL.
xyz.com#/firstparameter/secondparameter
| url | $routeParams config | $routeParams | $routeParams Output |
| /javascript/a javascript post | /:category/:postname | $routeParams.category $routeParams.postname | javascript a javascript post |
for three parameters in URL.
xyz.com#/firstparameter/secondparameter/thirdparameter
| url | $routeParams config | $routeParams | $routeParams Output |
| /javascript/angular/a javascript post | /:category/:subcategory/:postname | $routeParams.category $routeParams.subcategory $routeParams.postname |
javascript angular a javascript post |
So you can set any no of route parameters and get easily and do Dynamic Routing.
Happy Dynamic Routing :)
Please give your comment and your suggestion Thanks.