angular-painless-title

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

latest

Source

npm

Version: 0.1.5

Version published: 11 years ago

Maintainers: 1

Created: 5 years ago

Source

painlessTitle

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

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

Preview, just don't forget to run the demo in fullscreen (separate window) to see title changes.
Source
Fullscreen version

License

The MIT License (MIT)

Keywords

FAQs

What is angular-painless-title?

Is angular-painless-title well maintained?

Package last updated on 19 Mar 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install