angularJS 視圖view

AngularJS支持通過在單個頁面上的多個視圖的單頁應用。要做到這一點AngularJS提供ng-view 和 ng-template指令，以及 $routeProvider 服務。

ng-view

開啟視圖，只是一個占位符，沒有值  例：<div ng-view></div>

ng-template

創建視圖，通過script標簽，類型為ng-template，包含了一個$routeProvider映射控制的id屬性，id指向一個html頁面

$routeProvider

 

主要網址的配置，是一個angular對象，將他們映射相應的html頁面或者ng-template

使用

 var app = angular.module("app", ['ngRoute']);
      
  app.config(['$routeProvider',
         function($routeProvider) {
            $routeProvider.
               when('/addStudent', {
                  templateUrl: 'addStudent.html',
                  controller: 'AddStudentController'
               }).
               when('/viewStudents', {
                  templateUrl: 'viewStudents.html',
                  controller: 'ViewStudentsController'
               }).
               otherwise({
                  redirectTo: '/addStudent'
               });
         }]);

 

 通過config來配置，配置項為數組，回調函數的參數為$routeProvider,利用$routeProvider的when方法，參數1為請求路徑，參數2為對象

包含了templateURL指向視圖，controller為該視圖的的控制器，otherwise 指向默認視圖，如果頁面不存在，渲染視圖可以用template：（標簽+內容）