LoginSignup
43

More than 5 years have passed since last update.

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

Last updated at Posted at 2013-05-23

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

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使い同士の交流がほしいところ。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
43