AngularJS視圖

AngularJS支持通過在單個頁面上的多個視圖的單頁應用。要做到這一點AngularJS提供ng-view 和 ng-template指令，以及 $routeProvider 服務。

ng-view

ng-view 標記只是簡單地創建一個佔位符，是一個相應的視圖(HTML或ng-template視圖)，可以根據配置來放置。

使用

定義一個div與ng-view在主模塊中。

ng-template

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

使用

定義類型作爲主模塊中 ng-template 的腳本塊。

$routeProvider

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

使用

定義類型作爲主模塊中 ng-template 的腳本塊。

使用

定義主模塊的腳本塊，並設置路由配置。

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

AngularJS Sample Application

結果

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