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

成都創(chuàng)新互聯(lián)公司是專業(yè)的來鳳網(wǎng)站建設公司，來鳳接單;提供成都網(wǎng)站設計、網(wǎng)站建設,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行來鳳網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

基本概念

 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)注入，所以這種方式不能對代碼進行壓縮混淆處理。

 2、directive

指令系統(tǒng)，我認為是angular1.x版本中最強大也是最復雜的部分，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ù)的方式，主要有三種（或說四種）

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

&綁定，表示引用綁定，主要綁定父作用域中函數(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+的過度更自然一些，相當于指令restrict：'E'的簡化，類似于vue中的component，不建議操作dom，一般只用于渲染，建議構(gòu)建pure component。

4、controller

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

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

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

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

2)動態(tài)注冊：

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

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

5、service

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

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

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

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

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

6、filter

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

7、router

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

以上是“Angular 1.x個人使用的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文名稱：Angular1.x個人使用的示例分析-創(chuàng)新互聯(lián)
分享URL：http://chinadenli.net/article36/hhopg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供響應式網(wǎng)站、網(wǎng)站建設、商城網(wǎng)站、微信公眾號、電子商務、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)