angular1.5 Components

如今前端界angular react vue三大框架并駕齊驅(qū)，其中有一個共同點就是組件化開發(fā),這也符合w3c 推行Web Components的趨勢?，F(xiàn)如今不懂組件化開發(fā)的前端絕對不是好廚子。跳槽新公司pc端使用angular1.5的Components比較多，趁著入職前幾天自己看一下。
由于angular2.0學習曲線比較陡峭（對于我這種菜雞來說）,為了讓開發(fā)者平穩(wěn)的從angular1.x 版本過渡到angular2,所以angular1.5中引入了components，需要注意的是所有components能實現(xiàn)的功能directive都能實現(xiàn)。 順便說一句1.5之前的directive感覺有點混亂，既包括指令又包括組件（我自己感覺指令是不應該有dom結(jié)構(gòu)的，而組件是應該有的）

介紹

angular1.5 Components比較適合組件化編程架構(gòu)的程序，相比于之前的指令有以下幾個優(yōu)點。
1.比指令的配置更加簡單
2.自帶默認配置使之符合最佳實踐
3.更適合組件化架構(gòu)的程序
4.使用Components更符合angular發(fā)展的趨勢
當然有些情況下不要使用Components
1.當你想使用compile和pre-link這兩個鉤子時，因為components不包含這兩個鉤子，所以component無法用于操作DOM。
2.當你想作為屬性或者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)用）

        		
網(wǎng)友評論