Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

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)

About

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

Resources

License

Packages

No packages published