国内 Angular2 材料比较少，这里看到一篇不错的入门文章就分享过来了 —— Angular 2 疾速上手，这内里另有很多有关于 Angular2 的文章，感兴致的朋侪可以去看一看
如今angular2已来到了beta版，这意味着它已做好了开辟出稳固运用的预备了。和angular1.x比拟，它发生了很多颠覆性的变化，angular2的官方网站上，有一个5分钟疾速最先教程(angular.io)，有兴致的朋侪可以去开一下，协助你疾速的相识angular2。在本文中，我将会经由历程制造一个简朴的小网站，来为人人展现angular2的新特征，率领人人走入angular2的全新天下。
开辟环境
如今有两种主要的要领设置angular2的运用递次，一个是经由历程systemjs，而另一个则是webpack。为了简朴起见，在本文中将会运用systemjs。
你可以运用ES5、EcmaScript 2015 或许 TypeScript来开辟你的angular2运用，angular2的团队的引荐是运用TypeScript开辟。在运用TypeScript之前，须要完成一些设置事情，虽然你会觉得到有些烦琐，然则用起来你照样会觉得随心所欲的，你的代码也将会越发清楚清楚明了。
我们先借用在angular2官网的教程中运用的工程 Tour of Heroes 来最先我们的征程。
你可以经由历程git下载这个工程，当你下载下来以后，第一件事应当是用npm i敕令来初始化项目。
tsconfig.js
由于我们是用TypeScript编写我们的递次，所以我们先得在我们的工程中设置TypeScript，通知编译器怎样发生JavaScript文件。关于设置文件中的其他属性在这里我就不赘述了，我只引见两个最主要的属性，一个是"target":"ES5"和"module":"system"。target属性将设置TypeScript编译出来的ECMAScript版本为
ES5，"module":"system"以为着我们想用
system的花样来天生我们的模块。
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"exclude": [
"node_modules"
]
}package.json
我们已定义了该怎样编译TypeScript文件，接下来我们须要在工程的 package.json 文件中增添一些选项。
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
}指导启动
Angular2中关于我来讲最奇异的一点就是“我该怎样运转我的运用？”，第二奇异的一点就是“好吧，我该怎样启动我的运用递次？”
启动我们的运用的第一件事就是在工程的index.html文件中援用必要的资本。除了angular的资本的以外，最主要的一环就是system.src.js，用它来作我们的模块加载器。
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>我们盘算经由历程运用systemjs来输入我们的启动模块。
<script>
System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } });
System.import('app/boot')
.then(null, console.error.bind(console));
</script>在boot.ts文件中，我们输入了3格组件：bootstrap、ROUTER_PROVIDERS和AppComponent。然后实例化了我们的运用并指清楚明了我们的根组件，AppComponent并注入了ROUTER_PROVIDERS作为一个子模块。
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [
ROUTER_PROVIDERS
]);回到之前的index.html文件中，<app>Loading...</app>这一行就是我们运用的进口标记。Angular已实例化了AppComponent而且将它的模板载入到了app元素中。
<body>
<app>Loading...</app>
</body>在解说了怎样编译、设置和启动一个angular2的运用递次以后。让我们看一看angular2中组件的组成部分，以便我们能更好的明白AppComponent和app之间的联络。
组件(Component)
Angular中的组件是angular中最基础的观点之一。一个组件掌握一个视图（View）――一片为用户展现信息和响运用户反应的网页。一般来讲，一个组件就是一个用于掌握视图模板的JavaScript类。
援用（有关于组件的更多内容，你可以去浏览我的《CIDER:建立一个Angular2组件》，你将会相识到怎样建立和运用你的组件）
App 组件
建立组建的第一件事就是先写一个类（class）,我们先做声明，一会再来革新它。
export class AppComponent {}接下来，我们应当输入我们的依靠模块。在本例中，我们仅须要从angular2/core中输入Component。
import {Component} from 'angular2/core';以后，我们须要装潢(decorate)我们的类。经由历程增添@Component的元数据来通知我们的运用递次，我们想要一个怎样的AppComponent。我们将运用selector属性为我们的组件取一个HTML元素的名字，如许就可以经由历程定义好的HTML元素的名字来运用组件了。同时还须要经由历程templateUrl和styleUrls为组件设置模板和款式。末了，我们将ROUTER_DIRECTIVES这个指令经由历程directives属性注入到组件中去。
@Component({
selector: 'app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {}在这个示例中，我们还想增添为我们的组件增添路由功用，因而我们将会运用RouterConfig模块，并用@RouterConfig来装潢我们的组件。为了可以路由，我们须要在文件中的最顶部输入RouterConfig、ROUTER_DIRECTIVES、AboutComponent、ExperimentsComponent和HomeComponent。
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {AboutComponent} from './about/about.component';
import {ExperimentsComponent} from './experiments/experiments.component';
import {HomeComponent} from './home/home.component';我们须要路由模块来开启路由功用以及其他的组件作为路由的目的。接下来就须要向@RouterConfig中传入一组路由的定义，来通知运用递次路由的途径、路由的名字和每一个路由所对应的组件。我们为home路由的属性useAsDefault设置为true，将其作为默许路由。
@RouteConfig([
{path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },
{path: '/about', name: 'About', component: AboutComponent },
{path: '/experiments', name: 'Experiments', component: ExperimentsComponent }
])然后，我们将StateService和ExperimentService输入到我们的组件中并放入component润饰符的providers属性中。以下是全部 AppComponent 的代码。
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {AboutComponent} from './about/about.component';
import {ExperimentsComponent} from './experiments/experiments.component';
import {HomeComponent} from './home/home.component';
import {StateService} from './common/state.service';
import {ExperimentsService} from './common/experiments.service';
@Component({
selector: 'app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
directives: [ROUTER_DIRECTIVES],
providers: [StateService, ExperimentsService],
})
@RouteConfig([
{path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },
{path: '/about', name: 'About', component: AboutComponent },
{path: '/experiments', name: 'Experiments', component: ExperimentsComponent }
])
export class AppComponent {}Home 组件
在完成 App 组件以后，我们继承编写我们的 Home 组件。起首照样先定义一个 HomeComponent 类，同时在类中为组件的题目和内容定义两个属性。
export class HomeComponent {
title: string = 'Home Page';
body: string = 'This is the about home body';
}然后输入适宜的依靠模块。
import {Component} from 'angular2/core';以后装潢我们的类并设置selector和templateUrl属性。
@Component({
selector: 'home',
templateUrl: 'app/home/home.component.html'
})然后我们将为我们的组件援用 StateService 并运用它来存储状况两个路由之间的状况。Angular2中的依靠注入发生在该类的组织函数中，因而我们将在组织函数中注入 StateService。Angular的每一个组件都有有生命周期的钩子（lifecycle hooks），我们可以按递次运用它们。在本组件中，我们想在组件初始化的时刻从 StateService 中猎取和设置我们的信息。这时刻我们须要运用ngOnInit钩子。（有关于组件的生命周期的细致内容可以参考官网教程（https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html））
import {Component} from 'angular2/core';
import {StateService} from '../common/state.service';
export class HomeComponent {
title: string = 'Home Page';
body: string = 'This is the about home body';
message: string;
constructor(private _StateService: StateService) { }
ngOnInit() {
this.message = this._StateService.getMessage();
}
updateMessage(m: string): void {
this._StateService.setMessage(m);
}
}效劳(Service)
很多组件可能会须要接见雷同的一组数据，而我们并不想像傻瓜一样的一遍又一遍的复制粘贴一样的代码。这个时刻，效劳（Service）涌现了。我们须要建立一个单一的且可以重复运用的数据效劳，并学会将该效劳注入到我们须要的组件中去。
将数据的存取从新包装成一个自力的效劳让组件的重心倾向于对视图的支撑。它能让组件的单元测试变得越发轻易。
State 效劳
在上面的组件中，我们常常见到一个叫StateService的东西，它究竟是什么呢？没错，它就是一个效劳，接下来，让我们一步一步的建立它。起首我们须要声明一个叫 StateService 的类并将它暴露给我们的运用递次。
export class StateService {
private _message = 'Hello Message';
getMessage(): string {
return this._message;
};
setMessage(newMessage: string): void {
this._message = newMessage;
};
}该效劳中定义了_message属性以及它的属性猎取器(getter)和设置器(setter)。我们要想使StateService可以注入到其他组件中去，起首须要在我们的类中输入Injectable，并用@Injectable润饰我们的类。
import {Injectable} from 'angular2/core';
@Injectable()
export class StateService {
private _message = 'Hello Message';
getMessage(): string {
return this._message;
};
setMessage(newMessage: string): void {
this._message = newMessage;
};
}好了，如今效劳模块也写好了，觉得我们的运用终究快完成了，末了也是最主要的一步，就是要形貌运用的模样了。
视图(Views)
我将经由历程home.component.html作为切入点来简朴引见一下 Angular2 中的升级版模板语法（template syntax）。
单向数据绑定与 Angular1.x 中的情势是一样的，就是经由历程字符串插进去。
<h1>{{title}}</h1>
{{body}}用户输入事宜不再经由历程在我们的HTML标签中运用自定义的Angular指令来捕捉，而是经由历程在插进去语句中封装原生的DOM事宜来捕捉它们。我们可以在下面代码中看到，我经由历程(click)="updateMessage(message)"来为元素注册 click 事宜，当事宜触发时挪用 updateMessage 要领。
<button type="submit" class="btn" (click)="updateMessage(message)">Update Message</button>Angular2中的双向数据绑定基于单向数据绑定。之前我们看到单向数据绑定中运用了字符串插进去的要领，其实在我们绑定一个元素的属性时，可以运用方括号语法。我们将属性绑定（组件到视图）和事宜绑定（视图到组件）的要领组合起来就是双向数据绑定了。是否是很奇异？双向数据绑定的要领很简朴，就是在 ngModel 用方括号和圆括号包起来变成[(ngModel)]=”message。
<input type="text" [(ngModel)]="message" placeholder="Message">以下是全部 home.component.html 的内容。
<h1>{{title}}</h1>
{{body}}
<hr>
<div>
<h2 class="text-error">Home: {{message}}</h2>
<form class="form-inline">
<input type="text" [(ngModel)]="message" placeholder="Message">
<button type="submit" class="btn" (click)="updateMessage(message)">Update Message</button>
</form>
</div>路由标记
接下来，我们须要回到 app.component.html 中，来讨论一下怎样在模板语法中到场路由链接。在我们定义一个路由的时刻，每一个组件都有它对应的模板，那末题目来了，当路由到一个组件的时刻，这个模板应当被放在那里呢？这个时刻，router-outlet涌现了，它通知运用递次路由中组件的摆放位置。
<div id="container">
<router-outlet></router-outlet>
</div>在定义了路由组件的摆放位置以后，那末我们怎样从一个路由到另一个路由呢？RouterLink 就是完成了路由的指向题目。
<h1 id="logo">
<a [routerLink]="['/Home']"></a>
</h1>
<div id="menu">
<a [routerLink]="['/Home']" class="btn">Home</a>
<a [routerLink]="['/About']" class="btn">About</a>
<a [routerLink]="['/Experiments']" class="btn">Experiments</a>
</div>全部 app.component.html 文件以下所示：
<header id="header">
<h1 id="logo">
<a [routerLink]="['/Home']"></a>
</h1>
<div id="menu">
<a [routerLink]="['/Home']" class="btn">Home</a>
<a [routerLink]="['/About']" class="btn">About</a>
<a [routerLink]="['/Experiments']" class="btn">Experiments</a>
</div>
<div class="color"></div>
<div class="clear"></div>
</header>
<div class="shadow"></div>
<div id="container">
<router-outlet></router-outlet>
</div>总结
到此为止，我们的网页算是完成了，在你拿出去夸耀之前，让我们回忆一下我们的制造历程：
1、我们设置了tsconfig.json文件来讲明TypeScript该怎样编译。
2、我们进修了怎样简朴的运用systemjs来处置惩罚模块的载入并指导我们运用递次的启动。
3、我们相识了该怎样建立 AppComponent 和 HomeComponent。
4、我们进修了怎样运用 @Injectable() 建立一个可注入的效劳。
5、我们轻微相识了一下Angular2中的绑定语法。
6、我们进修了怎样用 router-outlet 在视图中定义路由组件寄存的位置，并运用 routerLink 举行路由之间的跳转。
