<!DOCTYPE html>

  <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">
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>

<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">
      <h1>Basic Routing Example</h1>
      <!-- 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-->


      <!-- 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="">
  <a href="http://tech-blog.maddyzone.com/javascript/learn-complete-angularjs-5-steps-step-5-5" target="_blank">View Post on Maddyzone </a>


//create a module myApp
var myApp = angular.module('myApp', ['ngRoute']);
//Now Configure  our  routing
myApp.config(function ($routeProvider, $locationProvider) {
    // set route for the home page
        controller: 'HomeCtrl',
        templateUrl: 'home.html'
     // set route for the about page
        controller: 'AboutCtrl',
        templateUrl: 'aboutus.html'
   // set route for the contact page
        controller: 'ContactCtrl',
        templateUrl: 'contact.html'
    // if not match with any route config then send to home page
        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>
<!-- content set for about us page -->
<div style="font-size: 32px" >
    <h1>About Us </h1>
    <h2  class="label label-success">{{message}}</h2>
<!-- content set for contact page -->
<div style="font-size: 32px"  >
    <h1>Contact </h1>
    <h2 class="label label-danger">{{message}}</h2>