AngularJSのルーティングの例 – ngRoute、$routeProvider

1年 ago

海斗, 葵

3 minutes

今日は、ngRouteモジュールと$routeProviderを使用したAngularJSのルーティングの例を見ていきます。以前は、AngularJSのモジュールとコントローラーについて見ていきました。

AngularJSにおけるルーティング

AngularJSのルーティングは、コア機能の1つです。このAngularJSのルーティングの例では、ルーティングがどのように機能するかを示すために、複数のビューを持つ小さなシングルページアプリケーションを作成します。

ngRoute 例

AngularJSのngRouteモジュールは、Angularアプリケーションのルーティングとディープリンキングのためのサービスとディレクティブを提供します。ルーティング機能を使用するためには、AngularJS公式ウェブサイトからngRouteモジュールを含むangular-route.jsスクリプトをダウンロードする必要があります。このファイルを含めるためには、アプリケーション内でCDNを使用することもできます。このチュートリアルでは、GoogleのCDNを使用します。https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js もし、このファイルをアプリケーションにバンドルした場合は、以下のコードをページに追加することができます。

<script src="angular-route.js">

もしGoogle CDNからそれを含めたいのであれば、以下のコードを使用してください。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>

以下のように、依存モジュールとしてngRouteモジュールをAngularJSアプリケーションにロードしてください。

angular.module('appName', ['ngRoute']);

ngView (エンジービュー)

ngViewディレクティブは、指定されたルート内にHTMLテンプレートまたはビューを表示するために使用されます。現在のルートが変更される度に、$routeサービスの設定に従って含まれるビューも変更されます。

ルーティング・プロバイダー

$routeProviderはルートを設定するために使用されます。私たちはngRouteのconfig（）を使用して$routeProviderを設定します。config（）は、$routeProviderを引数に取る関数を取ります。ルーティングの設定は関数の内部に配置されます。$routeProviderはシンプルなAPIを持っており、when（）またはotherwise（）メソッドを受け入れます。

AngularJSのルーティング構文

AngularJSでルートを設定するためには、次の構文を使用します。

var app = angular.module("appName", ['ngRoute']);

app.config(function($routeProvider) {
	$routeProvider
		.when('/view1', {
			templateUrl: 'view1.html',
			controller: 'FirstController'
		})
		.when('/view2', {
			templateUrl: 'view2.html',
			controller: 'SecondController'
		})
		.otherwise({
			redirectTo: '/view1'
		});
});

when()メソッドは、パスとルートをパラメータとして受け取ります。パスは#記号の後のURLの一部です。ルートにはテンプレートURLとコントローラの2つのプロパティが含まれています。テンプレートURLプロパティは、AngularJSがngView指令のdiv内に読み込んで表示するHTMLテンプレートを定義します。コントローラプロパティは、HTMLテンプレートに使用するコントローラを定義します。アプリケーションがロードされると、パスは#記号の後のURLの一部と一致します。指定されたURLに一致するルートパスがない場合、ブラウザはotherwise()関数で指定されたパスにリダイレクトされます。

AngularJSルーティングの例

さあ、AngularJSのルーティングの理解のために簡単な例を進めていきましょう。まず最初にモジュールを定義し、いくつかのルートを作成し、コントローラーを作成し、複数のビューを作成します。最後に、複数のビューを保持するアプリケーションのシェルページを作成しましょう。

このファイルをmain.jsとして保存してください。

メインの.jsファイル

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(function($routeProvider) {
	$routeProvider
		.when('/home', {
			templateUrl: 'home.html',
			controller: 'StudentController'
		})
		.when('/viewStudents', {
			templateUrl: 'viewStudents.html',
			controller: 'StudentController'
		})
		.otherwise({
			redirectTo: '/home'
		});
});

mainApp.controller('StudentController', function($scope) {
	$scope.students = [
		{name: 'Mark Waugh', city:'New York'},
		{name: 'Steve Jonathan', city:'London'},
		{name: 'John Marcus', city:'Paris'}
	];

	$scope.message = "Click on the hyper link to view the students list.";
});

たとえば、URLがhttps://www.scdev.com/index.html#/homeのような場合、#の後にあるURL部分が/homeと一致すると、home.htmlページが読み込まれます。そして/viewStudentsと一致すると、viewStudents.htmlがシェルページに読み込まれます。一致するものがない場合、それ以外の条件に従って、ページはhome.htmlにリダイレクトされます。これで、home.htmlとviewStudents.htmlのビューを作成して保存することができます。

<div class="container">
	<h2> Welcome </h2>
	<p>{{message}}</p>
	<a href="#/viewStudents"> View Students List</a>
</div>

当アプリケーションのデフォルトページです。このビューでは、すでにStudentControllerで初期化されたメッセージを印刷するだけです。また、viewStudents.htmlへのリンクも表示されます。

<div class="container">
	<h2> View Students </h2>
	Search:
	<br/>
		<input type="text" ng-model="name" />
	<br/>
	<ul>
		<li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
	</ul>

	<a href="#/home"> Back</a>
</div>

上記のビューでは、検索オプションを持つ生徒のリストが表示されます。最後に、AngularJS のルーティングの例アプリケーションを完成させるために以下の手順に従ってください。

ng-app auto-bootstraps our application mainApp
ngView directive is the placeholder of the views – home.html and viewStudents.html
Include angular.min.js and angular-route.min.js
Include main.js which we have created in the earlier steps.
Save the file as index.html

インデックス.html

<!DOCTYPE html>
<html>
	<head lang="en">
	  <meta charset="utf-8">
	  <title>AngularJS Routing</title>

	</head>
	<body>

	  <div ng-app="mainApp">
		<ng-view></ng-view>
	  </div>

	  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
	  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
	  <script type="text/javascript" src="main.js"></script>
	</body>
</html>

私たちのAngularJSルーティングの例はこれで終わりです。私たちのアプリケーションは実行準備ができています。

アプリケーションを起動してください。

Save all the files in the same directory.
open index.html from your browser
Try our online demo.