ng-dynamic-title is an angular1.x library to update the <head>'s <title> tag text on angular-ui-router state change event: $stateChangeSuccess.
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>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 descriptionseparator- 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 ' | '
Clone and run npm install.
Run grunt watch to get the build going.
To use the demo to develop with run http-server.
- could add blink
- could add a counter
- toggle between 2 strings
- ngPageTitle - only works with built in router but allows setting in controllers as well as on route setup
- Set to rootscope var and bind to template
- npm ng-page-title on github - supports both built in router and ui-router - supports defaults only through interpolation & ng-page-title on npm
- bowers angular-ui-router-title - recommends hooking up with state resolves - supports ui-router
- ngMeta takes the approach of taking over all head tags and doing an init in the apps run block - only for built in router - neat holistic approach