AngularJS - Example - $route - Service

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-$route-service-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular-route.js"></script>
  <script src="script.js"></script>


  <script type="text/javascript">
    angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
  </script>
</head>

<body ng-app="ngRouteExample">
  <div ng-controller="MainController">

    <a href="home">Home</a>&nbsp;|&nbsp;
    <a href="about">About</a>&nbsp;|&nbsp;
    <a href="date">Date</a><br /><br />
    <button go-click="/home">Button directive! (home)</button>&nbsp;
    <button go-click="/about">Button directive! (about)</button>&nbsp;
    <button go-click="/date">Button directive! (date)</button>


    <hr />
    <p ng-if="showInfo">The template page will be displayed here!</p>
    <div ng-view></div>

    <hr />

    <pre>$location.path() = {{$location.path()}}</pre>
    <pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
    <pre>$route.current.params = {{$route.current.params}}</pre>
    <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
    <pre>$routeParams = {{$routeParams}}</pre>

    <hr />

    <p>{{about}}</p>
    <p>{{homepage}}</p>
    <p>{{dateNow}}</p>
  </div>
</body>

</html>

<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

controller: {{name}}<br />
Book Id: {{params.bookId}}<br />
Chapter Id: {{params.chapterId}}

<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

(function(angular) {
  'use strict';
  var app = angular.module('ngRouteExample', ['ngRoute'])

  .controller('MainController', function($scope, $rootScope, $route, $routeParams, $location) {
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;
    $rootScope.showInfo = true;
  })
  .config(function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: "homepage.html",
        controller: 'HomeCtrl'
      })
      .when('/home', {
        templateUrl: "homepage.html",
        controller: 'HomeCtrl'
      })
      .when('/about', {
        templateUrl: 'about.html',
        controller: 'AboutCtrl'
      })
      .when('/date', {
        templateUrl: "date.html",
        controller: 'DateCtrl'
      });
    // configure html5 to get links working on jsfiddle
    $locationProvider.html5Mode(true);
  });
  app.controller('HomeCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
    $rootScope.showInfo = true;
    $scope.homepage = "Homepage";
  }]);

  app.controller('AboutCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
    $rootScope.showInfo = false;
    $scope.about = "Lorem ipsum............";
  }]);

  app.controller('DateCtrl', ['$scope','$rootScope', function($scope, $rootScope) {
    $rootScope.showInfo = false;
    $scope.dateNow = new Date();
  }]);
  
  app.directive( 'goClick', function ( $location ) {
  return function ( scope, element, attrs ) {
    var path;

    attrs.$observe( 'goClick', function (val) {
      path = val;
    });

    element.bind( 'click', function () {
      scope.$apply( function () {
        $location.path( path );
      });
    });
  };
});
})(window.angular);



/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

{{about}}

This is the {{homepage}}

{{dateNow}}