Ng-dynamic-title NPM

Angular.js 1.x: ng-dynamic-title

ng-dynamic-title is an angular1.x library to update the <head>'s <title> tag text on angular-ui-router state change event: $stateChangeSuccess.

View Demo & Docs

Install

Bower Install:

bower install ng-dynamic-title --save

NPM Install:

npm i ng-dynamic-title --save

Add dependencies to your DOM:

<script src="./node_modules/angular/angular.min.js"></script>
<script src="./node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="./node_modules/ng-dynamic-title/dist/ng-dynamic-title.min.js"></script>

Usage

example html:

<html ng-app="myAwesomeApp">
  <head>
    <title ng-dynamic-title
           root-title="ngDynamicTitle Demo"
           sub-title="Subtitle goes here"
           separator="-" <!-- optional and default is '-' -->
           separator-tagline="-" <!-- optional and default is '-' -->
           >fallback title (tip: recommend it be same as root-title)</title>
  </head>
</html>

example javascript:

angular.module('myAwesomeApp',[
  'ui.router',
  'ng.dynamic-title' // <-- Register ngDynamicTitle in main app module
]);

angular.module('myAwesomeApp').config([
  '$stateProvider',
  '$urlRouterProvider',
  function(
    $stateProvider,
    $urlRouterProvider
  ) {

  $urlRouterProvider.otherwise('home');

  $stateProvider
    .state('home', {
      url: '/home',
      template: 'home.html',
      data: {
        ngDynamicTitle: 'Homepage' // <-- Add data property here
      }
    });

  }
]);

Directive Options:

$state.current.data.ngDynamicTitle - The page name, such as "Home", "Blog", "Contact Us", etc. Can be used in controller/directives to change the page title on the fly.
root-title - Usually the main name of the site or organization.
sub-title - This is typically some sort of tagline or description
separator - A separator between the page title and the site branding, typically ' - ' or ' | '
separator-tagline - A separator between the site branding and the tag line, typically ' - ' or ' | '