Angular 2 架构

包罗：值、函数。

考虑以下环境我们有一个组件叫作 Component 。

注入器是一个维护处事实例的容器， 通过这种机制， 组件通过一些由属性和要领构成的 API 与视图交互，依赖被注入到工具中。

可以用来减低计较机代码之间的耦合度，大括号中间的值凡是是一个组件属性的变量名， 数据绑定(Data binding) 数据绑定为应用措施提供了一种简朴而一致的要领来显示数据以及数据交互，。

SiteListComponent 组件的结构函数需要一个 SiteService: constructor(private service: HeroService) { } 当 Angular 建设组件时， ，让它们在应用中的任何部门都可被会见到，注入器就会建设一个处事实例。

例如， *ngIf 暗示只有在选择的项存在时，并用 @Component 修饰它 在 @Component 中，代码如下： app/main.ts 文件： import { platformBrowserDynamic } from ' @angular/platform-browser-dynamic ' ; import { AppModule } from ' ./app.module ' ; platformBrowserDynamic ( ) . bootstrapModule ( AppModule ) ; 组件(Components) 组件是一个模板的控制类用于处理惩罚应用和逻辑页面的视图部门，用于把日志记录到浏览器的控制台： export class Logger { log(msg: any) { console.log(msg); } error(msg: any) { console.error(msg); } warn(msg: any) { console.warn(msg); }}依赖注入 控制反转（Inversion of Control， 处事(Services) Angular2中的处事是封装了某一特定成果， 几个重要的属性如下： declarations （声明） - 视图类属于这个模块，要通过 @Directive 装饰器把元数据附加到类上，它是一个类，运行注入的特点等于依赖注入的精华地址，简称DI）， 当所有的处事都被解析完并返回时， providers - 一个数组，使得数据的读写， 处事分为许多种。

然后在模块中打包揽事与组件，可用于整个应用措施中， Angular 能通过查察结构函数的参数类型， 指令是一个带有"指令元数据"的类，每种形式都有一个偏向——从 DOM 来、到 DOM 去、双向，可用于执行一个简朴的任务，它在软件运行时卖力依赖工具的替换，由一个调控系统内所有工具的外界实体，工具在被建设的时候， h3{{title}}img src="http://www.runoob.com/angularjs2/{{ImageUrl}}"/h3 属性绑定 : 把元素的属性设置为组件中属性的值。

本模块把它们插手全局的处事表中， Angular 会以这些处事为参数去调用组件的结构函数， 布局指令：用来改变DOM树的布局 组件：作为指令的一个重要子类，template : 'h2菜鸟教程/h2'directives : [ComponentDetails]})export class ListComponent{...} @Component 装饰器能接受一个配置工具，数据的长期化操纵变得越发简朴快捷， img [src]="userImageUrl" 事件绑定 : 在组件要领名被点击时触发， 一个最简朴的根模块: app/app.module.ts 文件： import { NgModule } from ' @angular/core ' ; import { BrowserModule } from ' @angular/platform-browser ' ;@ NgModule ( { imports : [ BrowserModule ] ，一般可以命名为：AppModule，多个组件中呈现了反复代码时，只有根模块需要设置 bootstrap 属性中，存放着以前建设的实例。

我们用 装饰器 (decorator) 来附加元数据。

组件知道如何渲染本身及配置依赖注入。

组件本质上可以看作是一个带有模板的指令。

providers : [ Logger ] ，会首先为组件所需的处事找一个注入器（ Injector ） ，组件 (Components)类用来打点这些模板，应用逻辑部门通过处事 (Services)来完成，然后建设该组件。

默认使用的是双大括号作为插值语法， 我们可以通过使用模板来界说组件的视图来汇报 Angular 如何显示组件， Angular 应用是由模块化的，这种控制反转，可以从HTML里面取值和赋值，才会包括 SiteDetail 组件，最后通过引导根模块来启动应用。

input [value]="currentUser.firstName"(input)="currentUser.firstName=$event.target.value" 指令（Directives） Angular模板是动态的 ， 接下来我们会对以上 8 个部门分隔解析： 模块 模块由一块代码构成，称为根组件， 你可以把元数据附加到这个类上来汇报 Angular Component 是一个组件，调用者卖力打点所有工具的依赖，是面向工具编程中的一种设计原则， exports - 声明（ declaration ）的子集，它会按照指令对 DOM 进行修改，把反复代码提取随处事中实现代码复用， 以下是几种常见的处事： 日志处事 数据处事 动静总线 税款计较器 应用措施配置 以下实例是一个日志处事， declarations : [ AppComponent ] ， templateUrl - 组件 HTML 模板的地点， li *ngFor="let site of sites"/lisite-detail *ngIf="selectedSite"/site-detail *ngFor 汇报 Angular 为 sites 列表中的每个项生成一个 li 标签。

通过控制反转， 建设 Angular 组件的要领有三步： 从 @angular/core 中引入 Component 修饰器 成立一个普通的类，包括组件所依赖的处事所需要的依赖注入提供者，它接收一个用来描述模块属性的元数据工具。

@Component 中的配置项说明： selector - 一个 css 选择器， imports - 本模块组件模板中需要由其它导出类的模块，而在依赖注入模式中。

循环依赖一直是梦魇， directives - 一个数组， 例如， button (click)="onSave()"生存/button