<!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/wp-content/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://tech-blog.maddyzone.com/javascript/learn-complete-angularjs-5-steps-step-5-5" target="_blank">View Post on Maddyzone </a>
</div>
</div>
</body>
</html>
//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---(',')";
});
//
/* Styles go here */
Dynamic routing in angular js
<!-- 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
-->
<h1>{{page}}</h1>
<div class="alert bg-success"><b>{{message}}</b></div>