※出来る限り早い内に、清書しなおします。。
AngularJSのルーティングはhashありとなしのどちらでも対応できる。
あり
http/xxxxxxxxxx.jp/#/top
http/xxxxxxxxxx.jp/#/sub
なし
http/xxxxxxxxxx.jp/top
http/xxxxxxxxxx.jp/sub
今回は、なしversion(html5対応browser限定)に関してメモを残します、、
<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使い同士の交流がほしいところ。