快捷導(dǎo)航

AngularJS 視圖詳解及示例代碼

更新時(shí)間：2016年08月17日 10:13:28 作者：李嘉圖

本文主要介紹AngularJS 視圖，這里整理了相關(guān)知識(shí)，并附代碼示例和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下

AngularJS支持通過(guò)在單個(gè)頁(yè)面上的多個(gè)視圖的單頁(yè)應(yīng)用。要做到這一點(diǎn)AngularJS提供ng-view 和 ng-template指令，以及 $routeProvider 服務(wù)。

ng-view

ng-view 標(biāo)記只是簡(jiǎn)單地創(chuàng)建一個(gè)占位符，是一個(gè)相應(yīng)的視圖(HTML或ng-template視圖)，可以根據(jù)配置來(lái)放置。

使用

定義一個(gè)div與ng-view在主模塊中。

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

</div>

ng-template

ng-template 指令是用來(lái)創(chuàng)建使用script標(biāo)簽的HTML視圖。它包含一個(gè)用于由$routeProvider映射控制器視圖“id”屬性。

使用

定義類(lèi)型作為主模塊中 ng-template 的腳本塊。

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

</div>

$routeProvider

$routeProvider是組網(wǎng)址的配置，將它們映射相應(yīng)的HTML頁(yè)面或 ng-template，并附加一個(gè)控制器使用相同鍵的服務(wù)。

使用

定義類(lèi)型作為主模塊中 ng-template 的腳本塊。

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

</div>

使用

定義主模塊的腳本塊，并設(shè)置路由配置。

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

以下是在上面的例子中需要考慮的重要問(wèn)題

$routeProvider被定義為使用關(guān)鍵字作為'$routeProvider“下mainApp模塊的配置功能；

$routeProvider當(dāng)定義了URL“/addStudent”映射到“addStudent.html”。 addStudent.html應(yīng)存在于相同的路徑主要的html 頁(yè)面。如果htm頁(yè)面沒(méi)有定義，那么ng-template被id=“addStudent.html”使用。我們已經(jīng)使用了ng-template；

“otherwise”是用來(lái)設(shè)置的默認(rèn)視圖；

“conlloer”是用來(lái)設(shè)置該視圖對(duì)應(yīng)的控制器；

例子

下面的例子將展示上述所有指令。

testAngularJS.html

<html>
<head>
  <title>Angular JS Views</title>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/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.html">
     <h2> Add Student </h2>
     {{message}}
   </script>
   <script type="text/ng-template" id="viewStudents.html">
     <h2> View Students </h2>	  
     {{message}}
   </script>	
  </div>

  <script>
   var mainApp = angular.module("mainApp", ['ngRoute']);
   
   mainApp.config(['$routeProvider',
     function($routeProvider) {
      $routeProvider.
        when('/addStudent', {
         templateUrl: 'addStudent.html',
         controller: 'AddStudentController'
        }).
        when('/viewStudents', {
         templateUrl: 'viewStudents.html',
         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>

結(jié)果

在Web瀏覽器中打開(kāi)textAngularJS.html?？吹浇Y(jié)果如下：