Skip to content
A simple and easy to use (painless) module to manipulate titles in angular apps.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
angular-painless-title.js
bower.json
package.json

README.md

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>
  <!-- The head title. You can get the head title which you set in a router or in a controller. -->
  <h1 ng-bind="page.headTitle"></h1>
  <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)

You can’t perform that action at this time.