SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

AngularJSアプリ開発を支援する便利モジュール

AngularJSアプリにマルチビュー/入れ子にも対応したルーティング機能を実装する(UI Router)

AngularJSアプリ開発を支援する便利モジュール 第4回

  • X ポスト
  • このエントリーをはてなブックマークに追加

トップページを準備する

 まずは、トップページからです。

リスト1 トップページを表すテンプレート(index.html)
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<script src="bower_components/angular/angular.min.js"></script>
<!-- (1)angular-ui-router.min.jsをインポート -->
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
[<a ui-sref="home">トップページ</a>]
<!-- (3)membersステートにid=1、7を渡すリンク-->
[<a ui-sref="members({id: 1})">No.1のメンバー</a>]
[<a ui-sref="members({id: 7})">No.7のメンバー</a>]
[<a ui-sref="bbs({keys: 'JavaScript/AngularJS/SPA'})">関連記事</a>]
<hr />
<!-- (2)ビューの表示領域を準備 -->
<div ui-view></div>
</body>
</html>

 UI Routerを利用するには、まず、ライブラリ本体(angular-ui-router.min.js)をインポートしておきます(1)。

 ui-view属性は、ルーティングによって呼び出された個別ページを表示するためのビュー領域を表します(2)。UI Routerを利用した場合、表示すべきページ(リンク先)は、(AngularJS標準のng-href属性ではなく)ui-sref属性で指定する点にも注意してください。あとから改めて解説しますが、UI Routerでは個別のページをステート(state)という単位で管理します。たとえば(3)の例であれば、「membersステートに対してリンクしなさい。その際にid=1、7を渡します」という意味になります。ここでは、ui-sref属性で示しているのが、いわゆるURLそのものではない点だけ押さえておきましょう。

ルーティング情報を設定する

 続いて、UI Routerのキモとも言えるルーティング情報――どのリクエストに対して、どのコントローラー/ビューで処理するかを定義します。

リスト2 ルーティング定義(app.js)
// (1)ui.routerモジュールへの依存関係を設定
angular.module('myApp', [ 'ui.router' ])
  // (2)$stateProvider/$urlRouteProviderプロバイダーを注入
  .config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
    // (3)ルーティング情報を設定
    $stateProvider
      .state('home', {
        url: '/',
        controller: 'HomeController',
        templateUrl: 'views/home.html'
      })
      .state('members', {
         url: '/members/:id',
         controller: 'MembersController',
         templateUrl: 'views/members.html'
      })
      .state('bbs', {
        url: '/bbs/*keys',
        controller: 'BbsController',
        templateUrl: 'views/bbs.html'
      });
      $urlRouterProvider.otherwise('/');
    }]);

 スクリプト側でUI Routerを利用するには、アプリのモジュールからui.routerモジュールへの依存関係を宣言しておきます(1)。また、あとから利用するために、configメソッドに対して、$stateProvider/$urlRouteProviderプロバイダーを注入しておきましょう(2)。configメソッドは、サービスがインスタンス化される前のタイミングで呼び出されるメソッドです。ルーティングの設定は、このメソッドの中で行います。

 ルーティング情報を設定するのは、$stateProvider.stateメソッドの役割です(3)。

構文 stateメソッド

state(name, params)
  • name:ステート名
  • params:ルーティング情報(「パラメーター名: 値」のハッシュ形式)

 引数paramsで指定できるパラメーターには、以下のようなものがあります。

stateメソッドで利用できる主なパラメーター
パラメーター名 概要
url URLパターン
controller 使用するコントローラー(文字列/function型)
controllerAs コントローラー名のエイリアス
template 使用するテンプレート(文字列)
templateUrl 使用するテンプレート(パス)
templateProvider 使用するテンプレート(サービス)
parent 親ステート
resolve コントローラーに注入するサービス
reloadOnSearch $location.search/hashの変更時にルート先をリロードするか(デフォルトはtrue)
onEnter ルート先への移動時に呼び出されるコールバック関数
onExit ルート先から他へ移動する時に呼び出されるコールバック関数

 先ほども触れたように、UI Routerではルーティング情報をステートという単位で管理します。この例であれば、以下のようなステートを準備しています。

サンプルで定義されているステート
ステート URL コントローラー テンプレート
home / HomeController home.html
members /members/:id MembersController members.html
bbs /bbs/*keys BbsController bbs.html

 たとえばmembersステートに対応するURLは「/members/~」で、MembersControllerコントローラー/members.htmlテンプレートを使って処理される、という意味になります。

 urlパラメーターに含まれる「:id」は変数のプレイスホルダー(置き場所)で、(たとえば)「/members/13」であれば、変数idに13という値が渡されたことを意味します。

 「:名前」が「/」までの値をパラメーターと見なすのに対して、「*名前」で「/」を跨いだすべてのパスをパラメーターとすることもできます。たとえば、bbsステートであれば、urlパラメーターを「/bbs/*keys」としているので、「/bbs/JavaScript/AngularJS/SPA」であれば、変数keysには「JavaScript/AngularJS/SPA」のような値がセットされることになります。

コントローラーを準備する

 最後に、UI Routerによって処理を委ねられるコントローラーです(*)。

リスト3 個別ページのコントローラー(controller.js)
angular.module('myApp')
  .controller('HomeController', ['$scope', function($scope) {
    $scope.msg = 'ここは、トップページです。';
  }])
  .controller('MembersController', ['$scope', '$stateParams',
    function($scope, $stateParams) {
    $scope.id = $stateParams.id;
  }])
  .controller('BbsController', ['$scope', '$stateParams',
    function($scope, $stateParams) {
    $scope.keys = decodeURIComponent($stateParams.keys);
  }]);

 一般的なコントローラーと基本的には同じですが、ルートパラメーター(:名前、*名前で表されたパラメーター)を取得するために、$stateParamsサービスを注入しています。ルートパラメーターには、「$stateParams.名前」の形式でアクセスできます。

*)ビューについては、紙面上は割愛しますので、具体的なコードは配布サンプルから参照してください。

次のページ
UI Routerならではの機能

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
AngularJSアプリ開発を支援する便利モジュール連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト(ウイングスプロジェクト)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9012 2015/10/19 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング