【原】AngularJS 视图

　　AngularJS支持通过单个页面上的多个视图单页应用。要做到这一点AngularJS提供了ng-view 、 ng-template 指令和 $routeProvider 服务。

　　ng-view

　　NG-view标记简单地创建一个占位符，其中一个相应的视图(HTML或ng-template视图)，可以根据配置来放置。

　　使用

　　定义主模块使用一个 div 及ng-view。

<div ng-app="mainApp">...   <div ng-view></div></div> 12345复制代码类型：[html]

　　ng-template

　　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> 12345678复制代码类型：[html]

　　$routeProvider

　　$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> 123456789复制代码类型：[html]

　　使用

　　定义脚本块及主模块，并设置路由配置。

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'
   });
   }]);123456789101112131415161718复制代码类型：[html]

　　以下是在上面的例子中要考虑的重点。

　　$ routeProvider定义作为一个函数在mainApp模块的配置下，使用键 '$routeProvider'.

　　$routeProvider定义URL “/addStudent”，然后映射到“addStudent.htm”。addStudent.htm 存在于相同的路径的主html页面。如果HTM网页没有定义，那么NG-模板使用id="addStudent.htm"。我们使用ng-template。

　　"otherwise" 用于设置的默认视图。

　　"controller" 用于为视图设置相应的控制器。