Angular 组件

1.理解组件

组件是一种特殊的指令，使用更简单的配置项来构建基于组件的应用程序架构这样他能简单地写app，通过类似的web Component 或者angular2的样式。web Component 是一个规范。马上就要成为标准。
应用组件的优点：
比普通指令配置还简单
提供更好的默认设置和最好的实践
对基于组建的应用架构更优化。
对angular2的升级更平滑。

不用组建的情况:
对那些在 compile或者pre-link阶段要执行操作的指令，组件不能用，因为无法到达那个阶段。
如果你想定义指令的 priority，terminal，multi-element，也不能用。
组件只能通过元素标签触发，其他的只能用命令。

2.创建和配置组件

组件可以用.component 注册（在 angular.module 创建的module）。这个方法有两个参数
组件名称
组件配置对象（和指令的区别，一个是工厂方法，一个是对象）

3.基于组件的应用程序架构

经常说，用组件构建基于组件的应用程序简单方便。
组件只控制视图和数据：组件永远不应该修改作用域之外的DOM或数据。在angular中可以任意修改任何地方的数据，因为scope是原型继承和观察的。这个是实践出来的，但是，导致的问题是你根本不清楚程序中哪一部分负责修改数据。
组件有一个定义很好的公共api--输入和输出。然而隔离的作用域能力有限，因为angular使用双向绑定。所以如果你传递一个对象到组件，用这种方式bindings:{item:'='}，修改一个属性，这个改变就会反射到父级组件里面。对组件来说，只有组建自己的数据自己才能修改，这样数据一旦修改，就可以很容易找到是谁修改的。基于这个原因，组件应该遵循一些简单的规范： .输入应该使用 < 和 @ bindings. <表示单向绑定，和 = 的区别是单向绑定的不被watch。这样，你在内部修改的属性不会更新父级scope。普遍的规则是永远不要改变scope中的对象或者数组属性。@bindings 用在输入时字符串，尤其是这个值不会改变的情况。

    bindings:{            
      hero: '<',            
      comment: '@'    
 }
 //输入 & 符号绑定。来应用外部回调函数
    bindings:{            
      onDelete: '&',          
      onUpdate: '&'     
 }
    //代替操作输入数据，组件调用正确的输出事件和改变的数据，对删除来说，组件不会删除 hero自己，而是会通过事件发回自己的组件。
     <!-- note that we use kebab-case for bindings in the template as usual -->     
     <editable-field on-update="$ctrl.update('location', value)"></editable-field>
    <button ng-click="$ctrl.onDelete({hero: $ctrl.hero})">Delete</button>

组件有一个很好的声明之后。每个组件都实现了生命周期钩子。这些钩子就是这个组件在某个生命周期调用的方法。组件实现了下面的一些钩子方法:

. $onInit() --

一个应用程序是一个组件的树 理想情况下，整个程序都应是一个组件树。这个树定义了很清晰的输入和输出。并且缩减双向绑定到最少，这样组件的数据和状态更清晰，能很好预测、判断。