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 ofheroes">

•  *ngIf="selectedHero">

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

  • 标签。

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

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

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

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

服务

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

getVim(vimId: string): Observable {

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

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

     .catch(this.handleError);

  }

modifyVim(vim: Vim): Observable {

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

    let options = newRequestOptions({headers: headers});

    returnthis.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 = newHeaders({'Content-Type': 'application/json'});

    let options = newRequestOptions({headers: headers});

    returnthis.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中查找像这样的标签...