AngularJS通過單個頁面上的多個視圖來支持單頁應(yīng)用程序(Single Page Application)。為此，AngularJS提供了ng-view和ng-template指令以及$routeProvider服務(wù)。
ng-view指令僅創(chuàng)建一個占位符，可根據(jù)配置在其中放置相應(yīng)的視圖（HTML或ng-template視圖）。
在主模塊中使用ng-view定義div。
<div ng-app = "mainApp"> ... <div ng-view></div></div>
ng-template指令用于使用腳本標(biāo)簽創(chuàng)建HTML視圖。它包含id屬性，該屬性由$routeProvider用來與控制器映射視圖。
在主模塊中將腳本塊定義為ng-template。
<div ng-app = "mainApp">
...
<script type = "text/ng-template" id = "addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
</div>$routeProvider是一項(xiàng)關(guān)鍵服務(wù)，它可以設(shè)置URL的配置，將它們與相應(yīng)的HTML頁面或ng-template映射，并為其附加控制器。
在主模塊中將腳本塊定義為ng-template。
<div ng-app = "mainApp">
...
<script type = "text/ng-template" id = "addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
</div>使用主模塊定義腳本塊并設(shè)置路由配置。
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/addStudent', {
templateUrl: 'addStudent.htm', controller: 'AddStudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController'
})
.otherwise ({
redirectTo: '/addStudent'
});
}]);在上述示例中，以下幾點(diǎn)很重要-
$routeProvider定義為mainApp模塊配置下的一個函數(shù)，使用鍵為'$routeProvider'。
$routeProvider.when定義URL“/addStudent”，該URL映射到“ addStudent.htm”。addStudent.htm應(yīng)該與HTML主頁面位于相同的路徑中。如果未定義HTML頁面，則需要將ng-template與id ="addStudent.htm"一起使用。我們使用了ng-template。
“otherwise”用于設(shè)置默認(rèn)視圖。
“controller”用于為視圖設(shè)置相應(yīng)的控制器。
以下示例顯示了所有上述指令的使用。
<html>
<head>
<title>Angular JS Views</title>
<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular-route.min.js">
</script>
</head>
<body>
<h2>AngularJS-視圖應(yīng)用示例</h2>
<div ng-app = "mainApp">
<p><a href = "/run/angularjs-views-1.html#addStudent" target="_self">新增學(xué)生</a></p>
<p><a href = "/run/angularjs-views-1.html#viewStudents" target="_self">查看學(xué)生</a></p>
<div ng-view></div>
<script type = "text/ng-template" id = "addStudent.htm">
<h2>新增學(xué)生</h2>
{{message}}
</script>
<script type = "text/ng-template" id = "viewStudents.htm">
<h2>查看學(xué)生</h2>
{{message}}
</script>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
})
.otherwise({
redirectTo: '/addStudent'
});
}]);
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "此頁面將用于顯示添加學(xué)生表格";
});
mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "此頁面將用于顯示所有學(xué)生";
});
</script>
</body>
</html>測試看看?/?輸出結(jié)果
在網(wǎng)絡(luò)瀏覽器中打開文件testAngularJS.htm并查看結(jié)果。