前言

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ù)棧可能以vue為主，在此對Angular1.x的使用做一個簡單總結(jié)，這里使用1.5+版本。下面話不多說，來一起看看詳細(xì)的介紹：

基本概念

 1、依賴注入

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

創(chuàng)建一個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){}

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

 2、directive

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

1)指令最基本配置

app.directive(‘dire',function(){return function(){　　return {　　　　template/templateUrl:'', //模版　　　　scope:{} //為true或為對象表示隔離作用域　　　　restrict 'ACEM'//使用方式　　　　link:function(scope,ele,attrs,controllers){}　　　　compile:function(ele,attr){return function(){}}//如果此函數(shù)存在，link函數(shù)會被忽略，因為compile函數(shù)會返回link函數(shù)　　　　}　　}});

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

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

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

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

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

　　<綁定，表示單向綁定

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

3、component

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

4、controller

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