AngularJS ルート
- 前のページ AngularJS アニメーション
- 次のページ AngularJS アプリケーション
ngRoute モジュールがアプリケーションをシングルページアプリケーションにします。
AngularJSのルーティングとは何ですか？
アプリケーション内の異なるページにナビゲートしたいが、SPA（シングルページアプリケーション）でページの再ロードがなくて済むようにするには、 ngRoute モジュール。
ngRoute モジュールは、アプリケーション全体を再ロードしないで異なるページにルーティングします。
例
「red.htm」、「green.htm」および「blue.htm」にナビゲートします：
<body ng-app="myApp">
<p><a href="#/!">ホームページ</a></p>
<a href="#!red">赤色</a>
<a href="#!green">緑色</a>
<a href="#!blue">青色</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
何が必要ですか？
アプリケーションがルーティングに準備するためには、AngularJS Route モジュールを含める必要があります：
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
それから、 ngRoute アプリケーションモジュール内に依存関係として追加：
var app = angular.module("myApp", ["ngRoute"]);
現在、アプリケーションは提供 $routeProvider のルートモジュール。
を使用してください。 $routeProvider アプリケーション内で異なるルートを設定：
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
どこに行ったの？
アプリケーションにはルートが提供する内容を配置するためのコンテナが必要です。
このコンテナは ng-view ディレクティブ。
アプリケーションに含めるには、3つの異なる方法があります。 ng-view ディレクティブ：
例
<div ng-view></div>
例
<ng-view></ng-view>
例
<div class="ng-view"></div>
アプリケーションには1つしか ng-view ディレクティブ、これはすべてのルートが提供するビューのプレースホルダーになります。
$routeProvider
使用 $routeProvider、ユーザーがリンクをクリックしたときに表示されるページを定義できます。
例
定義 $routeProvider：
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
アプリケーションの config メソッド定義 $routeProvider。アプリケーションが読み込まれた際に、 config メソッド内で登録された作業。
コントローラー
使用 $routeProvider、各「ビュー」にコントローラーを定義することもできます。
例
コントローラーを追加：
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "I love Paris";
});
"london.htm" と "paris.htm" は通常の HTML ファイルであり、そこに AngularJS 表現を追加できます。AngularJS アプリケーションの他の HTML 部分と同様にです。
これらのファイルは以下のようになります：
london.htm
<h1>ロンドン</h1>
<h3>ロンドンはイングランドの首都です。</h3>
<p>これはイギリスで最も人口の多い都市であり、大都市圏は1300万人以上の住民がいます。</p>
<p>{{msg}}</p>
paris.htm
<h1>パリ</h1>
<h3>パリはフランスの首都です。</h3>
<p>パリ地域はヨーロッパで最大の人口集中地域の一つであり、1200万人以上の住民がいます。</p>
<p>{{msg}}</p>
テンプレート
前の例では、以下のように使用しました： $routeProvider.when メソッドで使用されました templateUrl 属性。
また、 template 属性は、属性値で直接 HTML を書き込むことを許可しており、ページを参照する必要はありません。
例
テンプレートを記述してください：
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>リンクをクリックしてこのコンテンツを変更してください</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>バナナは約75%の水分を含んでいます。</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>トマトは約95%の水分を含んでいます。</p>"
});
});
otherwise メソッド
前の例では、以下のように使用しました： $routeProvider の when メソッドを使用することもできます。
また、 otherwise 他のすべてのルートが一致しない場合、デフォルトルートとして使用されます。
例
もし「Banana」リンクも「Tomato」リンクもクリックされていない場合、彼らに以下のように伝えてください：
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>バナナは約75%の水分を含んでいます。</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>トマトは約95%の水分を含んでいます。</p>"
})
.otherwise({
template : "<h1>None</h1><p>何も選択されていません</p>"
});
});
- 前のページ AngularJS アニメーション
- 次のページ AngularJS アプリケーション
