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自己，而是会通过事件发回自己的组件。

     
     
  
     Delete
  

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

  . $onInit() --

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