DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 簡介AngularJS的視圖功能應用
簡介AngularJS的視圖功能應用
編輯:JavaScript綜合知識     

   這篇文章主要介紹了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。看到結果如下:

2015617104059841.jpg (560×429)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved