AngularJSルーティング
このngRoute
モジュールは、アプリケーションがシングルページアプリケーションになるのに役立ちます。
AngularJSのルーティングとは何ですか?
アプリケーション内の別のページに移動したいが、アプリケーションをSPA(シングルページアプリケーション)にし、ページをリロードしない場合は、ngRoute
モジュールを使用できます。
このngRoute
モジュールは、アプリケーション全体をリロードせずに、アプリケーションを別のページにルーティングします。
例:
「red.htm」、「green.htm」、および「blue.htm」に移動します。
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">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>
私には何が必要なのだろう?
アプリケーションをルーティングできるようにするには、AngularJSRouteモジュールを含める必要があります。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/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
ディレクティブです。
ng-view
アプリケーションにディレクティブを含めるには、次の3つの方法があります。
例:
<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"
});
});
アプリケーションのメソッドを$routeProvider
使用して定義します。config
メソッドに登録された作業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アプリケーションの他のHTMLセクションと同じようにAngularJS式を追加できます。
ファイルは次のようになります。
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It
is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
<p>{{msg}}</p>
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
レンプレート
前の例では、メソッドでtemplateUrl
プロパティ
を使用しました。$routeProvider.when
プロパティを使用することもtemplate
できます。これにより、ページを参照せずに、プロパティ値に直接HTMLを記述できます。
例:
テンプレートを書く:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click
on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
});
});
それ以外の方法
前の例では、のwhen
メソッドを使用しました$routeProvider
。
このメソッドを使用することもできますotherwise
。これは、他のどのルートも一致しない場合のデフォルトルートです。
例:
「バナナ」と「トマト」のどちらのリンクもクリックされていない場合は、次のことを知らせてください。
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing
has been selected</p>"
});
});