angular1.5 component經常使用配置

在1.5版本以前angular尚未component組件，若是想要應用組件化需得使用directive自定義指令。相比於directive，component的配置更簡潔
1.建立配置component
使用.component() 此方法接收連個參數第一個參數爲component名稱，第二個參數是能夠配置相關項的object
app.componen('test',{})
2.參數配置

bindings: {
  hero: '<',
  comment: '@',
  onDelete: '&',
  hero1:'=',
}

'<' -- 單項值傳遞 組件改變不影響父組件的值 父組件在使用時傳遞變量
'=' -- 值傳遞 組件值改變會影響父組件值 父組件在使用時傳遞變量
'@' -- 字符串傳遞 父組件在使用時傳遞字符串
'&' -- 方法
使用

<just-test on-update="$ctrl.onDelete()" hero="hero"></just-test>

注意駝峯命名

templateUrl:''
template: `<div>test</div>`,

此配置項爲組件使用的html文件

transclude: true,

在組件中預留空位 能夠在父組件中填充

預留位置方法

<div ng-transclude></div>

填充方法

<just-test title="World">
    <h4>Hello World</h4>
 </just-test>

controller: function() {
    this.user = {name: 'world'};
  }

此配置項能夠配置

controller爲組件的做用域可在方法中配置變量與方法等 能夠使用類class 代替此fn

controller: Test
class Test {
    constructor('$http') {
        
    }
    $onInit() {}
    $onChanges(currentValue,previousValue,isFirstChange) {}
    $onDestroy() {}
}
Test.$inject = ['$http']

能夠注入angular的各類內置依賴
內置生命週期函數 onInit能夠初始化一些配置（對於傳入的變量 在controller初始化後仍是取不到 在此函數中則能夠取到）
$onChanges接收三個參數 isFirstChange 參數爲函數

component不只能夠做爲子組件使用 也能夠配置router單獨使用

.config($stateProvider => {
  $stateProvider.state({
    name: 'test',
    url: '/test',
    component: 'test',
  });
})