首頁 > 開發者 > JavaScript
簡介AngularJS的視圖功能應用
這篇文章主要介紹了AngularJS的視圖功能應用,包括ng-view和ng-template以及$routeProvider的使用，以及 $routeProvider 需要的朋友可以參考下
AngularJS支援通過在單個頁面上的多個視圖的單頁應用。要做到這一點AngularJS提供ng-view 和 ng-template指令，以及 $routeProvider 服務。
ng-view
ng-view 標記只是簡單地建立一個預留位置，是一個相應的視圖(HTML或ng-template視圖)，可以根據配置來放置。
使用
定義一個div與ng-view在主模組中。
?
| 1 2 3 4 5 |
<div ng-app="mainApp"> ... <div ng-view></div>
</div> |
ng-template
ng-template 指令是用來建立使用script標籤的HTML視圖。它包含一個用於由$routeProvider映射控制器視圖“id”屬性。
使用
定義類型作為主模組中 ng-template 的指令碼塊。
?
| 1 2 3 4 5 6 7 8 |
<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 的指令碼塊。
?
| 1 2 3 4 5 6 7 8 |
<div ng-app="mainApp"> ... <script type="text/ng-template" id="addStudent.html"> <h2> Add Student </h2> {{message}} </script>
</div> |
使用
定義主模組的指令碼塊，並設定路由配置。
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<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。看到結果如下：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
