angular-metas

AngularJS meta tags module

Usage no npm install needed!

<script type="module">
  import angularMetas from 'https://cdn.skypack.dev/angular-metas';
</script>

README

angular-metas

Dynamic tags setter for AngularJS compatible with default router and ui-router

npm: github: github: Build Status

Install

You can use bower, npm or just download the files from the repository

bower
bower install angular-metas --save
npm
npm install angular-metas

Then, include the module file into your index HTML file

<script src="${wherever-your-dependencies-are}/angular-metas/metas.js" />

Usage

Configuration

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.

Service Usage

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.

Using defaults

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);

Full documentation

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}

Tests

It uses protractor

Run tests using npm

From inside the angular-metas cloned repository run

npm test

Demo

Check it out working here

License

MIT