https://github.com/benjamincharity/ng-page-title
Page title directive for an Angular project
https://github.com/benjamincharity/ng-page-title
Last synced: 2 months ago
JSON representation
Page title directive for an Angular project
- Host: GitHub
- URL: https://github.com/benjamincharity/ng-page-title
- Owner: benjamincharity
- Created: 2016-07-15T18:17:39.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-07-26T06:24:53.000Z (almost 9 years ago)
- Last Synced: 2025-02-08T15:35:51.052Z (4 months ago)
- Language: JavaScript
- Size: 185 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ng-page-title
[![NPM Version][npm-image]][npm-url]
[![Bower Version][bower-image]][bower-url]
[![Build Status][travis-image]][travis-url]
[![Dependencies][dependencies-image]][dependencies-url]
[![Dev Depedencies][dev-dependencies-image]][dev-dependencies-url]
Page title directive for an Angular project
# Why
The `` tag is something that needs to be done on pretty much every project, but can be a right pain in the arse
in AngularJS if you aren't sure what you're doing. This makes it the work of but-a-moment to put in a dynamic page
title. It also interpolates resolved data automatically.
This works for both [UI Router](http://angular-ui.github.io/ui-router/site/#/api/ui.router) states and the default
Angular [Route](https://docs.angularjs.org/api/ngRoute/service/$route). If you are using UI Router, use the
`state-title` directive and if you are using ngRoute then use the `page-title` directive.
# Get Started
## Get the package
#### npm
Use this if getting using [Browserify](http://browserify.org) (my preferred solution)
// Get dependency using command line
npm install ng-page-title --save-dev
// Include in your main Angular file, eg app.js
require("ng-page-title");
#### Bower
Use this if using [Bower](http://bower.io) for your dependency manager
// Get dependency using command line
bower install ng-page-title --save
// Include in your main HTML file
#### CDN
Use this if not using any dependency manager (not recommended)
// Include in your HTML file
## Include the package in your Angular app
Create your app and configure UI Router as normal. Include ng-page-title by including it as a dependency to Angular
angular.module("myApp", [
"ngPageTitle"
...
]);
Ensure that the `ng-app` tag is on your `` tag (this might be on your `` tag). Then you can create your
`` or `` tag. Here's the example HTML
...
And if you're using _ngRoute_
...
Now, in your routing files, set the `pageTitle` on the data object
myApp.config(function ($stateProvider) {
$stateProvider
.state("state1", {
data: {
pageTitle: "Home"
},
url: "/state1",
templateUrl: "partials/state1.html"
});
}
Now, when you go to that state, the title tag will read:
Home
This directive interpolates the string too, so you can put in dynamic page titles
myApp.config(function ($stateProvider) {
$stateProvider
.state("article", {
data: {
pageTitle: "Article: {{ article.getTitle() }}"
},
resolve: {
article: function () {
return {
getTitle: function () {
return "Article Title"
}
};
}
},
url: "/article/:name",
templateUrl: "partials/article.html"
});
}
This gives:
Article: Article Title
# Options
The API is the same for `state-title` and `page-title` - please treat it as interchangeable in this section.
## Default title
By default, the default title is "Untitled page" If you want to put in your own default title, then pass a value in
to the page-title/state-title, eg: `` or
``. This example will set to "Default title"
## Title element
By default, the directive will look for the `pageTitle` inside the data object. This can be changed by setting the
title-element, eg: ``. This example will look for `data.title`
## Pattern
There might be times when you want to set a site title and only change the page title section, in which case use
pattern. This will replace "%s" with the page title, eg: ``. For a
page called "Home", this will set the title to "Home | My site".
This will also work if you decide you want the title in multiple times.
# License
MIT License
[npm-image]: https://img.shields.io/npm/v/ng-page-title.svg?style=flat
[bower-image]: https://img.shields.io/bower/v/ng-page-title.svg?style=flat
[travis-image]: https://img.shields.io/travis/riggerthegeek/ng-page-title.svg?style=flat
[dependencies-image]: https://img.shields.io/david/riggerthegeek/ng-page-title.svg?style=flat
[dev-dependencies-image]: https://img.shields.io/david/dev/riggerthegeek/ng-page-title.svg?style=flat
[npm-url]: https://npmjs.org/package/ng-page-title
[bower-url]: http://bower.io/search/?q=ng-page-title
[travis-url]: https://travis-ci.org/riggerthegeek/ng-page-title
[dependencies-url]: https://david-dm.org/riggerthegeek/ng-page-title
[dev-dependencies-url]: https://david-dm.org/riggerthegeek/ng-page-title#info=devDependencies&view=table