Metatags support for the AngularUI Router
npm install ui-router-metatagssh
$ npm install ui-router-metatags
or
$ bower install ui-router-metatags
`
Documentation
See the sample app for a complete example, otherwise, read below
Include the script in your index file
`html
`
Include it in your module declaration and in your run block
`javascript
angular.module('myApp', ['ui.router', 'ui.router.metatags']);
function runBlock($rootScope, MetaTags) {
$rootScope.MetaTags = MetaTags;
}
angular
.module('myApp')
.run(['$rootScope', 'MetaTags', runBlock]);
`
Add the tags to your index file
`html
Default title
`
Then configure defaults
`javascript
function configure(UIRouterMetatagsProvider) {
UIRouterMetatagsProvider
.setTitlePrefix('prefix - ')
.setTitleSuffix(' | MyApp')
.setDefaultTitle('MyApp')
.setDefaultDescription('description')
.setDefaultKeywords('keywords')
.setStaticProperties({
'fb:app_id': 'your fb app id',
'og:site_name': 'your site name'
})
.setOGURL(true);
}
angular
.module('myApp')
.config(['UIRouterMetatagsProvider', configure]);
`
(Static properties are added to all pages and the "setOGURL" method ensures that a 'og:url' property is added to all pages.)
And finally decorate the routes with metatags in the route configs like so:
`javascript
function configureRoutes($stateProvider) {
$stateProvider
.state('frontpage', {
url: '/',
metaTags: {
title: 'Frontpage',
description: 'This is the frontpage',
keywords: 'lots of interresting keywords',
properties: {
'og:title': 'Frontpage'
}
}
})
.state('blogposts', {
url: '/blog/:category',
resolve: {
/ @ngInject /
posts: function(myService, $stateParams) {
return myService.getPosts($stateParams.category);
}
},
metaTags: {
prerender: {
/ @ngInject /
statusCode: function(posts) {
return posts.length > 0 ? 200 : 302;
},
/ @ngInject /
header: function(posts) {
return posts.length > 0 ? null : 'Location: http://example.com/posts';
}
}
}
})
.state('blogpost', {
url: '/post/:id',
resolve: {
/ @ngInject /
blogpost: function(myService, $stateParams) {
return myService.getPost($stateParams.id);
}
},
metaTags: {
/ @ngInject /
title: function(blogpost) {
return blogpost.title;
},
description: 'The most interresting post {{blogpost.title}}'
}
});
}
angular
.module('myApp')
.config(['$stateProvider', configureRoutes]);
`
Note that all tags can be either a simple string, a resolve function or a interpolated string (where the properties available are the ones you resolve in your route).
Log statement
Please note that any routes without metatags will cause a debug log statement, so remember to disable debug logging in production. Example of such a log statement:
`javascript
MetaTags - route: "app.dashboard" does not contain any metatags
``