Angular 1.1 创建组件，并进行数据绑定[单向，双向]

1.创建名为heroes的组件。

运行命令：ng generate component heroes

可以看到新的组件已经创建成功，heroes文件夹中，已有四个文件。

heroes.component.css  样式文件

heroes.component.html  页面文件

heroes.component.spec.ts  单元测试文件

heroes.component.ts  逻辑文件

这里的逻辑文件中会默认生成一些结构代码，我们看下。

@Component 是一个装饰器函数，它指定组件的Angular元数据。

CLI生成了三个元数据属性：

1. selector- 组件的CSS元素选择器
2. templateUrl- 组件模板文件的位置。
3. styleUrls- 组件的私有CSS样式的位置。

4. 在CSS元素选择器， 'app-heroes'是相匹配的标识父组件模板内此组件的HTML元素的名称。

   这ngOnInit是一个生命周期的钩子。ngOnInit创建组件后不久就会进行Angular调用。

2.进行单向数据绑定【只读】。

    1.首先我们在app.component.html中添加heroes组件。

      

    2.我们在heroes.component.ts 中添加一个属性heroesName。

     

    3.我们在heroes.component.html 中添加显示标签<p></p>。

    

    4.我们在heroes.component.css中，为<p>标签加一个样式吧。

    

    5.运行命令：ng serve --open,效果如下。

    

3.进行双向数据绑定【可读可写】。

    1.这下我们绑定一个对象（类），新创建hero.ts类，进行绑定。

     

    2.我们在heroes.component.ts中引用hero.ts类，并在初始化的时候给它赋值。

      

    3.我在页面heroes.component.html进行绑定。

     

      uppercase插值绑定中的单词，在管道运算符（|）之后，**内置函数UppercasePipe。

      管道是格式化字符串，货币金额，日期和其他显示数据的好方法。角船配有多个内置管道，您可以创建自己的管道。

      [（ngModel）]是Angular的双向数据绑定语法。

    4.虽然[（ngModel）]是有效的Angular指令，但默认情况下不可用，它属于可选项FormsModule，必须选择使用它。

       我们打开app.module.ts引用FormsModule。

      

    5.运行命令ng serve --open,效果如下：