angular2学习笔记（1）

对象的使用：

可以看一下Angular2.0的官网给出的Demo https://angular.io

英雄联盟APP开发：

在Hello angular学习之后，在Hello angular 基础上学习如何开发难度大一点的应用。 拷贝上一节的Hello angular目录内容到新目录 angular-two。拷贝完成后 使用 cnpm start 命令运行一下 看是否可以正常运行。

D:\angular2\angular-two>npm start

在AppComponent中增加2个属性 title和hero 代码如下：

export class AppComponent { 
    public title = '英雄联盟';
    public hero = '法外狂徒';
}

修改一下组件中Template中的代码，看一下绑定的数据

template: '
{{title}}
{{hero}} details!
'

Hero 对象:

上面的hero只是一个字符串，如果hero需要更多的属性，我们把字符串更改为interface来定义，定义interface对象的代码写在最上面。例如：

interface Hero {
  id: number;
  name: string;
}

当需要除简单类型之外的对象时，需要用到interface或者class，当一个类带有逻辑或者运行状态的时候需要定义为class,当只是检查类型匹配，interface足以，而且轻量级。
现在定义了一个Hero对象，替换一下原来的hero的内容，修改一下template的内容，

新的app.component.ts代码如下

import {Component} from 'angular2/core';

interface Hero {
  id: number;
  name: string;
}

@Component({
    selector: 'my-app',
    template: '
{{title}}
{{hero.name}}
id: {{hero.id}}
name: {{hero.name}}
'
})
export class AppComponent { 
    public title = '英雄联盟';
      public hero: Hero = {
        id: 1,
        name: '法外狂徒'
    };
}

如果是多行的template，需要使用` （顿号）包裹。例如：

@Component({
    selector: 'my-app',
    template: `
    
{{title}}
    
{{hero.name}}
    
id: {{hero.id}}
    
name: {{hero.name}}
    `
})

hero的name如果需要编辑 使用input进行替换，重构一下代码：

template:`
  
{{title}}
  
{{hero.name}} 
  
id: {{hero.id}}
  

    name: 
    

  
  `

如果需要input里面的内容和h2的内容联动，当input里面的内容更改时，h2上的内容也跟着更改。需要使用angular的ngModel进行双向数据绑定。

 [(ngModel)]="hero.name"  placeholder="name">

查看浏览器 发现 input里面输入什么, h2显示什么，这样就相互联动起来了。
下面是app.component.ts完整代码：

import {Component} from 'angular2/core';

interface Hero {
  id: number;
  name: string;
}

@Component({
    selector: 'app-root',
    template: `
    
{{title}}
    
{{hero.name}} 
    
id: {{hero.id}}
    

         name: 
         

               
         
     
      `
})
export class AppComponent { 
    public title = '英雄联盟';
      public hero: Hero = {
        id: 1,
        name: '法外狂徒'
    };
}

后续更新 敬请期待！