❤
npm
Sign UpSign In

ng-dynamic-title

1.0.10 • Public • Published

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 ' | '

Development

Clone and run npm install.

Run grunt watch to get the build going.

To use the demo to develop with run http-server.

Release

Future Ideas for this lib

  • could add blink
  • could add a counter
  • toggle between 2 strings

Similar Libs / Ideas

Readme

Keywords

Package Sidebar

Install

npm i ng-dynamic-title

Repository

github.com/clamstew/ng-dynamic-title

Homepage

github.com/clamstew/ng-dynamic-title#readme

Weekly Downloads

0

Version

1.0.10

License

MIT

Last publish

Collaborators

  • clamstew
Try on RunKit
Report malware