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

  • 45
    Like
  • 0
    Comment
More than 1 year has 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使い同士の交流がほしいところ。