<!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>Basic 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="">
      </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 home page
    .when('/home',
    {
        controller: 'HomeCtrl',
        templateUrl: 'home.html'
    })
 
     // set route for the about page
 
    .when('/about',{
        controller: 'AboutCtrl',
        templateUrl: 'aboutus.html'
    })
 
   // set route for the contact page
 
    .when('/contact',{
        controller: 'ContactCtrl',
        templateUrl: 'contact.html'
    })
 
    // if not match with any route config then send to home page
 
     .otherwise({
        redirectTo: '/home'
      });
 
 
});
 
// create the controller and inject Angular's $scope
 
  // set for Home Controller
  myApp.controller('HomeCtrl', function($scope) {
    // create a message to display in our view
    $scope.message = "(',')---I am on Home page---(',')";
  });
 
// set for About Controller
  myApp.controller('AboutCtrl', function($scope) {
    $scope.message = "(',')---I am on About page---(',')";
  });
 
// set for Contact Controller
  myApp.controller('ContactCtrl', function($scope) {
    $scope.message = "(',')---I am on Contact page---(',')";
  });
/* Styles go here */


<!-- content set for home page -->
<div style="font-size: 32px"  >
    <h1>Home </h1>
    <h2 class="label label-info">{{message}}</h2>
</div>
<!-- content set for about us page -->
<div style="font-size: 32px" >
    <h1>About Us </h1>
    <h2  class="label label-success">{{message}}</h2>
</div>
<!-- content set for contact page -->
<div style="font-size: 32px"  >
    <h1>Contact </h1>
    <h2 class="label label-danger">{{message}}</h2>
</div>