AngularJS 視圖詳解及範例程式碼

AngularJS 視圖詳解及範例程式碼_AngularJS

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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>

ng-template

ng-template 指令是用來建立使用script標籤的HTML視圖。它包含一個用於由$routeProvider映射控制器視圖“id”屬性。

使用

定義類型作為主模組中 ng-template 的指令碼塊。

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

$routeProvider

$routeProvider是組網址的配置，將它們映射相應的HTML頁面或 ng-template，並附加一個控制器使用相同鍵的服務。

使用

定義類型作為主模組中 ng-template 的指令碼塊。

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

使用

定義主模組的指令碼塊，並設定路由配置。

 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'        });     }]);

以下是在上面的例子中需要考慮的重要問題

$routeProvider被定義為使用關鍵字作為'$routeProvider“下mainApp模組的配置功能；

$routeProvider當定義了URL“/addStudent”映射到“addStudent.html”。 addStudent.html應存在於相同的路徑主要的html 頁面。如果htm頁面沒有定義，那麼ng-template被id=“addStudent.html”使用。我們已經使用了ng-template；

“otherwise”是用來設定的預設視圖；

“conlloer”是用來設定該視圖對應的控制器；

例子

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

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>

結果

在Web瀏覽器中開啟textAngularJS.html。看到結果如下：

以上就是對AngularJS 視圖資料的整理，後續繼續補充相關資料，謝謝大家對本站的支援！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More