AngularJSでページのタイトルを動的に変更したい
Webアプリケーションで、表示するページによってタイトルを動的に変更したいというのをAngularJSで実装した時のメモ。
使用したモジュール
https://github.com/nonplus/angular-ui-router-title
READMEに使い方書いてあるけど簡単に説明すると
bower install angular-ui-router-title
でインストールするか、ダウンロードしたファイルを任意の場所に設置。
<script src="bower_components/angular-ui-router-title/angular-ui-router-title.js"></script>
をhtmlに追加。ダウンロードした場合はパスを適宜置き換える。
var app = angular.module('myApp', ['ng', 'ui.router.title']);
でui.router.titleモジュールを読み込む。
<html ng-app>
<head>
<title ng-bind="($title || 'Home') + ' - My Application'">My Application</title>
</head>
...
タイトルの埋込例。$titleが設定されていればその内容が、無ければHome
が表示されて、その後に - My Application
と続く。
$titleはUI Routerの$stateProvider.state(name, stateConfig)のstateConfigオブジェクトのresolveプロパティで設定する。
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('home', {
...
resolve: {
// 固定値
$title: function() { return 'Home'; }
}
})
.state('contacts', {
url: '/contacts',
...
resolve: {
// コンタクトリスト
contacts: ['Contacts', function(Contacts) {
// APIからリストを取得
return Contacts.query();
}],
// リストの件数を動的に設定
$title: ['contacts', function(contacts) {
return 'Contacts (' + contacts.length + ')';
}]
}
})
.state('contact', {
url: '/contact/:contactId',
...
resolve: {
// コンタクト1件取得
contact: ['Contacts', '$stateParams', function(Contacts, $stateParams) {
// APIから1件取得
return Contacts.get({ id: $stateParams.contactId });
}],
// contact.nameを動的に設定
$title: ['contact', function(contact) {
return contact.name;
}]
}
})
}]);
他にパンくずリストの機能もあるので必要に応じて使ってみるといいかも。