前言

angular1.x作為經(jīng)典的mvc框架，可以創(chuàng)建能夠復(fù)用的組件,也可進(jìn)行雙向數(shù)據(jù)綁定。國內(nèi)的vue.js/avaloon.js都是同類型的框架，之前工作以Angular1.x為主，主要做業(yè)務(wù)系統(tǒng)，以后工作中技術(shù)?？赡芤詖ue為主，在此對(duì)Angular1.x的使用做一個(gè)簡單總結(jié)，這里使用1.5+版本。下面話不多說，來一起看看詳細(xì)的介紹：

基本概念

 1、依賴注入

依賴注入，在angular中到處可見，這里不會(huì)照本宣科，只以很直白的方式的簡單描述基本使用方式，以$scope注入為例。

創(chuàng)建一個(gè)controller，注入$scope,有三種寫法：

1)隱式注入

function HomeController($scope){};

2)內(nèi)聯(lián)注入

app.controller('HomeController',['$scope',function($scope){ }])

3)顯式注入

app.controller(‘HomeController',HomeController);

HomeController.$inject=[‘$scope'];

function HomeController($scope){

}

注意：由于第一種注入方式，是通過對(duì)函數(shù)做toString操作，然后使用正則匹配出參數(shù)名稱，來實(shí)現(xiàn)注入，所以這種方式不能對(duì)代碼進(jìn)行壓縮混淆處理。

 2、directive

指令系統(tǒng)，我認(rèn)為是angular1.x版本中最強(qiáng)大也是最復(fù)雜的部分，angular作者本身做后端出身，所以在整個(gè)指令周期也符合語言處理過程：經(jīng)過編譯（compile函數(shù)，會(huì)返回link函數(shù)）、鏈接處理（link函數(shù)）。

1)指令最基本配置

app.directive(‘dire',function(){

return function(){

　　return {

　　　　template/templateUrl:'', //模版

　　　　scope:{} //為true或?yàn)閷?duì)象表示隔離作用域

　　　　restrict 'ACEM'//使用方式

　　　　link:function(scope,ele,attrs,controllers){}

　　　　compile:function(ele,attr){return function(){}}//如果此函數(shù)存在，link函數(shù)會(huì)被忽略，因?yàn)閏ompile函數(shù)會(huì)返回link函數(shù)

　　　　}

　　}

});

2)關(guān)于綁定策略

獨(dú)立作用域父子作用域之間交換數(shù)據(jù)的方式，主要有三種（或說四種）

　　@綁定，指令屬性的值可以使用表達(dá)式，但是得出來的值一定是字符串；

　　&綁定，表示引用綁定，主要綁定父作用域中函數(shù)，實(shí)現(xiàn)關(guān)注點(diǎn)的注入

　　=綁定，表示雙向數(shù)據(jù)綁定

　　<綁定，表示單向綁定

注意：對(duì)于&綁定的使用，主要是為了實(shí)現(xiàn)子作用域到父作用域的傳遞，個(gè)人比較喜歡vue中父子交互的方式：props in，event out。所以這里我一般使用 scope.$emit(‘xxx',data),來實(shí)現(xiàn)子傳父。

3、component

component是1.5+新增的方法，主要為了往angular2+的過度更自然一些，相當(dāng)于指令restrict：'E'的簡化，類似于vue中的component，不建議操作dom，一般只用于渲染，建議構(gòu)建pure component。

4、controller

controller可以認(rèn)為是一個(gè)封裝程序邏輯的地方，這里和后端mvc中controller的作用類似，拿到modal，渲染模版，在angular中$scope是連接controller和view的橋梁，$scope是實(shí)現(xiàn)數(shù)據(jù)綁定的基礎(chǔ)，詳見文檔，這里不再贅述。

controller創(chuàng)建方式，主要分為靜態(tài)工廠方法注冊和動(dòng)態(tài)注冊:

1)靜態(tài)注冊：

app.controller(‘HomeController',function(){})

2)動(dòng)態(tài)注冊：

$controllerProvider.register(“HomeController”,function(){})

注意：動(dòng)態(tài)注冊是實(shí)現(xiàn)按需加載的基礎(chǔ)，在項(xiàng)目結(jié)構(gòu)實(shí)戰(zhàn)模塊會(huì)基于requirejs 來演示怎么實(shí)現(xiàn)動(dòng)態(tài)按需加載controller（當(dāng)然也可以使用oclazyload模塊實(shí)現(xiàn)按需加載）。

5、service

service一般是封裝通用代碼，所謂通用代碼一般是跨controller／directive等使用的代碼，所以經(jīng)常用來封裝ajax接口訪問、工具接口等。

service創(chuàng)建方式有三種：

　　1)、provider最原始的創(chuàng)建方式，可以注入到config中，加上provider后綴，有固定格式，必須返回$get函數(shù)

　　2)、factory是對(duì)provider的封裝，直接返回對(duì)象即可

　　3)、service是最簡單的創(chuàng)建方式，通過傳遞構(gòu)造函數(shù)來創(chuàng)建服務(wù)。

6、filter

過濾器主要實(shí)現(xiàn)對(duì)象的格式化

7、router

內(nèi)置路由模塊ngRoute，用的較少，主要因?yàn)闊o法實(shí)現(xiàn)復(fù)雜路由比如嵌套，多層等，當(dāng)然也可以結(jié)合ng-include實(shí)現(xiàn)類似效果，推薦使用第三方路由模塊ui-router，ui-router是基于state的一種路由框架，是使用最多的一種路由模式。

總結(jié)

以上就是這篇文章的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。