ngRouteによるルーティングにコメントAngularJSはngRouteというモジュールをオプションで提供している。これを使うと、AngularJSアプリケーションでルーティング(URLに応じた画面遷移)を実装することができる。Routerというルーターが導入されている。1.4以上と2系のいずれでも使えるという特徴がある。シングルページアプリケーションのルーティングシングルページアプリケーションにおけるルーティングにおいては、URLとは通常のURLではなく、シバンの追加されたURLである。通常のURLは以下のようなスタイルである。http://example.com/first/pageこれに対して、シングルページアプリケーションのURLは以下のようになる。http://example.com/#/first/pagehttp://example.com/#!/first/pageこのようになる理由は、ブラウザはハッシュを含むURLを、含まないURLとは違った形で解釈するからである。ブラウザは、#の後ろにある部分をサーバへのリクエストの際に無視する。そのため、#の後ろの部分が変化しても、サーバへのリクエストは行われない。ngRouteを使うAngularJSのルーティングモジュールを使う手順は以下のとおり。ページ内のどの部分をAngularJSが変更すべきか印をつける。ngRouteを使う場合、ng-viewディレクティブをHTML内で使う。}]);$routeProviderを使うことで、各ルートをwhen()メソッドで定義できる。when()メソッドは、2つの引数をとる。第2引数は設定オブジェクトで、そのルートで何が起きるべきかを指定するotherwize()関数を使うことで、未定義のルートにユーザが遷移しようとした時の振る舞いを決めることができる。ルーティングオプション$routeProvider.whenメソッドの第2引数には以下のような形でオプションを渡すことができる。URLまたはURLの正規表現。ルートが実行される前に実行される非同期の処理を記述する(認可、認証等に使う)resolveによるルート実行前のチェックresolveによって、ルートが読み込まれる前に実行される非同期の処理を定義することができる。});}]);2番目のルート/protectedには、resolveが定義されている。myKey2でも何でもいい)。連想配列の値は、AngularJSのDIのシンタックスの配列になる。ルーティングのresolveについて、AngularJSは以下を保証する。resolveが値を返した場合、AngularJSはこの関数の実行を完了し、成功したresolveとして扱うresolveがpromiseオブジェクトを返した場合、AngularJSはpromiseが値を返すのを待って、promiseの結果に応じて成功/失敗として扱う全てのresolve関数が完了するまで、ルートは読み込まれない全てのresolveは並列に実行されるいずれかのresolveがエラーに遭遇するか、promiseがrejectされたら、AngularJSはそのルートを読み込まない上のサンプルコードでは、immediateのresolveは、定数を返すだけなので、毎回成功する。asyncはサーバとの通信を行い、成功すれば、ルートが読み込まれる。失敗すると、コントローラーは読み込まれず、対応するHTMLも表示されない。この場合、ユーザーは最後に表示されたページに留まる。一点重要なことは、それぞれのresolveの戻り値は、それぞれのキーによってコントローラーに注入される、ということだ。上のサンプルコードでは、immediateは数値、asyncはpromiseオブジェクトになる。Application(SPA)では、ルートのコンテキストが必要になることが多い。/users/1に対して、id=1のユーザの情報を表示する、といった処理が必要になる。理想的には、コントローラーとルートは、独立してアクセス可能であるべきである。これらのURLパラメータには、$routeParamsサービスを使ってアクセスできる。'myCtrl'});このルートにおける、:detIdはプレースホルダーである。ここにある値は$routeParams.detIdで取得できる。※ngRouteにはURLに制約を付ける機能がないため、/detail/1だけでなく/detail/fooでもアクセスできる。後者の場合、detIdは’foo’になる。URLに含まれるクエリストリングも取得できる。/detail/1?q=fooにアクセスすると、以下のようなデータが取得できる。'foo'}注意すべきこと空のテンプレートngRouteは、それぞれのルートが空ではないtemplateまたはtemplateUrlに関連付けられていることを要求する。テンプレートが存在しない場合、ngRouteはこのルートを無視する。空文字列のtemplateも、テンプレートが存在しないとみなされるので注意が必要である。resolveによるコントローラーへの注入resolveを使ってコントローラーに値を注入する際は、ng-controllerディレクティブを使用せず、ルーティング定義の一部としてコントローラーを定義すること。しないと、AngularJSは依存している値が取得できない。$routeParamsの値の型$routeParamsから取得した値は、デフォルトでは全て文字列になる。1つのアプリケーションにng-viewは1つだけngRouteでは、ng-viewは1つだけ使用可能である。複数のng-viewや、ネストしたng-viewは使用できない。追加の設定HTML5モードハッシュの含まれるURLはSPAでは一般的なものであるが、ハッシュが含まれない「普通の」URLを使うこともできる。http://example.com/#/user/1というURLは、HTML5モードではhttp://example.com/user/1となる。HTML5モードを有効化するには、サーバ側のサポートも必要である。ユーザがhttp://example.com/user/1にアクセスしたとき、サーバのドキュメントルート配下の/user/1ではなく、index.htmlが返るようにする必要がある。HTML5モードを有効化するには、以下の3つが必要である。$locationProvider.hashPrefix('!');});HTML5モードを有効化するには、$locationProviderを使用する。hashPrefixに’!’を設定することが、SEO上の観点からは推奨される。/>タグを追加する必要がある。これによって、ブラウザに、画像やCSS等の静的リソースをどこから取得すべきかを教える。アプリケーションがhttp://example.com/appというURLで提供されていてる場合、HTML5モードが有効になっていると、URLはhttp://example.com/app/user/1といった形になる。このとき、サーバはindex.htmlを返すが、ブラウザのパスは/app/user/1なので、相対パスではファイルを取得できない。以下のように設定されていれば、この問題を解決できる。</head></html>これによって、URLに関わらず、相対パスが/appを起点として解決されるようになる。サーバサイド/first/pageや/second/pageといったルートに対するアクセスの場合にも、index.htmlが返されるようにする必要がある。以下はNodeJSの場合の実装例。hereAngularJSとSEO検索エンジンについて気に留めておくべき点は以下のとおり。GoogleやBingのような検索エンジンは、SPAに対応したパターンを有している。これらは、hashbangを使用したURLの使用を前提にしている(#ではなく、#!を使用したURL)検索エンジンがクロールする際、#!を?escaped_fragment=に置き換えて、サーバにリクエストを送るさらに、サーバーが検索エンジンからのリクエストを判別して、以下のような手段を使用してレスポンスを返す必要がある。PhantomJSのようなヘッドレスブラウザをサーバで使用してHTMLをレンダリングするangular-seoのようなツールの使用も検討すべきである。Analyticsのような分析サービスは、SPAでは簡単には動かない。分析サービスは、ページの読み込み時のイベントにフックして処理を行っているからである。Analyticsを手動で呼び出してルートの変更を教える必要がある。これには、Angularyticsのようなライブラリが使用できる。代替となるルーターngRouteで、70-80%のニーズは満たすことができる。SPAのURLは一般的にシンプルなものになるからである。URLに複雑な要求があったり、URLに応じてUIを細かに制御したいような場合には、ngRouteの機能では対応が難しい。このような場合には、ui-routerの使用を検討すべきである。Routerも代替候補の1つになる。WordPress.。