angular2.0学习笔记

所有学习笔记内容均来自： https://angular.cn/docs/ts/latest/guide/architecture.html

AngularJs架构

这个架构图展现了 Angular 应用中的 8 个主要构造块：

• 模块 (module)

• 组件 (component)

• 模板 (template)

• 元数据 (metadata)

• 数据绑定 (data binding)

• 指令 (directive)

• 服务 (service)

• 依赖注入 (dependency injection)

1.Module 

Angular 模块（无论是 根模块 还是 特性模块 ）都是一个带有 @NgModule 装饰器的类。

NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：

• declarations - 声明本模块中拥有的视图类。 Angular 有三种视图类：组件、指令和管道。

• exports - declarations 的子集，可用于其它模块的组件模板。

• imports - 本模块声明的组件模板需要的类所在的其它模块。

• providers - 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。

• bootstrap - 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。

• 
  

  heroes: Hero[];
   selectedHero: Hero;
  

  ngOnInit() {
      this.heroes = this.service.getHeroes();
    }
  

  标签就是一个用来表示新组件HeroDetailComponent的自定义元素。

  数据绑定

• {{hero.name}}

• • {{hero.name}}插值表达式在

  • 标签中显示组件的hero.name属性的值。

  • [hero]属性绑定把父组件HeroListComponent的selectedHero的值传到子组件HeroDetailComponent的hero属性中。

  • (click) 事件绑定在用户点击英雄的名字时调用组件的selectHero方法。

  • 双向数据绑定是重要的第四种绑定形式，它使用ngModel指令组合了属性绑定和事件绑定的功能。

ps：DOM 定义了访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

指令 (directive)

组件是一个 带模板的指令， 虽然 严格来说组件就是一个指令 ，但是组件非常独特，并在 Angular 中位于中心地位，所以在架构概览中，我们把组件从指令中独立了出来。

还有两种 其它 类型的指令： 结构型 指令和 属性 (attribute) 型 指令。

两个内置的结构型指令：

• *ngFor="let hero of heroes">

• 
   *ngIf="selectedHero">
  

  • *ngFor告诉 Angular 为heroes列表中的每个英雄生成一个

  • 标签。

  • *ngIf表示只有在选择的英雄存在时，才会包含HeroDetail组件。

属性型  指令修改一个现有元素的外观或行为。 在模板中，它们看起来就像是标准的 HTML 属性，故名。

ngModel 指令就是属性型指令的一个例子，它实现了双向数据绑定。  ngModel 修改现有元素（一般是 ）的行为：设置其显示属性值，并响应 change 事件。

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

服务

Service 类，用于获取英雄数据，并通过一个已解析的 承诺 (Promise)  返回它们

getVim(vimId: string): Observable {

    return this.http.get('/api/extsys/v1/cloud/vim/' + vimId)

      .map((res: Response) => res.json())

      .catch(this.handleError);

  }

modifyVim(vim: Vim): Observable {

    let headers = new Headers({'Content-Type': 'application/json'});

    let options = new RequestOptions({headers: headers});

    return this.http.post('/api/extsys/v1/cloud/vim/' + vim.vimId, vim, options)

      .map((res: Response) => res.json())

      .catch(this.handleError);

  }

delVim(vimId: string): Observable {

    let headers = new Headers({'Content-Type': 'application/json'});

    let options = new RequestOptions({headers: headers});

    return this.http.delete('/api/extsys/v1/cloud/vim/' + vimId, options)

      .map((res: Response) => res.json())

      .catch(this.handleError);

  }

依赖注入

Angular 使用依赖注入来提供新组件以及组件所需的服务。

必须在要求注入 HeroService 之前，在注入器中注册 HeroService 的 提供商 Provider 。  通常会把提供商添加到 根模块 上，以便在任何地方使用服务的同一个实例。

app/app.module.ts

providers: [
  BackendService,
  HeroService,
  Logger
],

或者，也可以在@Component元数据中的providers属性中把它注册在组件层：

@Component({
  moduleId: module.id,
  selector:    'hero-list',
  templateUrl: 'hero-list.component.html',
  providers:  [ HeroService ]
})

在main.ts中引导

引导即时编译的浏览器应用的推荐地点是在 app 目录中一个名为 app/main.ts 的单独文件中。

引导过程搭建运行环境，从模块的 bootstrap 数组中提出 根 AppComponent ， 创建该组件的实例，并将其插入到组件 selector 标识的元素标签中。

AppComponent 选择器 — 在这里以及文档大部分例子中 — 是 my-app ， 所以 Angular 在 index.html 中查找像这样的 标签...