AngularJS通过单个页面上的多个视图支持单页面应用程序.为此,AngularJS提供了ng-view和ng-template指令以及$ routeProvider服务.
ng- view指令只是创建一个占位符,可以根据配置放置相应的视图(HTML或ng-template视图).
在主模块中使用ng-view定义div.
<div ng-app = "mainApp"> ... <div ng-view></div> </div>
ng-template指令用于使用脚本标记创建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是一项关键服务,用于设置URL的配置,使用相应的HTML页面或ng-template,并附加一个控制器.
定义类型为ng-template的脚本块在主模块中.
<div ng-app = "mainApp"> ... <script type = "text/ng-template" id = "addStudent.htm"> <h2> Add Student </h2> {{message}} </script> </div>
使用主模块定义脚本块并设置路由配置.
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' }); }]);
以上几点非常重要,需要考虑上面的例子 :
$ routeProvider被定义为mainApp模块配置下的一个函数,使用key作为'$ routeProvider'.
$ routeProvider.when定义URL"/addStudent",映射到"addStudent.htm". addStudent.htm应与主HTML页面位于同一路径中.如果未定义HTML页面,则需要使用ng-template和id ="addStudent.htm".我们使用了ng-template.
"否则"用于设置默认视图.
"controller"用于为视图设置相应的控制器.
以下示例显示了所有上述指令的使用.
<html> <head> <title>Angular JS Views</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"> </script> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = "mainApp"> <p><a href = "#addStudent">Add Student</a></p> <p><a href = "#viewStudents">View Students</a></p> <div ng-view></div> <script type = "text/ng-template" id = "addStudent.htm"> <h2> Add Student </h2> {{message}} </script> <script type = "text/ng-template" id = "viewStudents.htm"> <h2> View Students </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 = "This page will be used to display add student form"; }); mainApp.controller('ViewStudentsController', function($scope) { $scope.message = "This page will be used to display all the students"; }); </script> </body> </html>
在网络浏览器中打开文件 testAngularJS.htm 并查看结果.