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;
        }]
      }
    })
}]);

他にパンくずリストの機能もあるので必要に応じて使ってみるといいかも。