Dynamic tags setter for AngularJS compatible with default router and ui-router
You can use bower, npm or just download the files from the repository
bower install angular-metas --save
npm install angular-metas
Then, include the module file into your index HTML file
<script src="${wherever-your-dependencies-are}/angular-metas/metas.js" />
You should define the metas defaults during the config runtime. Just inject the provider and make use of .setDefaults()
method passing an object with the default values
app.config(['metasProvider', function(metasProvider){
metasProvider.setDefaults({
title: 'Default title',
description: 'Default description',
author: 'John Doe'
});
}]);
Then synchronize those defaults with your <meta>
tags in <head>
<meta name="title" content="{{ metas.title }}" />
<meta name="description" content="{{ metas.description }}" />
<meta name="author" content="{{ metas.author }}" />
Typically, the number of properties in defaults would be the same as the number of <meta>
tags.
Inject the metas service into your controllers and use .setMetas()
to define the values
app.controller('PageController', ['metas', function(metas){
metas.setMetas({
title: 'Page title',
description: 'Page description'
})
}]);
In the case above, the author meta will be set with the default value defined through the provider.
Passing null or no argument or empty object or undefined will set defaults.
// All below calls will set default metas
metas.setMetas(null);
metas.setMetas();
metas.setMetas({});
metas.setMetas(undefined);
Check the jsdoc here or create it locally just installing jsdoc and
jsdoc --readme ${path-to-readme} --package ${path-to-package.json} ${path-to-cloned-folder}
It uses protractor
From inside the angular-metas cloned repository run
npm test
Check it out working here