Angular 1.x個人使用的示例分析

這篇文章主要為大家展示了“Angular 1.x個人使用的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Angular 1.x個人使用的示例分析”這篇文章吧。

基本概念

 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的一種路由框架，是使用最多的一種路由模式。

以上是“Angular 1.x個人使用的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！