AngularJS - 檢視

AngularJS 透過單頁面上的多個檢視支援單頁面應用程式。為此，AngularJS 提供了 ng-view 和 ng-template 指令以及 $routeProvider 服務。

ng-view 指令

ng-view 指令簡單地建立一個佔位符，根據配置，可以在其中放置相應的檢視（HTML 或 ng-template 檢視）。

用法

在主模組中定義一個帶有 ng-view 的 div。

<div ng-app = "mainApp">
   ...
   <div ng-view></div>

</div>

ng-template 指令

ng-template 指令用於使用 script 標籤建立 HTML 檢視。它包含一個 id 屬性，該屬性由 $routeProvider 用於將檢視與控制器對映。

用法

在主模組中定義一個型別為 ng-template 的 script 塊。

<div ng-app = "mainApp">
   ...
	
   <script type = "text/ng-template" id = "addStudent.htm">
      <h2> Add Student </h2>
      {{message}}
   </script>

</div>

$routeProvider 服務

$routeProvider 是一個關鍵服務，它設定 URL 的配置，將它們與相應的 HTML 頁面或 ng-template 對映，並附加相同的控制器。

用法 1

在主模組中定義一個型別為 ng-template 的 script 塊。

<div ng-app = "mainApp"> 
   ... 
   <script type = "text/ng-template" id = "addStudent.htm"> 
      <h2> Add Student </h2> 
      {{message}} 
   </script>  
</div>

用法 2

定義一個帶有主模組的 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'
   });
	
}]);

在上面的例子中，需要考慮以下幾點：

$routeProvider 在使用鍵“$routeProvider”的 mainApp 模組的 config 中定義為一個函式。
$routeProvider.when 定義了一個 URL "/addStudent"，它對映到 "addStudent.htm"。addStudent.htm 應該與主 HTML 頁面位於相同的路徑。如果未定義 HTML 頁面，則需要使用 id="addStudent.htm" 的 ng-template。我們使用了 ng-template。
"otherwise" 用於設定預設檢視。
"controller" 用於為檢視設定相應的控制器。

示例

以下示例展示了所有上述指令的用法。

testAngularJS.htm

線上演示

<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>

輸出

在 Web 瀏覽器中開啟檔案 testAngularJS.htm 並檢視結果。

列印頁面