如今前端界angular react vue三大框架并駕齊驅(qū),其中有一個共同點就是組件化開發(fā),這也符合w3c 推行Web Components的趨勢?,F(xiàn)如今不懂組件化開發(fā)的前端絕對不是好廚子。跳槽新公司pc端使用angular1.5的Components比較多,趁著入職前幾天自己看一下。
由于angular2.0學(xué)習(xí)曲線比較陡峭(對于我這種菜雞來說),為了讓開發(fā)者平穩(wěn)的從angular1.x 版本過渡到angular2,所以angular1.5中引入了components,需要注意的是所有components能實現(xiàn)的功能directive都能實現(xiàn)。 順便說一句1.5之前的directive感覺有點混亂,既包括指令又包括組件(我自己感覺指令是不應(yīng)該有dom結(jié)構(gòu)的,而組件是應(yīng)該有的)
介紹
angular1.5 Components比較適合組件化編程架構(gòu)的程序,相比于之前的指令有以下幾個優(yōu)點。
1.比指令的配置更加簡單
2.自帶默認配置使之符合最佳實踐
3.更適合組件化架構(gòu)的程序
4.使用Components更符合angular發(fā)展的趨勢
當(dāng)然有些情況下不要使用Components
1.當(dāng)你想使用compile和pre-link這兩個鉤子時,因為components不包含這兩個鉤子,所以component無法用于操作DOM。
2.當(dāng)你想作為屬性或者css類名調(diào)用時,components只能作為自定義的HTML元素調(diào)用
使用
定義一個組件
function HeroDetailController($scope) { console.log($scope) // console.log(this.hero)} angular.module('heroApp').component('heroDetail', { templateUrl: './heroDetail.html', controller:['$scope',HeroDetailController] , bindings: { hero: '=' } });
調(diào)用組件(只能作為自定義的HTML元素調(diào)用)
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26