angular-painless-title

A simple and easy to use (painless) module to manipulate titles in angular apps.

Usage no npm install needed!

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

README

painlessTitle

painlessTitle is an angular module to manipulate titles in angular apps with a simple and easy (painless) way.

NPM

Install

  • directly from the git repository: git clone https://github.com/Anubisss/angular-painless-title
  • from the npm registry: npm install angular-painless-title
  • from the bower registry: bower install angular-painless-title

Usage

Include the script and you have to set up the ng-app at the html element, then you bind the title element.

<!doctype html>
<html ng-app="dummyApp">
<head>
  <!-- You should define a title value, so a robot can read this title without JavaScript. -->
  <title ng-bind="page.title">My Site</title>
  <script src="angular.js"></script>
  <script src="angular-route.js"></script>
  <script src="angular-painless-title.js"></script>
  <script src="scripts/app.js"></script>
  <script src="scripts/controllers/home.js"></script>
</head>
<body>
  <div ng-view></div>
</body>
</html>

Inject the module then config it and bootstrap (instantiate) the painlessTitle factory.

var dummyApp = angular.module('dummyApp', ['angularPainlessTitle']);

dummyApp.config(
['painlessTitleProvider', function(painlessTitleProvider) {
  painlessTitleProvider.setSuffix('My Site');
  painlessTitleProvider.setSeparator('|');
  // You should set up a router here.
}])
.run(['painlessTitle', function(painlessTitle) {
  // You can remove this line, just make sure to instantiate painlessTitle.
  painlessTitle.setTitle('');
}]);

Now you can set a title (dynamic) from a controller.

var dummyAppControllers = angular.module('dummyAppControllers', ['angularPainlessTitle']);

dummyAppControllers.controller('HomeController', ['painlessTitle', function(painlessTitle) {
  painlessTitle.setTitle('Home'); // complete title: Home | My Site
}]);

Or you can set a title (static) from a router if you don't need a controller (static view).

$routeProvider
  .when('/', {
    templateUrl: 'views/home.html',
    controller: 'HomeController' // complete title (specified in the controller): Home | My Site
  })
  .when('/about', {
    templateUrl: 'views/about.html',
    title: 'About' // complete title: About | My Site
  })
  .when('/no_title', {
    templateUrl: 'views/no_title.html' // no controller, no title from the router, so complete title: My Site
  })
;

If you don't set a title you will have just the title suffix as a complete title, eg.: My Site

Demo

License

The MIT License (MIT)