?AngularJSAngularJS 是一個(gè) MV* 框架，

? ? ? ?最適于開(kāi)發(fā)客戶端的單頁(yè)面應(yīng)用。它不是個(gè)功能庫(kù)，而是用來(lái)開(kāi)發(fā)動(dòng)態(tài)網(wǎng)頁(yè)的框架。它專注于擴(kuò)展 HTML 的功能，提供動(dòng)態(tài)數(shù)據(jù)綁定（data binding），而且它能跟其它框架（如 JQuery 等）合作融洽。1. 一個(gè)簡(jiǎn)單示例通過(guò)下面的示例代碼，可以運(yùn)行一個(gè)簡(jiǎn)單的 AngularJS 應(yīng)用：

在輸入框中嘗試輸入：

姓名：

通過(guò)瀏覽器訪問(wèn)該頁(yè)面，在輸入框中輸入的內(nèi)容會(huì)立即顯示在輸入框下面。說(shuō)明：當(dāng)網(wǎng)頁(yè)加載完畢，AngularJS 自動(dòng)運(yùn)行。ng-app 指令告訴 AngularJS ，div 元素是 AngularJS 應(yīng)用程序的"所有者"，相當(dāng)于是個(gè)作用域的概率。ng-model 指令把輸入域的值綁定到應(yīng)用程序變量 name。ng-bind 指令把應(yīng)用程序變量 name 綁定到某個(gè)段落的 innerHTML。2. AngularJS 指令A(yù)ngularJS 指令是擴(kuò)展的 HTML 屬性，帶有前綴 ng- 。HTML5 允許擴(kuò)展的（自制的）屬性，以 data- 開(kāi)頭。AngularJS 屬性以 ng- 開(kāi)頭，但是您可以使用 data-ng- 來(lái)讓網(wǎng)頁(yè)對(duì) HTML5 有效。常見(jiàn)的指令ng-app 指令ng-app 指令初始化一個(gè) AngularJS 應(yīng)用程序。ng-init 指令ng-init 指令初始化應(yīng)用程序數(shù)據(jù)，這個(gè)不常使用。通常情況下，不使用 ng-init。您將使用一個(gè)控制器或模塊來(lái)代替它。ng-model 指令ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。ng-bind 指令ng-bind 指令把應(yīng)用程序數(shù)據(jù)綁定到 HTML 視圖。示例：

在輸入框中嘗試輸入：

姓名：

ng-repeat 指令ng-repeat 指令會(huì)重復(fù)一個(gè) HTML 元素：

循環(huán)對(duì)象：

除此之外，它還提供了幾個(gè)變量可供使用：$index 當(dāng)前索引$first 是否為頭元素$middle 是否為非頭非尾元素$last 是否為尾元素樣式相關(guān)的指令ng-classng-class用來(lái)給元素綁定類名，其表達(dá)式的返回值可以是以下三種：類名字符串，可以用空格分割多個(gè)類名，如 ‘class1 class2’；類名數(shù)組，數(shù)組中的每一項(xiàng)都會(huì)層疊起來(lái)生效；一個(gè)名值對(duì)應(yīng)的map，其鍵值為類名，值為boolean類型，當(dāng)值為true時(shí)，該類會(huì)被加在元素上。與 ng-class 相近的，ng 還提供了ng-class-odd、ng-class-even 兩個(gè)指令，用來(lái)配合 ng-repeat 分別在奇數(shù)列和偶數(shù)列使用對(duì)應(yīng)的類。這個(gè)用來(lái)在表格中實(shí)現(xiàn)隔行換色再方便不過(guò)了。ng-styleng-style 用來(lái)綁定元素的 css 樣式，其表達(dá)式的返回值為一個(gè) js 對(duì)象，鍵為 css 樣式名，值為該樣式對(duì)應(yīng)的合法取值。用法比較簡(jiǎn)單：$scope.style = {color:'red'};

ng-style測(cè)試

ng-style測(cè)試

ng-show、ng-hide、ng-switch對(duì)于比較常用的元素顯隱控制，ng 也做了封裝，ng-show 和 ng-hide 的值為 boolean 類型的表達(dá)式，當(dāng)值為 true 時(shí)，對(duì)應(yīng)的 show 或 hide 生效?？蚣軙?huì)用 display:block 和 display:none 來(lái)控制元素的顯隱。示例：

1

2

3

4

后一個(gè) ng-switch 是根據(jù)一個(gè)值來(lái)決定哪個(gè)節(jié)點(diǎn)顯示，其它節(jié)點(diǎn)移除：

1

2

other

事件指令事件相關(guān)的指令有：ng-changeng-clickng-dblclickng-mousedownng-mouseenterng-mouseleaveng-mousemoveng-mouseoverng-mouseupng-submit對(duì)于事件對(duì)象本身，在函數(shù)調(diào)用時(shí)可以直接使用 $event 進(jìn)行傳遞：

點(diǎn)擊

點(diǎn)擊

$scope.click = function($event){? ? ? ? alert($event.target);? ? ? ? //……………………}　　表單指令表單控件類的模板指令，最大的作用是它預(yù)定義了需要綁定的數(shù)據(jù)的格式。這樣，就可以對(duì)于既定的數(shù)據(jù)進(jìn)行既定的處理。formng 對(duì) form 這個(gè)標(biāo)簽作了包裝，對(duì)應(yīng)的指令是 ng-form。從 ng 的角度來(lái)說(shuō)， form 標(biāo)簽，是一個(gè)模板指令，也創(chuàng)建了一個(gè) FormController 的實(shí)例。這個(gè)實(shí)例就提供了相應(yīng)的屬性和方法。同時(shí)，它里面的控件也是一個(gè) NgModelController 實(shí)例。很重要的一點(diǎn)， form 的相關(guān)方法要生效，必須為 form 標(biāo)簽指定 name 和 ng-controller ，并且每個(gè)控件都要綁定一個(gè)變量。 form 和控件的名字，即是 $scope 中的相關(guān)實(shí)例的引用變量名。

var TestCtrl = function($scope){? $scope.see = function(){? ? console.log($scope.test_form);? ? console.log($scope.test_form.a);? }}除去對(duì)象的方法與屬性， form 這個(gè)標(biāo)簽本身有一些動(dòng)態(tài)類可以使用：ng-valid 當(dāng)表單驗(yàn)證通過(guò)時(shí)的設(shè)置ng-invalid 當(dāng)表單驗(yàn)證失敗時(shí)的設(shè)置ng-pristine 表單的未被動(dòng)之前擁有ng-dirty 表單被動(dòng)過(guò)之后擁有form 對(duì)象的屬性有：$pristine 表單是否未被動(dòng)過(guò)$dirty 表單是否被動(dòng)過(guò)$valid 表單是否驗(yàn)證通過(guò)$invalid 表單是否驗(yàn)證失敗$error 表單的驗(yàn)證錯(cuò)誤其中的 $error 對(duì)象包含有所有字段的驗(yàn)證信息，及對(duì)相關(guān)字段的 NgModelController 實(shí)例的引用。它的結(jié)構(gòu)是一個(gè)對(duì)象， key 是失敗信息， required ， minlength 之類的， value 是對(duì)應(yīng)的字段實(shí)例列表。inputinput 控件的相關(guān)可用屬性為：name 名字ng-model 綁定的數(shù)據(jù)required 是否必填ng-required 是否必填ng-minlength 最小長(zhǎng)度ng-maxlength 最大長(zhǎng)度ng-pattern 匹配模式ng-change 值變化時(shí)的回調(diào)

input 控件，它還有一些擴(kuò)展，這些擴(kuò)展有些有自己的屬性：input type="number" 多了 number 錯(cuò)誤類型，多了 max ， min 屬性。input type="url" 多了 url 錯(cuò)誤類型。input type="email" 多了 email 錯(cuò)誤類型。checkbox是 input 的擴(kuò)展，不過(guò)，它沒(méi)有驗(yàn)證相關(guān)的東西，只有選中與不選中兩個(gè)值：ng-true-value、ng-false-value:

radio也是 input 的擴(kuò)展。和 checkbox 一樣，但它只有一個(gè)值：

textarea同 inputselect它里面的一個(gè)叫做 ng-options 的屬性用于數(shù)據(jù)呈現(xiàn)。

可以加這個(gè)空值

在 $scope 中， select 綁定的變量，其值和普通的 value 無(wú)關(guān)，可以是一個(gè)對(duì)象：

顯示與值分別指定， x.v as x.name for x in o ：

加入分組的， x.name group by x.g for x in o ：

分組了還分別指定顯示與值的， x.v as x.name group by x.g for x in o ：

如果參數(shù)是對(duì)象的話，基本也是一樣的，只是把遍歷的對(duì)象改成 (key, value) ：

還有一些表單控件功能相關(guān)的指令：ng-src src 屬性ng-href href 屬性ng-checked 控制 radio 和 checkbox 的選中狀態(tài)ng-selected 控制下拉框的選中狀態(tài)ng-disabled 控制失效狀態(tài)ng-multiple 控制多選ng-readonly 控制只讀狀態(tài)以上指令的取值均為 boolean 類型，當(dāng)值為 true 時(shí)相關(guān)狀態(tài)生效，道理比較簡(jiǎn)單就不多做解釋。注意：上面的這些只是單向綁定，即只是從數(shù)據(jù)到模板，不能反作用于數(shù)據(jù)。要雙向綁定，還是要使用 ng-model 。3. AngularJS 過(guò)濾器過(guò)濾器（filter）正如其名，作用就是接收一個(gè)輸入，通過(guò)某個(gè)規(guī)則進(jìn)行處理，然后返回處理后的結(jié)果。主要用在數(shù)據(jù)的格式化上，例如獲取一個(gè)數(shù)組中的子集，對(duì)數(shù)組中的元素進(jìn)行排序等。過(guò)濾器通常是伴隨標(biāo)記來(lái)使用的，將你 model 中的數(shù)據(jù)格式化為需要的格式。表單的控制功能主要涉及到數(shù)據(jù)驗(yàn)證以及表單控件的增強(qiáng)。內(nèi)置過(guò)濾器ng 內(nèi)置了一些過(guò)濾器，它們是：currency(貨幣)、date(日期)、filter(子串匹配)、json(格式化json對(duì)象)、limitTo(限制個(gè)數(shù))、lowercase(小寫)、uppercase(大寫)、number(數(shù)字)、orderBy(排序)。過(guò)濾器使用示例：// 使用currency可以將數(shù)字格式化為貨幣，默認(rèn)是美元符號(hào)，你可以自己傳入所需的符號(hào){{num | currency : '￥'}}// 參數(shù)用來(lái)指定所要的格式，y M d h m s E 分別表示 年 月 日 時(shí) 分 秒 星期，你可以自由組合它們。也可以使用不同的個(gè)數(shù)來(lái)限制格式化的位數(shù)。另外參數(shù)也可以使用特定的描述性字符串，例如“shortTime”將會(huì)把時(shí)間格式為12:05 pm這樣的。{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}$scope.func = function(e){return e.age>4;}{{ childrenArray | filter : 'a' }}// filter 過(guò)濾器從數(shù)組中選擇一個(gè)子集：{{ childrenArray | filter : 'a' }} //匹配屬性值中含有a的{{ childrenArray | filter : 4 }}? //匹配屬性值中含有4的{{ childrenArray | filter : {name : 'i'} }} //參數(shù)是對(duì)象，匹配name屬性中含有i的{{childrenArray | filter : func }}? //參數(shù)是函數(shù)　// json過(guò)濾器可以把一個(gè)js對(duì)象格式化為json字符串{{ jsonTest | json}}// 列表截取 limitTo ，支持正負(fù)數(shù){{ childrenArray | limitTo : 2 }} // number過(guò)濾器可以為一個(gè)數(shù)字加上千位分割，像這樣，123,456,789。同時(shí)接收一個(gè)參數(shù)，可以指定float類型保留幾位小數(shù)：{{ num | number : 2 }}// 大小寫 lowercase ， uppercase ：{{ 'abc' | uppercase }}{{ 'Abc' | lowercase }}{{ childrenArray | orderBy : 'age' }}? ? ? //按age屬性值進(jìn)行排序，若是-age，則倒序{{ childrenArray | orderBy : orderFunc }}? //按照函數(shù)的返回值進(jìn)行排序{{ childrenArray | orderBy : ['age','name'] }}? //如果age相同，按照name進(jìn)行排序過(guò)濾器使用方式在模塊中定義過(guò)濾器：var app = angular.module('Demo', [], angular.noop);? app.filter('map', function(){? ? var filter = function(input){? ? ? return input + '...';? ? };? ? return filter;? });然后，在模板中使用：

示例數(shù)據(jù): {{ a | map }}

4. AngularJS Ajax$http 服務(wù)是 AngularJS 的核心服務(wù)之一，它幫助我們通過(guò) XMLHttpRequest 對(duì)象或 JSONP 與遠(yuǎn)程 HTTP 服務(wù)進(jìn)行交流。$http 服務(wù)是這樣一個(gè)函數(shù)：它接受一個(gè)設(shè)置對(duì)象，其中指定了如何創(chuàng)建 HTTP 請(qǐng)求；它將返回一個(gè) promise 對(duì)象，其中提供兩個(gè)方法： success 方法和 error方法。$http.get({url:"/xxx.action"}).success(function(data){? ? alert(data);}).error(function(){? ? alert("error");});$http 接受的配置項(xiàng)有：method 方法url 路徑params GET請(qǐng)求的參數(shù)data post請(qǐng)求的參數(shù)headers 頭transformRequest 請(qǐng)求預(yù)處理函數(shù)transformResponse 響應(yīng)預(yù)處理函數(shù)cache 緩存timeout 超時(shí)毫秒，超時(shí)的請(qǐng)求會(huì)被取消withCredentials 跨域安全策略的一個(gè)東西其中的 transformRequest 和 transformResponse 及 headers 已經(jīng)有定義的，如果自定義則會(huì)覆蓋默認(rèn)定義對(duì)于幾個(gè)標(biāo)準(zhǔn)的 HTTP 方法，有對(duì)應(yīng)的 shortcut ：$http.delete(url, config)$http.get(url, config)$http.head(url, config)$http.jsonp(url, config)$http.post(url, data, config)$http.put(url, data, config)注意其中的 JSONP 方法，在實(shí)現(xiàn)上會(huì)在頁(yè)面中添加一個(gè) script 標(biāo)簽，然后放出一個(gè) GET 請(qǐng)求。你自己定義的，匿名回調(diào)函數(shù)，會(huì)被 ng 自已給一個(gè)全局變量。在定義請(qǐng)求，作為 GET 參數(shù)，你可以使用 JSON_CALLBACK 這個(gè)字符串來(lái)暫時(shí)代替回調(diào)函數(shù)名，之后 ng 會(huì)為你替換成真正的函數(shù)名：var p = $http({? method: 'JSONP',? url: '/json',? params: {callback: 'JSON_CALLBACK'}});p.success(function(response, status, headers, config){? console.log(response);? $scope.name = response.name;});$http 有兩個(gè)屬性：defaults 請(qǐng)求的全局配置pendingRequests 當(dāng)前的請(qǐng)求隊(duì)列狀態(tài)$http.defaults.transformRequest = function(data){? ? console.log('here'); return data;}console.log($http.pendingRequests);5. AngularJS 控制器AngularJS 應(yīng)用程序被控制器控制，控制器是 JavaScript 對(duì)象，由標(biāo)準(zhǔn)的 JavaScript 對(duì)象的構(gòu)造函數(shù) 創(chuàng)建。ng-controller 指令定義了應(yīng)用程序控制器，給所在的 DOM 元素創(chuàng)建了一個(gè)新的 $scope 對(duì)象，并將這個(gè) $scope 對(duì)象包含進(jìn)外層 DOM 元素的 $scope 對(duì)象里。示例如下：

名：

姓：

姓名： {{fullName()}}

function personController($scope) {

$scope.person = {

firstName: "John",

lastName: "Doe",

};

$scope.fullName = function() {

var x;

x = $scope.person;

return x.firstName + " " + x.lastName;

};

}$scope 是一個(gè)把 view（一個(gè)DOM元素）連結(jié)到 controller 上的對(duì)象。在我們的 MVC 結(jié)構(gòu)里，這個(gè) $scope 將成為 model，它提供一個(gè)綁定到DOM元素（以及其子元素）上的excecution context。盡管聽(tīng)起來(lái)有點(diǎn)復(fù)雜，但 $scope 實(shí)際上就是一個(gè)JavaScript 對(duì)象，controller 和 view 都可以訪問(wèn)它，所以我們可以利用它在兩者間傳遞信息。在這個(gè) $scope 對(duì)象里，我們既存儲(chǔ)數(shù)據(jù)，又存儲(chǔ)將要運(yùn)行在view上的函數(shù)。每一個(gè) Angular 應(yīng)用都會(huì)有一個(gè) $rootScope。這個(gè) $rootScope 是最頂級(jí)的 scope，它對(duì)應(yīng)著含有 ng-app 指令屬性的那個(gè) DOM 元素所有scope都遵循原型繼承（prototypal inheritance），這意味著它們都能訪問(wèn)父scope們。6. AngularJS 模塊AngularJS 本身的一個(gè)默認(rèn)模塊叫做 ng ，它提供了 $http ， $q 等等服務(wù)。服務(wù)只是模塊提供的多種機(jī)制中的一種，其它的還有命令（ directive ），過(guò)濾器（ filter ），及其它配置信息。然后在額外的 js 文件中有一個(gè)附加的模塊叫做 ngResource ， 它提供了一個(gè) $resource 服務(wù)。定義模塊定義模塊的方法是使用 angular.module 。調(diào)用時(shí)聲明了對(duì)其它模塊的依賴，并定義了“初始化”函數(shù)。? var my_module = angular.module('MyModule', [], function(){? ? ? console.log('here');? });這段代碼定義了一個(gè)叫做 MyModule 的模塊， my_module 這個(gè)引用可以在接下來(lái)做其它的一些事，比如定義服務(wù)。定義服務(wù)ng的服務(wù)是這樣定義的：Angular services are singletons objects or functions that carry out specific tasks common to web apps.它是一個(gè)單例對(duì)象或函數(shù)，對(duì)外提供特定的功能。首先是一個(gè)單例，即無(wú)論這個(gè)服務(wù)被注入到任何地方，對(duì)象始終只有一個(gè)實(shí)例。其次這與我們自己定義一個(gè)function然后在其他地方調(diào)用不同，因?yàn)榉?wù)被定義在一個(gè)模塊中，所以其使用范圍是可以被我們管理的。ng的避免全局變量污染意識(shí)非常強(qiáng)。ng提供了很多內(nèi)置的服務(wù)，可以到API中查看 http://docs.angularjs.org/api/ 。如同指令一樣，系統(tǒng)內(nèi)置的服務(wù)以$開(kāi)頭，我們也可以自己定義一個(gè)服務(wù)。在這里呢，就要先介紹一下叫 provider 的東西。簡(jiǎn)單來(lái)說(shuō)， provider 是被 注入控制器 使用的一個(gè)對(duì)象，注入機(jī)制通過(guò)調(diào)用一個(gè) provider 的 $get() 方法，把得到的東西作為參數(shù)進(jìn)行相關(guān)調(diào)用（比如把得到的服務(wù)作為一個(gè) Controller 的參數(shù)）。在這里 服務(wù) 的概念就比較不明確，對(duì)使用而言，服務(wù)僅指 $get() 方法返回的東西，但是在整體機(jī)制上，服務(wù)又要指提供了 $get() 方法的整個(gè)對(duì)象。? //這是一個(gè)provider? var pp = function(){? ? this.$get = function(){? ? ? return {'haha': '123'};? ? }? }? //我在模塊的初始化過(guò)程當(dāng)中, 定義了一個(gè)叫 PP 的服務(wù)? var app = angular.module('Demo', [], function($provide){? ? $provide.provider('PP', pp);? });? //PP服務(wù)實(shí)際上就是 pp 這個(gè) provider 的 $get() 方法返回的東西? app.controller('TestCtrl',? ? function($scope, PP){? ? ? console.log(PP);? ? }? );ng 還有相關(guān)的 shortcut， 第一個(gè)是 factory 方法 ，由 $provide 提供， module 的 factory 是一個(gè)引用，作用一樣。這個(gè)方法直接把一個(gè)函數(shù)當(dāng)成是一個(gè)對(duì)象的 $get() 方法，這樣你就不用顯式地定義一個(gè) provider 了：var app = angular.module('Demo', [], function($provide){? ? $provide.factory('PP', function(){? ? ? ? return {'hello': '123'};? ? });});app.controller('TestCtrl', function($scope, PP){ console.log(PP) });在 module 中使用：var app = angular.module('Demo', [], function(){ });app.factory('PP', function(){return {'abc': '123'}});app.controller('TestCtrl', function($scope, PP){ console.log(PP) });第二個(gè)是 service 方法，也是由 $provide 提供， module 中有對(duì)它的同名引用。 service 和 factory 的區(qū)別在于，前者是要求提供一個(gè)“構(gòu)造方法”，后者是要求提供 $get() 方法。意思就是，前者一定是得到一個(gè) object ，后者可以是一個(gè)數(shù)字或字符串。它們的關(guān)系大概是：var app = angular.module('Demo', [], function(){ });app.service = function(name, constructor){? ? app.factory(name, function(){? ? ? return (new constructor());? ? });}service 方法的使用就很簡(jiǎn)單了：var app = angular.module('Demo', [], function(){ });app.service('PP', function(){? ? this.abc = '123';});app.controller('TestCtrl', function($scope, PP){ console.log(PP) });引入模塊并使用服務(wù)結(jié)合上面的 定義模塊 和 定義服務(wù) ，我們可以方便地組織自己的額外代碼：// 定義服務(wù)angular.module('MyModule', [], function($provide){? ? $provide.factory('S1', function(){? ? ? return 'I am S1';? ? });? ? $provide.factory('S2', function(){? ? ? return {see: function(){return 'I am S2'}}? ? });});// 調(diào)用服務(wù)var app = angular.module('Demo', ['MyModule'], angular.noop);app.controller('TestCtrl', function($scope, S1, S2){? ? console.log(S1)? ? console.log(S2.see())});7. 附加模塊 ngResourcengResource 這個(gè)是 ng 官方提供的一個(gè)附加模塊。 附加 的意思就是，如果你打算用它，那么你需要引入一人單獨(dú)的 js 文件，然后在聲明“根模塊”時(shí)注明依賴的 ngResource 模塊，接著就可以使用它提供的 $resource 服務(wù)了。$resource 服務(wù)主要是包裝了 AJAX 的調(diào)用，使用 $resource 需要先定義“資源”，也就是先定義一些 HTTP 請(qǐng)求。TODO8. AngularJS 路由ng的路由(ngRoute)是一個(gè)單獨(dú)的模塊，包含以下內(nèi)容：服務(wù) $routeProvider 用來(lái)定義一個(gè)路由表，即地址欄與視圖模板的映射服務(wù) $routeParams 保存了地址欄中的參數(shù)，例如 {id : 1, name : 'tom'}服務(wù) $route 完成路由匹配，并且提供路由相關(guān)的屬性訪問(wèn)及事件，如訪問(wèn)當(dāng)前路由對(duì)應(yīng)的 controller指令 ngView 用來(lái)在主視圖中指定加載子視圖的區(qū)域定義路由第一步：引入文件和依賴ngRoute 也是一個(gè)附件模塊，故需要在頁(yè)面上引入 angular-route.min.js 并在模塊中注入對(duì) ngRoute 的依賴，如下：var app = angular.module('MyApp', ['ngRoute']);第二步：定義路由表$routeProvider 提供了定義路由表的服務(wù)，它有兩個(gè)核心方法： when(path,route) 和 otherwise(params) ，先看一下核心中的核心 when(path,route)方法。when(path,route) 方法接收兩個(gè)參數(shù):path 是一個(gè) string 類型，表示該條路由規(guī)則所匹配的路徑，它將與地址欄的內(nèi)容($location.path)值進(jìn)行匹配。如果需要匹配參數(shù)，可以在 path 中使用冒號(hào)加名稱的方式，如：path為 /show/:name ，如果地址欄是 /show/tom ，那么參數(shù) name 和所對(duì)應(yīng)的值 tom 便會(huì)被保存在 $routeParams 中，像這樣： {name : tom} 。我們也可以用 * 進(jìn)行模糊匹配，如： /show*/:name 將匹配 /showInfo/tom 。route 參數(shù)是一個(gè) object，用來(lái)指定當(dāng) path 匹配后所需的一系列配置項(xiàng)，包括以下內(nèi)容：controller function 或 string 類型。在當(dāng)前模板上執(zhí)行的 controller 函數(shù)，生成新的 scope；controllerAs string 類型，為 controller 指定別名；template string 或 function 類型，視圖所用的模板，這部分內(nèi)容將被 ngView 引用；templateUrl string 或 function 類型，當(dāng)視圖模板為單獨(dú)的 html 文件或是使用了定義模板時(shí)使用；resolve 指定當(dāng)前 controller 所依賴的其他模塊；redirectTo 重定向的地址。第三步：在主視圖模板中指定加載子視圖的位置只需在模板中簡(jiǎn)單的使用此 ngView 指令: