ui-routerでページタイトルを動的に変更する #Angular

Anguarjsのシングルページアプリケーションで、viewを変更した時にページタイトルを変更する方法を説明します。

事前準備

今回はui-routerモジュールを使用します。
ターミナルから下記のコマンドを実行して、ui-routerをインストールします。(要bower)
angularjsも一緒にインストールされます。

$ bower install ui-router

viewの作成

ビューの変更を確認するために下記の3つのビューファイルを用意します。
index.htmlのtitle要素にpage-titleディレクティブを使用しています。

index.html

<!DOCTYPE html>
<html lang="ja" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title page-title></title>
</head>

<body>

    <div ui-view></div>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/ui-router/release/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</body>

</html>

home.html

<h1>Home</h1>
<p><a ui-sref="home">home</a></p>
<p><a ui-sref="login">login</a></p>

<h1>Login</h1>
<p><a ui-sref="home">home</a></p>
<p><a ui-sref="login">login</a></p>

app.jsの作成とstateの設定

angular.moduleでui.routerを指定してください。
$stateProviderの中にstateの設定を記述します。
titleに指定した文字列がstateのページタイトルになります。

app.js

'use strict';
angular.module('myApp', ['ui.router'])

.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/home');
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home.html',
      title: 'ホーム'
    })
    .state('login', {
      url: '/login',
      templateUrl: 'login.html',
      title: 'ログイン'
    });
});

pageTitleディレクティブを追記

pageTitleディレクティブを追記します。
stateの変更があった場合に、state.titleのテキストをセットするようにしています。

app.js

'use strict';
angular.module('myApp', ['ui.router'])

.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/home');
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home.html',
      title: 'ホーム'
    })
    .state('login', {
      url: '/login',
      templateUrl: 'login.html',
      title: 'ログイン'
    });
})

/**
 * ページタイトルをセットするディレクティブ
 */
.directive('pageTitle', function($rootScope) {
  return {
    link: function(scope, element) {
      var listener = function(event, state) {
        var pageTitle = '';
        if (state.title) {
          pageTitle = state.title + ' | SiteName';
          element.text(pageTitle);
        }
      };
      // stateの変更が完了した後に処理を実行
      $rootScope.$on('$stateChangeSuccess', listener);
    }
  };
});

ブラウザで確認

a要素のリンクをクリックしてstateを変更すると動的にタイトルが変更されます。