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 </code> tag is something that needs to be done on pretty much every project, but can be a right pain in the arse<br />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<br />title. It also interpolates resolved data automatically.</p><p class="my-3">This works for both <a href="http://angular-ui.github.io/ui-router/site/#/api/ui.router" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">UI Router</a> states and the default<br />Angular <a href="https://docs.angularjs.org/api/ngRoute/service/$route" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Route</a>. If you are using UI Router, use the<br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">state-title</code> directive and if you are using ngRoute then use the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">page-title</code> directive.</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Get Started</h1></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Get the package</h2></p><p class="my-3">#### npm</p><p class="my-3">Use this if getting using <a href="http://browserify.org" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Browserify</a> (my preferred solution)</p><p class="my-3"> // Get dependency using command line<br /> npm install ng-page-title --save-dev</p><p class="my-3"> // Include in your main Angular file, eg app.js<br /> require("ng-page-title");</p><p class="my-3">#### Bower</p><p class="my-3">Use this if using <a href="http://bower.io" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Bower</a> for your dependency manager</p><p class="my-3"> // Get dependency using command line<br /> bower install ng-page-title --save</p><p class="my-3"> // Include in your main HTML file<br /> <script src="/path/to/dist/ng-page-title.min.js"></script></p><p class="my-3">#### CDN</p><p class="my-3">Use this if not using any dependency manager (not recommended)</p><p class="my-3"> // Include in your HTML file<br /> <script src="https://cdn.rawgit.com/riggerthegeek/ng-page-title/master/dist/ng-page-title.min.js"></script></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Include the package in your Angular app</h2></p><p class="my-3">Create your app and configure UI Router as normal. Include ng-page-title by including it as a dependency to Angular</p><p class="my-3"> angular.module("myApp", [<br /> "ngPageTitle"<br /> ...<br /> ]);</p><p class="my-3">Ensure that the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ng-app</code> tag is on your <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><html></code> tag (this might be on your <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><body></code> tag). Then you can create your<br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><title state-title> 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.

Named UI-Router views

When using [named views][named-views] only your primary view should contain a page title. If more
than one page title is defined, the first one found will be used.

``javascript .state('state', { url: '...', views: { viewA: { templateUrl: '...', data: { pageTitle: 'I am a title!', }, }, viewB: { templateUrl: '...', data: { pageTitle: 'So am I, but no one will ever see me.', }, }, }, })``

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
[named-views]: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views