Angular1.x使用小結


  之前工作以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

 具體見下篇


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM