JavaScript
AngularJS

【メモ】【AngularJSのススメ】URLに応じて部分的に更新を行う方法(ルーティング)に関して

More than 5 years have passed since last update.

※出来る限り早い内に、清書しなおします。。


AngularJSのルーティングはhashありとなしのどちらでも対応できる。


あり

http/xxxxxxxxxx.jp/#/top

http/xxxxxxxxxx.jp/#/sub


なし

http/xxxxxxxxxx.jp/top

http/xxxxxxxxxx.jp/sub

今回は、なしversion(html5対応browser限定)に関してメモを残します、、


index.html

<html ng-app="app">

<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular-resource.min.js"></script>
<script>
angular.module("app", []).
config(["$routeProvider", '$locationProvider', function($routeProvider,$locationProvider) {
//$locationProvider.hashPrefix('!');
$locationProvider.html5Mode(true);
$routeProvider.
when("", {
// テンプレート文字列を指定
templateUrl: '/template/teacher/index.html',
// テンプレートにバインドするコントロールの名前を指定
controller: MainCtrl
}).
when("/:id", { //任意の文字列の場合
         /* 省略 */
})
.otherwise({redirectTo: '/'});
}]);
</script>
</head>
<body>
<div ng-view>ここにテンプレートが挿入されるよ。</div>
</body>
</html>

これだけで、http://xxxxxと、http://xxxxx/123に対応!!( ー`дー´)キリッ

ただし、http://xxxxx/hogeとhttp://xxxxx/hoge/123に対応したい場合は、この通りやっても動かない。

その場合は

when("/hoge", {

when("/hoge/:id", {

にする必要がある、大元からのパスが必要になるということです。

そして、折角routing対応したのだから、クリック時に画面更新ではなく、部分更新したい!とか出てきますよね

それも簡単です。

今回の例では

angular.module("app", []).

とappを指定しているので、appグループ配下で

http://xxxxx/hogeもしくは、http://xxxxx/hoge/123に対してのリンクを貼れば

勝手に部分的なテンプレート入れ替えだけやってくれます。

テンプレートの中のリンクも有効です。

でも仮にappの外にリンクを置いていた場合は、

<div ng-app="app">

<a href="http://xxxxx/hoge/123">有効リンク</a>
<div ng-view></div>
<a href="http://xxxxx/hoge/1234567">有効リンク</a>
</div>

<a href="http://xxxxx/hoge/123">無効リンク</a>

画面全体が更新してしまいますので、気をつけましょう。

そして残念なことですが、IE9以下のバージョンでは

http://xxxxx/hoge/123をクリックしたら

http://xxxxx/#/hoge/123と解釈されてしまいます。。。

トップいっちゃったよ。。。。

これは、html5の機能のhistoryが使えてないからです。(色々はしょりました)

<!-- 相対パスをbaseで指定した場所から始める -->

<base href="/hoge/" />

when("/", {
when("/:id", {

この様にすれば、html5対応browserでは

http://xxxxx/hoge/123

非対応browserでは

http://xxxxx/hoge/#/123

とする事ができます。

それでも、管理がし辛いので、おすすめはできません。。

最初から素直に、/#/の構成だけでOKというのであれば

$locationProvider.html5Mode(true);

をコメントアウトするなり、falseにするなりすればOKです。

手探り調査+英語のドキュメントとの格闘の結果ですので

間違い、最適な方法とうなにかありましたら、コメント下さい><

AngularJS使い同士の交流がほしいところ。