之前工作以Angular1.x為主,主要做業務系統,以后工作中技術棧可能以vue為主,在此對Angular1.x的使用做一個簡單總結,這里使用1.5+版本。
基本概念
1、依賴注入
依賴注入,在angular中到處可見,這里不會照本宣科,只以很直白的方式的簡單描述基本使用方式,以$scope注入為例。
創建一個controller,注入$scope,有三種寫法:
1)隱式注入
function HomeController($scope){};
2)內聯注入
app.controller('HomeController',['$scope',function($scope){ }])
3)顯式注入
app.controller(‘HomeController’,HomeController); HomeController.$inject=[‘$scope’]; function HomeController($scope){ }
注意:由於第一種注入方式,是通過對函數做toString操作,然后使用正則匹配出參數名稱,來實現注入,所以這種方式不能對代碼進行壓縮混淆處理。
2、directive
指令系統,我認為是angular1.x版本中最強大也是最復雜的部分,angular作者本身做后端出身,所以在整個指令周期也符合語言處理過程:經過編譯(compile函數,會返回link函數)、鏈接處理(link函數)。
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(){}}//如果此函數存在,link函數會被忽略,因為compile函數會返回link函數 } } });
2)關於綁定策略
獨立作用域父子作用域之間交換數據的方式,主要有三種(或說四種)
@綁定,指令屬性的值可以使用表達式,但是得出來的值一定是字符串;
&綁定,表示引用綁定,主要綁定父作用域中函數,實現關注點的注入
=綁定,表示雙向數據綁定
<綁定,表示單向綁定
注意:對於&綁定的使用,主要是為了實現子作用域到父作用域的傳遞,個人比較喜歡vue中父子交互的方式:props in,event out。所以這里我一般使用 scope.$emit(‘xxx’,data),來實現子傳父。
3、component
component是1.5+新增的方法,主要為了往angular2+的過度更自然一些,相當於指令restrict:’E’的簡化,類似於vue中的component,不建議操作dom,一般只用於渲染,建議構建pure component。
4、controller
controller可以認為是一個封裝程序邏輯的地方,這里和后端mvc中controller的作用類似,拿到modal,渲染模版,在angular中$scope是連接controller和view的橋梁,$scope是實現數據綁定的基礎,詳見文檔,這里不再贅述。
controller創建方式,主要分為靜態工廠方法注冊和動態注冊:
1)靜態注冊:
app.controller(‘HomeController’,function(){})
2)動態注冊:
$controllerProvider.register(“HomeController”,function(){})
注意:動態注冊是實現按需加載的基礎,在項目結構實戰模塊會基於requirejs 來演示怎么實現動態按需加載controller(當然也可以使用oclazyload模塊實現按需加載)。
5、service
service一般是封裝通用代碼,所謂通用代碼一般是跨controller/directive等使用的代碼,所以經常用來封裝ajax接口訪問、工具接口等。
service創建方式有三種:
1)、provider最原始的創建方式,可以注入到config中,加上provider后綴,有固定格式,必須返回$get函數
2)、factory是對provider的封裝,直接返回對象即可
3)、service是最簡單的創建方式,通過傳遞構造函數來創建服務。
6、filter
過濾器主要實現對象的格式化
7、router
內置路由模塊ngRoute,用的較少,主要因為無法實現復雜路由比如嵌套,多層等,當然也可以結合ng-include實現類似效果,推薦使用第三方路由模塊ui-router,ui-router是基於state的一種路由框架,是使用最多的一種路由模式。
項目實戰
requirejs + ui-router+ angular
具體見下篇