2798人阅读
Angular 2（1）
前面的话：最近空余时间在学 Angular 2，国庆节的时候看了官网的quickstart，还写了一篇文章，只是一个hello world demo。后面继续看了它的一个项目教程，刚开始还可以跟上，当后面就比较混乱了。的确，对于新手来讲，要了解一个框架还是比较麻烦的。所以停止项目，开始看看 angular 的整体框架是如何的，联系项目，分析下，慢慢来。
学习链接：
正文开始：
angular 应用：用带 angular 拓展语法的 HTML 写模板，用组件类管理这些模板，用服务添加应用逻辑，在模块中打包发布组件与服务。通过引导 根模块启动应用。 angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。
这几个名词很重要，贯穿angular应用开发。
angular 应用的 8个主要构造块：
模块modules
组件components
模板template
元数据metadata
数据绑定data binding
指令directive
服务services
依赖注入dependency injection
angular 应用是模块化的，有自己的模块系统，叫做 angular 模块/NgModules。
到底模块是什么？在angular里模块化意味着什么？
angular 应用至少有一个模块（根模块），称为 AppModule。
大多数应用都有很多其它的 特性模块，它们由一组领域类、工作流、或紧密相关的功能聚合形成。
angular的所有模块都是一个带有 @NgModule 装饰器的类。
angular的模块是类！！！
装饰器是用来修饰JavaScript类的函数。负责把元数据附加到类上。
NgModule 是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。属性有：
declarations（声明）：本模块中拥有的视图类。angular 有三种视图类：组件、指令、管道。
exports：declarations的子集，可用于其它模块中的组件模板。
imports：本模块组件模板中需要由其他模板导出的类。
providers：服务的创建者。本模块把它们加入全局的服务表中，让他们在应用中的任何部分都可被访问到。
bootstrap：标识出应用的主视图（根组件）。只有根模块才可设置此属性。
下面是一个简单的根模块：
// app.module.ts
import { NgModule }
from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// @NgModle 装饰器函数，接受一个对象，对象有几个属性
@NgModule({
[ BrowserModule ],
providers:
[ Logger ],
declarations: [ AppComponent ],
[ AppComponent ],
bootstrap:
[ AppComponent ]
// AppComponent 的 export 语句导出，根模块不需要导出，其他组件不需导入根模块。
export class AppModule { }
引导根模块来启动应用。在 main.ts 文件中引导 AppModule：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
此时，项目只有 app/app.module.ts 文件和 app/main.ts ，前者定义了应用的根模块，后者引用它来启动应用。
Angular 模块与JavaScript模块比较：
JavaScript的模块化是分文件导入的，各文件就是各模块。
Angular 模块（用 @NgModule 装饰的类）是Angular的基础特性。
JavaScript的模块系统管理一组JavaScript对象。
在JavaScript中，每个文件就是一个模块，该文件中定义的对象从属于该模块。通过 export 关键字，可以把它的某些对象声明为公开。别的模块可以使用 import 语句访问公开对象。
JavaScript的这个特性很有用。
export 关键字声明为公开，import 语句访问公开对象。
在 Angular 里这两种都会用到，从上面的两个个文件里，可以看到。
上面所说，Angular 用到了 JavaScript模块，所以它的JS模块就是库模块，JS文件库。
Angular 库的名字都以 @angular 前缀，可以使用 npm 包管理工具安装，并如上面的 import 语句可以访问它们中的对象。
这点很好理解，Angular 本来就是依托于JS实现的单页面框架，所以它本身还是需要丰富的JS库的。
比如，从 @angular/core 库导入 Component 装饰器：
import { Component } from '@angular/core';
使用JavaScript导入语句从Angular 库中导入 Angular 的某些模块。
import { BrowserModule } from '@angular/platform-browser';
在上面根模块的代码中，应用模块需要 BrowserModule 的某些素材，所以把它加入 @NgModule 元数据的 imports 中：
imports ：[ BrowserModule ];
我们看看基本的@angular库中有哪些JS模块：
platform-browser
platform-browser-dynamic
所以，我们同时使用 Angular 和 JavaScript的模块化系统。
这块的 imports 和 exports 比较混乱，可以自己梳理下。
组件负责控制屏幕上的一小块地方，就是视图。
在类中定义组件的应用逻辑（被用来为视图提供支持）。组件通过一些由属性和方法组成的API与视图交互。
所以说组件是联系视图的。
前面的 export 关键字可以把模块中的类声明为公开的，然后 import 里实现访问。
类里面有许多属性和方法。
通过组件自带的模板来定义视图。模板是以HTML形式存在的，它告诉 Angular 如何渲染组件（视图）。
看一个组件文件的模板：
// app/ponent.html
&Hero List&
&&Pick a hero from the list&&
*ngFor="let hero of heroes" (click)="selectHero(hero)"&
{{hero.name}}
*ngIf="selectedHero" [hero]="selectedHero"&&
模板看起来就是标准 HTML，它里面有一些非标准HTML的语法。*ngFor、{{hero.name}}、{click}、[hero] 和 &hero-derail& ，它们是 Angular 的模板语法。
所以说，Angular 是通过这种方式来处理 HTML的。
元数据告诉Angular如何处理一个类。
之前 export 的类里有一些方法和属性，但是怎么处理这个类？
只要把元数据附加到这个类，就意味着这个类是个组件。
在 TypeScript 中，我们用装饰器（decorator）来附加元数据。
分析下面的元数据：
@Component({
moduleId: module.id,
'hero-list',
templateUrl: 'ponent.html',
providers:
[ HeroService ]
export class HeroListComponent implements OnInit {
@Component装饰器把紧随其后的类标记成了组件类。
在装饰器后面的类就会被转为组件类？
装饰器里的配置项：
moduleId：为与模块相关的URL提供基地址。
这个地址怎么使用的？
selector：CSS 选择器，它告诉 Angular 在父级HTML寻找一个标签，然后创建组件实例并插入标签中。
实现HTML的显示。
templateUrl：组件HTML模板的模块相对地址。
HTML模板的设置位置。
providers：数组，包含组件所依赖的服务所需要的依赖注入提供商。告诉Angular该组件的构造函数需要服务，组件可以从服务获取数据。
某些数据的传递通过服务进行，否则，其他的视图只能控制静态的展示。
@Component 里的元数据会告诉 Angular 如何取得你为组件设定的元数据。
模板、元数据和组件共同描绘出这个视图。
组件就是视图，模板提供HTML的结构性。
如果没有框架，那么一些都需要我们来做。把数据值推送到HTML控件，并把用户的反馈接收转换成动作和值更新显示，你可以使用jQuery来实现这个过程。
Angular 框架实现数据绑定，一种让模板各部分与组件的各部分相互联系的机制。在模板HTML中添加绑定标记，Angular 会连接模板和组件。
意味着，我们刻意自动实现视图数据的更新，因为它绑定了组件，可以实现数据的关联。
看一个示例：
// app/ponent.ts
&{{hero.name}}&
[hero]="selectedHero"&&
(click)="selectHero(hero)"&&
观察到在这个模板HTML里，有一些非标准HTML的字符。
{{hero.name}} 插值表达式：在元素中显示组件的 hero.name属性的值。
[hero] 属性绑定：把父组件的值传到子组件的 hero 属性中。
(click) 事件绑定：当用户点击元素时调用方法。
文件之间的互相关系需要梳理清楚。
双向数据绑定：同时实现属性绑定和事件绑定的功能。看示例：
// app/hero-detail.component.ts
&input [(ngModel)]="hero.name"&
数据属性的值会从具有属性绑定的组件传到输入框，事件绑定使用户的修改被传回组件，把属性值设为最新的值。
Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令对DOM进行修改。
就是说解析模板HTML的时候，会解析其中的指令。
指令是一个带有指令元数据的类。
指令是一个类，并且它含有指令源数据。
在TypeScript中，要通过 @Directive 装饰器把元数据附加到类上。
和之前的类的元数据一样，通过 @Component 装饰器把元数据附加到后面的类，编程组件类。这个就是通过 @Directive 装饰器把一些元数据附加到后面的指令类。
结构型指令：通过在DOM中添加、移除、替换元素修改布局。ngFor 、 ngIf。
属性指令：修改现有元素的外观或行为。ngModel
服务分很多种，值、函数、应用所需的特性。
几乎任何东西都可以是一个服务。典型的服务是一个类。
税款计算器
应用程序配置
组件是最大的服务消费者。
组件的一些操作需要服务提供一些数据。
示例，把日志记录显示到浏览器控制台：
export class Logger {
log(msg: any)
{ console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any)
{ console.warn(msg); }
这些服务使得组件不用去服务器获取数据、进行验证……，这一切都可以通过服务完成。
组件的任务就是提供用户体验，仅此而已！
它介于视图（由模板渲染）和应用逻辑（包括模型）之间。
设计良好的组件为数据绑定提供属性和方法，对它们不重要的事情委托给服务。
依赖注入是提供类的新实例的一种方式，负责处理好类所需的全部依赖（服务）。
Angular 使用依赖注入提供我们需要的组件及组件所需的服务。
Angular 能通过查看构造函数的参数类型，来的值组件所需的服务。
constructor(private service: HeroService)
构造函数的参数提到了一个服务。
当 Angular 创建组件时，会先为组件所需的服务找一个注入器（Injector）。
注入器是一个维护服务实例的容器，存放着以前创建的实例。如果容器中还没有所请求的服务实例，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular。当所有服务都被解析完并返回， Angular 会以这些服务为参数去调用组件的构造函数，这就是依赖注入。
也就是说服务是先于组件被执行的。它先处理所有的服务到一个仓库，然后再处理组件，组件需要哪个服务就从仓库取出来给你。
提供商添加到根模块，在任何地方使用的都是服务的同一个实例：
// app/app.module.ts
providers: [
BackendService,
HeroService,
提供商是确定处理组件之前必须存在所依赖的组件
也可以把它注册到组件层：
// app/hero-ponent.ts
@Component({
moduleId: module.id,
'hero-list',
templateUrl: 'ponent.html',
providers:
[ HeroService ]
添加到装饰器元数据的属性中。
依赖注入的要点：
依赖注入渗透在整个Angular框架中
注入器是机制的核心
注入器负责维护一个容器，存放创建过的服务实例
注入器能使用提供商创建一个新的服务实例
提供商是一个用于创建服务的配方。
把提供商注册到注入器。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：16678次
排名：千里之外
原创：26篇
(1)(1)(2)(3)(5)(1)(5)(8)(2)前面的话：最近空余时间在学
2，国庆节的时候看了官网的quickstart，还写了一篇文章，只是一个hello world demo。后面继续看了它的一个项目教程，刚开始还可以跟上，当后面就比较混乱了。的确，对于新手来讲，要了解一个框架还是比较麻烦的。所以停止项目，开始看看 angular 的整体框架是如何的，联系项目，分析下，慢慢来。学习链接：中文官网正文开始：
angular 应用：用带 angular 拓展语法的
写模板，用组件类管理这些模板，用服务添加，在模块中打包发布组件与服务。通过引导 根模块启动应用。 angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。这几个名词很重要，贯穿angular应用开发。模块modules组件s模板template元数据metadata数据绑定data binding指令directive服务services依赖注入dependency injection模块angular 应用是模块化的，有自己的模块系统，叫做 angular 模块/NgModules。到底模块是什么？在angular里模块化意味着什么？AppModule大多数应用都有很多其它的 特性模块，它们由一组领域类、工作流、或紧密相关的功能聚合形成。angular的所有模块都是一个带有@NgModule装饰器的类。angular的模块是类！！！装饰器是用来修饰类的函数。负责把元数据附加到类上。NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。属性有：declarations（声明）：本模块中拥有的视图类。angular 有三种视图类：组件、指令、管道。s：declarations的子集，可用于其它模块中的组件模板。s：本模块组件模板中需要由其他模板导出的类。：服务的创建者。本模块把它们加入全局的服务表中，让他们在应用中的任何部分都可被访问到。：标识出应用的主视图（根组件）。只有根模块才可设置此属性。下面是一个简单的根模块：// app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; //@NgModle 装饰器函数，接受一个对象，对象有几个属性 @NgModule({ imports: [ BrowserModule ], providers: [ Logger ], declarations: [ AppComponent ], exports: [ AppComponent ], bootstrap: [ AppComponent ] }) // AppComponent 的 export 语句导出，根模块不需要导出，其他组件不需导入根模块。 exportclassAppModule { }引导根模块来启动应用。在main.ts文件中引导AppModule：// app/main.ts import { platformBrowserDynamic } from'@angular/platform-browser-dynamic'; // 从app.module 文件导入了 AppModule import { AppModule } from'./app.module'; platformBrowserDynamic.Module(AppModule);此时，项目只有 app/app.module.ts 文件和 app/main.ts ，前者定义了应用的根模块，后者引用它来启动应用。Angular 模块与JavaScript模块比较：JavaScript的模块化是分文件导入的，各文件就是各模块。Angular 模块（用 @NgModule 装饰的类）是Angular的基础特性。JavaScript的模块系统管理一组JavaScript对象。在JavaScript中，每个文件就是一个模块，该文件中定义的对象从属于该模块。通过 export 关键字，可以把它的某些对象声明为公开。别的模块可以使用 import 语句访问公开对象。JavaScript的这个特性很有用。export 关键字声明为公开，import 语句访问公开对象。在 Angular 里这两种都会用到，从上面的两个个文件里，可以看到。模块库上面所说，Angular 用到了 JavaScript模块，所以它的JS模块就是库模块，JS文件库。Angular 库的名字都以 @angular 前缀，可以使用 npm 包管理工具安装，并如上面的 import 语句可以访问它们中的对象。这点很好理解，Angular 本来就是依托于JS实现的单页面框架，所以它本身还是需要丰富的JS库的。比如，从 @angular/core 库导入 Component 装饰器：import { Component } from '@angular/core';使用JavaScript导入语句从Angular 库中导入 Angular 的某些模块。import { BrowserModule } from '@angular/platform-browser';在上面根模块的代码中，应用模块需要 BrowserModule 的某些素材，所以把它加入 @NgModule 元数据的 imports 中：imports ：[ BrowserModule ];我们看看基本的@angular库中有哪些JS模块：commoncompilercoreformsplatform-browserplatform-browser-dynamicrouterupgrade所以，我们同时使用 Angular 和 的模块化系统。这块的 imports 和 exports 比较混乱，可以自己梳理下。组件组件负责控制屏幕上的一小块地方，就是视图。在类中定义组件的应用逻辑（被用来为视图提供支持）。组件通过一些由属性和方法组成的API与视图交互。所以说组件是联系视图的。前面的 export 关键字可以把模块中的类声明为公开的，然后
里实现访问。类里面有许多属性和方法。模板通过组件自带的模板来定义视图。模板是以HTML形式存在的，它告诉 Angular 如何渲染组件（视图）。看一个组件文件的模板：// app/-ponent.html &h2Hero Listh2&p&iPick a hero from the listip&ul&li *ngFor=&let hero of heroes& ()=&selectHero(hero)&{{hero.name}}liul&hero-detail *ngIf=&selectedHero& [hero]=&selectedHero&hero-detail模板看起来就是标准 HTML，它里面有一些非标准HTML的语法。*ngFor、{{hero.name}}、{click}、[hero] 和 ，它们是 Angular 的模板语法。所以说，Angular 是通过这种方式来处理 HTML的。元数据元数据告诉Angular如何处理一个类。之前 export 的类里有一些方法和属性，但是怎么处理这个类？只要把元数据附加到这个类，就意味着这个类是个组件。在
中，我们用装饰器（decorator）来附加元数据。分析下面的元数据：// app/ponent.ts @Component({ moduleId: module.id, : 'hero-list', templateUrl: 'ponent.html', providers: [ HeroService ] }) export classHeroListComponentimplementsOnInit {/* . . . */ }@Component装饰器把紧随其后的类标记成了组件类。在装饰器后面的类就会被转为组件类？装饰器里的配置项：moduleId：为与模块相关的URL提供基地址。这个地址怎么使用的？： 选择器，它告诉 Angular 在父级HTML寻找一个标签，然后创建组件实例并插入标签中。实现HTML的显示。templateUrl：组件HTML模板的模块相对地址。HTML模板的设置位置。providers：数组，包含组件所依赖的服务所需要的依赖注入提供商。告诉Angular该组件的构造函数需要服务，组件可以从服务获取数据。某些数据的传递通过服务进行，否则，其他的视图只能控制静态的展示。@Component 里的元数据会告诉 Angular 如何取得你为组件设定的元数据。模板、元数据和组件共同描绘出这个视图。组件就是视图，模板提供HTML的结构性。数据绑定如果没有框架，那么一些都需要我们来做。把数据值推送到HTML控件，并把用户的反馈接收转换成动作和值更新显示，你可以使用来实现这个过程。Angular 框架实现数据绑定，一种让模板各部分与组件的各部分相互联系的机制。在模板HTML中添加绑定标记，Angular 会连接模板和组件。意味着，我们刻意自动实现视图数据的更新，因为它绑定了组件，可以实现数据的关联。看一个示例：// app/ponent.ts &li{{hero.name}}li&hero-detail [hero]=&selectedHero&hero-detail&li (click)=&selectHero(hero)&li观察到在这个模板HTML里，有一些非标准HTML的字符。{{hero.name}}插值表达式：在元素中显示组件的 hero.name属性的值。 [hero]属性绑定：把父组件的值传到子组件的 hero 属性中。 ()事件绑定：当用户点击元素时调用方法。文件之间的互相关系需要梳理清楚。双向数据绑定：同时实现属性绑定和事件绑定的功能。看示例：// app/hero-detail.component.ts&hero.name&&数据属性的值会从具有属性绑定的组件传到输入框，事件绑定使用户的修改被传回组件，把属性值设为最新的值。指令Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令对DOM进行修改。就是说解析模板的时候，会解析其中的指令。指令是一个带有指令元数据的类。指令是一个类，并且它含有指令源数据。在中，要通过 @Directive 装饰器把元数据附加到类上。和之前的类的元数据一样，通过 @Component 装饰器把元数据附加到后面的类，组件类。这个就是通过 @Directive 装饰器把一些元数据附加到后面的指令类。结构型指令：通过在DOM中添加、移除、替换元素修改布局。ngFor、ngModel服务服务分很多种，值、函数、应用所需的特性。几乎任何东西都可以是一个服务。典型的服务是一个类。例如：日志服务数据服务消息总线税款计算器配置组件是最大的服务。组件的一些操作需要服务提供一些数据。示例，把日志记录显示到浏览器控制台：// app/logger.service.ts
class Logger { log(msg: any) { console.log(msg); } error(msg: any) { console.error(msg); } warn(msg: any) { console.warn(msg); } }这些服务使得组件不用去获取数据、进行验证……，这一切都可以通过服务完成。组件的任务就是提供用户体验，仅此而已！它介于视图（由模板渲染）和（包括模型）之间。设计良好的组件为数据绑定提供属性和方法，对它们不重要的事情委托给服务。依赖注入依赖注入是提供类的新实例的一种方式，负责处理好类所需的全部依赖（服务）。Angular 使用依赖注入提供我们需要的组件及组件所需的服务。Angular 能通过查看构造函数的参数类型，来的值组件所需的服务。示例：// app/hero-list..tsconstructor(private service: HeroService){ }构造函数的参数提到了一个服务。当 Angular 创建组件时，会先为组件所需的服务找一个注入器（Injector）。注入器是一个维护服务实例的容器，存放着以前创建的实例。如果容器中还没有所请求的服务实例，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular。当所有服务都被解析完并返回，
会以这些服务为参数去调用组件的构造函数，这就是依赖注入。也就是说服务是先于组件被执行的。它先处理所有的服务到一个仓库，然后再处理组件，组件需要哪个服务就从仓库取出来给你。提供商添加到根模块，在任何地方使用的都是服务的同一个实例：// app/app.module.ts: [ BackendService, Service, Logger ],提供商是确定处理组件之前必须存在所依赖的组件也可以把它注册到组件层：添加到装饰器元数据的属性中。将为您减少类似内容我要收藏133个赞不感兴趣分享到分享到：相关文章还可以输入140字热门频道17.8万人订阅31.4万人订阅222.3万人订阅19.2万人订阅20.4万人订阅你还可用第三方账号来登录请输入你注册的电子邮件地址绑定密保手机*您可用使用此密保手机找回密码及登录*请勿随意泄露手机号，以防被不法分子利用，骗取帐号信息手机号码发送验证码确定电子邮件请输入您的意见和建议请您输入正确的邮箱地址，以便我们和您联系，帮您解决问题。扫描下载手机客户端热门搜词Angular2越来约火，以至于很多js开发者都想用它写一些例子。当然，你可能更希望有一些Angular2令人兴奋的新特性的文章出来。好，那这篇文章我就展示给大家如何使用Angular2来创建一个Todo应用。在这篇文章中，你将会学习如何使用组件、模板、数据绑定等一些重要的东东。让我们现在就开始吧。
Angular2当前还处在α版本，被不停的修改着。查看quickstart应用可以看到最新的修改记录。
这里有个例子，可以下载下来。如果你有啥问题可以提交到devmag.io去参与讨论。
获得种子应用
Angular团队已经把开发Angular2应用所需要的依赖都放到qiuckstart app中。你可以直接在github上下载到你的机器上。
现在你可以使用你最喜欢的文本编辑器打开这个app，开始编码了。我们注意到，当前的根目录是quickstart，我们把它重命名为todaoapp。
Angular 1.x中有指令的概念，而在Angular2中我们可以直接创建组件。每个组件都有两部分：试图和控制器。试图是你的组件中得HTML模板，而控制器则提供js的行为。你可能说Angular2不再有控制器了，但是我要告诉你，确切的说应该是控制器作为组件的一部分了。那一个组件到底长啥样呢，让我们创建一个todo应用来揭开它的面纱。
找到根目录创建TodoApp.es6文件。.es6后缀意味着我们将要遵循ES6的语法，当然你也可以使用普通的.js作为后缀。现在我们把如下内容贴到该文件中去。
import {Component, Template, bootstrap,Foreach} from 'angular2/angular2';
import {TodoStore} from 'services/TodoStore';
@Component({
selector: 'todo-app',
componentServices: [
@Template({
url: 'templates/todo.html',
directives: [Foreach]
class TodoApp {
todoStore : TodoS
constructor(todoStore: TodoStore) {
this.todoStore = todoS
add($event,newtodo){
if($event.which === 13){
this.todoStore.add(newtodo.value);
newtodo.value = '';
toggleTodoState(todo){
todo.done = !todo.
bootstrap(TodoApp);
前两行代码用于引入ES6模板。第一行代码是从angular2/angular2下引入组件、模板、bootstrap和forEach。第二行代码从模块services/TodoStore中引入了我们的TodoStore服务。不要为Angular能否找到这些模块而担心，后面我们会解释。
现在，我们需要创建我们组件的控制器：名称为TodoApp:
class TodoApp{
在上面的ES6类代码中，有几个注解引起我们的兴趣：
@Component: 这标识TodoApp是一个组件。而参数是一个对象，包含一个选择器属性，用来表示这个组件应该使用啥HTML选择器；同时这个对象还包含componentServices用来标示我们的组件依赖的服务。在我们的例子中，只依赖了TodoStore，后面我们会创建它的。
@Template: 这个注解标识它将是我们组件中使用的模板。在我们的例子中是templates/todo.html。因此我们的url属性指向了模板位置。类似的，指令属性表示我们模板中用到的指令。我们将会使用一个简单的指令ForEach到我们的模板中，通过制定指令属性就可以了，很简单。
现在我们将增加一个构造函数到我们的TodoApp类中：
constructor(todoStore: TodoStore) {
this.todoStore = todoS
参数todoStore:TodoStore告诉Angular的DI系统要在初始化阶段注入TodoStore服务的实例到我们组件中。这就是IoC,我们不需要自己去获得依赖，而是让Angular自动的实例化依赖，然后注入到我们组件中。所以我们拿到了TodoStore的实例化，并存到变量totoStore中。
我们先把add和toggleTodoState方法放在一边，现在我们来看下我们的TodoStore服务。
首先在services目录下创建一个名为TodoStore.js的文件，同时把下面的代码复制进去：
export class TodoStore {
constructor(){
this.todoList = [];
add(item){
this.todoList.unshift({text:item,done:false});
TodoStore是一个简单的js类，它有一个构造函数和一个add方法。构造函数创建了一个简单的数组todoList用于存放我们的todo对象。我们在模板中使用这个数组去渲染todo数据。每当一个新的toto对象被创建时候都会调用add方法。add方法接收文本参数后包装成一个对象放入到todoList数组中。注意下，done属性用来表示todo对象是否被完成了。最后我们使用export关键字来导出这个class。
现在回到TodoApp.es6，来看下我们如何导入上面的类的。
在templates目录下创建todo.html文件，内容如下：
@import url(/bootstrap/3.3.4/css/bootstrap.min.css);
@import url(/css?family=Open+Sans);
.container{
font-family: 'Open Sans', sans-
margin-top: 200
text-decoration: line-
color : #999999;
.bottom-offset{
margin-bottom: 20
&div class="container"&
&div class="row"&
&div class="col-xs-4 col-xs-offset-4"&
&div class="bottom-offset"&
&input type="text" class="form-control" placeholder="Write something here" autofocus #newtodo (keyup)="add($event,newtodo)"/&
&div *foreach="#todo in todoStore.todoList"&
&input type="checkbox" [checked]="todo.done" (click)="toggleTodoState(todo)"/& &span [class.done]="todo.done"&{{todo.text}}&/span&
&div class="col-xs-4"&&/div&
每个模板都有自己的样式。你可以先创建一个样式表，然后使用@import来引入到模板来。我们使用@import引入了Bootstrap得样式和google的字体样式。另外还有一些定制的css样式，当然你也可以写到另一个css文件中然后引入进来。
模板中又如下两部分：
供用户输入的输入框
显示todo对象的区域
来看下如何创建text输入框：
&input type="text" class="form-control" placeholder="Write something here" autofocus #newtodo (keyup)="add($event,newtodo)"/&
现在我们创建魔法般的双向数据绑定。不像Angular1.x，这里通过加入#modelname就可以实现数据绑定了。在这个例子中我们把模型newtodo绑定在了Input输入框中，输入框会和模型newtodo的数据自动同步的。同时我们想在按enter键的时候创建一个todo对象，因此我们在keyup事件上写了TodoApp#add()方法。
(keyup)="add($event,newtodo)"
现在我们来创建一个展示todo列表的div，看下面的代码：
&div *foreach="#todo in todoStore.todoList"&
&input type="checkbox" [checked]="todo.done" (click)="toggleTodoState(todo)"/&
&span [class.done]="todo.done"&{{todo.text}}&/span&
我们使用*foreach来循环todo列表，通过#todo对象来取出todoStore.todoList中每个对象。
针对每个对象，我们有一个checkbox和一个todo内容文本。内容文本通过{{todo.text}}来展示，如果该todo已经完成，则加上一个class,看下代码：[class.done]=”todo.done”。当你看到[]包围着一个属性的时候，则说明这个属性值是数据绑定表达式。因此当todo.done变化的时候，done属性会被新增和移除。类似的，我们使用[]来包围着checkbox的checked属性。下一步我们要做的就是当checkbox被点击的时候要触发TodoApp#toggleTodoState()方法。
再来看TodoApp.es6文件
现在我们看下TodoApp中得两个方法：
add($event,newtodo){
if($event.which === 13){
this.todoStore.add(newtodo.value);
newtodo.value = '';
add方法有两个参数：$event和newtodo。该方法会每当keyup事件被触发的时候执行。在方法内部，我们做了一个是否是enter键的判断，如果是，则调用this.todoStore.add(newtodo.value)。注意，虽然我们在模板中引入的是模型newtodo，但是实际的值是存在newtodo.value中得。下一步是清除掉newtodo.value，这样输入框中得取值也会被清掉（因为双向数据绑定），我们就可以新增新的todo项了。
toggleTodoState()
toggleTodoState(todo){
todo.done = !todo.
这个方法会在checkbox被点击的时候触发，我们只是简单的toggle了todo.done属性的值。这样，因为有数据绑定，我们会看到已经完成的todo会有删除线效果（还记得.done的class样式么）。
创建index.html
最后一步是在跟目录下创建index.html来加载我们的主模块，内容如下：
&title&Angular 2 Todo App&/title&
&script src="/dist/es6-shim.js"&&/script&
&todo-app&Warming up...&/todo-app&
System.paths = {
'angular2/*':'/angular2/*.js',
'rtts_assert/*': '/rtts_assert/*.js',
'services/*' : '/services/*.js',
'todoApp': 'TodoApp.es6'
System.import('todoApp');
这里有一些注意点：
/dist/es6-shim.js应该包含在head标签里面，该文件包含了Traceur, ES6模块加载器, System, Zone以及Traceur的注解选项。
我们的TodoApp组件的选择器指向的是 &todo-app&Warming up...&/todo-app&，Warming up...会在组件加载完成之前一直显示着。
System.paths告诉Angular到哪里去寻找模块。我们指定了属性’services/’ : ’/services/.js’，这就是为什么Angular能够找到TodoApp.es6中TodoStore得原因。类似，我们还制定了todoApp的路径和一些其他必须得模块。
最后，System.import(’todoApp’)加载了todoApp模块，这样就可以完成整个应用了。如果你仔细研究TodoApp.es6，你会发现最后一行bootstrap(TodoApp)，它是用来帮助bootstrap来初始化模块的。
到根目录下，输入http-server。你就可以通过http://localhost:8080来访问了。
注意：如果你没有http-server,你可以通过如下命令安装下：
sudo npm install -g http-server
我希望你已经很愉快的阅读了这篇文章。我对Angular2.0充满兴奋。如果你有啥想法可以直接留言或者参与devmag.io上得讨论。
参考文档：/post/54/creating-a-super-simple-todo-app-using-angular-2-tutorial