How to Set Title Dynamically in AngularJs

on












Demo - http://plnkr.co/edit/LAqTNFZJw1LqsT9YLGKg?p=preview
Code - https://github.com/codeandyou/AngularJsExamples/tree/master/Routing/002_Routing_Dynamically_Set_Title


------------------------------------------------------------------------------------------------------------
Index.html

<!DOCTYPE html>
<html lang="en" ng-app="routingApp">
  <head>
      <title ng-bind="title">AngularJS Dynamically Set Title Example</title>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
      <script src="app.js"></script>
  </head>
  <body>
    <div class="container">
<div class="row">
<div class="col-md-9">
          <h1>  AngularJS Dynamically Set Title</h1>
<table class="table table-striped">
<thead>
 <tr>
<th><a href="#AboutUs"> About Us</a></th>
                  <th><a href="#ContactUs">Contact Us </a></th>
 </tr>
</thead>
 </table>
  <div ng-view></div>
</div>
</div>
    </div>
  </body>
</html>

------------------------------------------------------------------------------------------------------------
App.js

var routingApp = angular.module('routingApp', []);
routingApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/AboutUs', {
templateUrl: 'View_AboutUs.html',
controller: 'TitleController',
     title:"AngularJs-AboutUs"
      })
        .when('/ContactUs', {
          templateUrl: 'View_ContactUs.html',
          controller: 'TitleController',
          title:"AngularJs-ContactUs"
      });
}]);
routingApp.controller('TitleController', function($scope, $routeParams) {
});
routingApp.run(['$location', '$rootScope', function($location, $rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
    });
}]);

------------------------------------------------------------------------------------------------------------
View_AboutUs.html

<div>
<h2>About Us</h2>
CodeAndYou Forums
</div>


------------------------------------------------------------------------------------------------------------
View_ContactUs.html

<div>
    <h2>Contact Us</h2>
    codeandyouforums@gmail.com
</div>

Comments

Post a Comment