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',
  });
})