アングラーJSは、ルートを使ってビューを切り替える方法を実現します。
この例は、アングラーJSがルーティング切替ビューを使用する方法を実現することを示す。皆さんに参考にしてあげます。具体的には以下の通りです。
以下は簡単な学生情報管理の例です。
注意：angglar.jsを引用する以外に、anglar-route.jsを引用します。
1、index.メインビューを作成します。
index.メインビューでは、メニューなど、複数のビューを共有するものを中に入れます。この例では、アプリケーションのタイトルを中に入れて、Anglarにビューをどこに表示するかを指示するために、ng-viewコマンドを使います。
この記事で皆さんのAnglarJSプログラムの設計に役に立ちますように。
以下は簡単な学生情報管理の例です。
注意：angglar.jsを引用する以外に、anglar-route.jsを引用します。
1、index.メインビューを作成します。
index.メインビューでは、メニューなど、複数のビューを共有するものを中に入れます。この例では、アプリケーションのタイトルを中に入れて、Anglarにビューをどこに表示するかを指示するために、ng-viewコマンドを使います。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="StuApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<h1> </h1>
<div ng-view></div>
</body>
</html>
<table>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr ng-repeat="student in StudentList">
<td>{{student.id}}</td>
<td><a ng-href="#/view/{{student.id}}">{{student.name}}</a></td>
<td>{{student.sex}}</td>
<td>{{student.age}}</td>
</tr>
</table>
<div>
<div><strong> ：</strong>{{Student.id}}</div>
<div><strong> ：</strong>{{Student.name}}</div>
<div><strong> ：</strong>{{Student.sex}}</div>
<div><strong> ：</strong>{{Student.age}}</div>
<a href="#/"> </a>
</div>
//
var StuServices = angular.module("StuApp", ['ngRoute']);
// URL、
function StuRouteConfig($routeProvider) {
$routeProvider.when('/', {
controller: 'ListController',
templateUrl: 'list.html'
}).when('/view/:id', {
controller: 'DetailController',
templateUrl: 'detail.html'
}).otherwise({ redirectTo: '/' });
}
// ，
StuServices.config(StuRouteConfig);
//
StudentList = [{ id: 0, name: ' ', sex: ' ', age: 18 },
{ id: 1, name: ' ', sex: ' ', age: 15 },
{ id: 2, name: ' ', sex: ' ', age: 16 }
];
//
StuServices.controller("ListController", function ($scope) {
$scope.StudentList = StudentList;
})
// ： （ URL ） id,
StuServices.controller("DetailController", function ($scope, $routeParams) {
$scope.Student = StudentList[$routeParams.id];
})
この記事で皆さんのAnglarJSプログラムの設計に役に立ちますように。