node -v
和
npm -v
命令。
mkdir angular2-quickstart
cd angular2-quickstart
典型的 Angular 项目需要一系列配置文件
- package.json 用来标记出本项目所需的 npm 依赖包。
- tsconfig.json 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。
- typings.json 为那些 TypeScript 编译器无法识别的库提供了额外的定义文件。
- systemjs.config.js 为模块加载器提供了该到哪里查找应用模块的信息，并注册了所有必备的依赖包。 它还包括文档中后面的例子需要用到的包。
- systemjs.config.js provides information to a module loader about where to find application modules, and registers all the necessary packages. It also contains other packages that will be needed by later documentation examples.
app/app.module.ts
app/app.module.ts
安装依赖包
npm 命令来安装 package.json 中列出的依赖包。请在终端窗口 ( 或 Windows 的 cmd 窗口 ) 中输入下列命令：
npm install
npm WARN
信息。不过不用担心，只要末尾处没有
npm ERR!
信息就算成功了。
npm install
之后没有出现
typings
目录，你就需要通过命令手动安装它：
npm run typings install
现在，你可以开始写代码了！
步骤 2 ：创建应用
我们用 NgModules 把 Angular 应用组织成了一些功能相关的代码块。 Angular 本身也被拆成了一些独立的 Angular 模块。 这让你可以只导入你应用中所需的 Angular 部件，以得到较小的文件体积。
每个 Angular 应用都至少有一个模块： 根模块 ，在这里它叫做 AppModule 。
** 在应用的根目录下创建一个 app 子目录：
mkdir app 使用下列内容创建 app/app.module.ts 文件：
app/app.module.ts
import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ]})export class AppModule { }这里是应用的入口点。
由于 QuickStart 是一个运行在浏览器中的 Web 应用，所以根模块需要从@angular/platform-browser 中导入 BrowserModule 并添加到 imports 数组中。
这是要让一个最小的应用在浏览器中运行时，对 Angular 的最低需求。
QuickStart 应用不做别的，也就先不需要其他模块。在真实的应用中，我们可能还得导入 FormsModule 、 RouterModule 和 HttpModule 。这些会在 英雄指南教程 中引入。
步骤 3 ：创建组件并添加到应用中
每个 Angular 应用都至少有一个组件： 根组件 ，这里名叫 AppComponent 。
组件是 Angular 应用的基本构造块。每个组件都会通过与它相关的模板来控制屏幕上的一小块（视图）。
使用下列内容创建组件文件 app/app.component.ts:
app/app.component.ts
-
import { Component } from '@angular/core'; -
@Component({ -
selector: 'my-app', -
template: '<h1>My First Angular 2 App</h1>' -
}) -
export class AppComponent { }
QuickStart 应用具有和其它 Angular 组件相同的基本结构：
- 一个 import 语句 。它让你能访问 Angular 核心库中的
@Component装饰器函数 。 -
一个 @Component 装饰器 ，它会把一份 元数据 关联到
AppComponent组件类上： -
- selector 为用来代表该组件的 HTML 元素指定一个简单的 CSS 选择器。
- template 用来告诉 Angular 如何渲染该组件的视图。
-
组件类 通过它的模板来控制视图的外观和行为
through its template. Here, you only have the root component,
AppComponent. Since you don't need any application logic in the simple QuickStart example, it's empty.这里，你只有一个根组件
AppComponent。由于这个简单的 QuickStart 范例中并不需要应用逻辑，因此它是空的。
我们还要 导出 这个 AppComponent 类，以便让刚刚创建的这个应用导入它。
编辑 app/app.module.ts 文件，导入这个新的 AppComponent ，并把它添加到NgModule 装饰器中的 declarations 和 bootstrap 字段：
app/app.module.ts
-
import { NgModule } from '@angular/core'; -
import { BrowserModule } from '@angular/platform-browser'; -
import { AppComponent } from './app.component'; -
@NgModule({ -
imports: [ BrowserModule ], -
declarations: [ AppComponent ], -
bootstrap: [ AppComponent ] -
}) -
export class AppModule { }
步骤 4 ：启动应用
现在，我们还需要做点什么来让 Angular 加载这个根组件。
，内容如下：
app/main.ts
-
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -
import { AppModule } from './app.module'; -
const platform = platformBrowserDynamic(); -
platform.bootstrapModule(AppModule);
这些代码初始化了应用所在的平台，然后使用此平台引导你的 AppModule 。
为什么要分别创建 main.ts 、应用模块 和应用组件的文件呢？
应用的引导过程与 创建模块或者 展现视图是相互独立的关注点。如果该组件不会试图运行整个应用，那么测试它就会更容易。
但我们应该用正确的方式组织 Angular 应用的文件结构。 启动 App 与展现视图是两个相互分离的关注点。 把这些关注点混在一起会增加不必要的难度。 可以通过使用不同的引导器 (bootstraper) 来在不同的环境中启动 AppComponent 。 测试组件也变得更容易，因为不需要再运行整个程序才能跑测试。 让我们多花一点精力来用 “正确的方式” 实现它。
步骤 5 ：定义该应用的宿主页面
在 目录下创建一个 index.html 文件，并粘贴下列内容：
index.html
-
<html> -
<head> -
<title>Angular 2 QuickStart</title> -
<meta charset="UTF-8"> -
<meta name="viewport" content="width=device-width, initial-scale=1"> -
<link rel="stylesheet" href="styles.css"> -
<!-- 1. Load libraries --> -
<!-- Polyfill(s) for older browsers --> -
<script src="node_modules/core-js/client/shim.min.js"></script> -
<script src="node_modules/zone.js/dist/zone.js"></script> -
<script src="node_modules/reflect-metadata/Reflect.js"></script> -
<script src="node_modules/systemjs/dist/system.src.js"></script> -
<!-- 2. Configure SystemJS --> -
<script src="systemjs.config.js"></script> -
<script> -
System.import('app').catch(function(err){ console.error(err); }); -
</script> -
</head> -
<!-- 3. Display the application --> -
<body> -
<my-app>Loading...</my-app> -
</body> -
</html>
这里值得注意的地方有：
- JavaScript 库：
core-js是为老式浏览器提供的填充库，zone.js和reflect-metadata库是 Angular 需要的，而SystemJS库是用来做模块加载的。 SystemJS的配置文件和一段脚本，它导入并运行了我们刚刚在main文件中写的app模块。<body>中的<my-app>标签是 应用程序生活的地方！
添加一些样式
样式不是必须的，但能让应用更漂亮。 index.html 中假定有一个叫做 styles.css 的样式表。
在 project root 目录下创建一个 style.css 文件，并且用下面列出的最小化样式作为初始样式。
styles.css (excerpt)
/* Master Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;}
body {
margin: 2em;}要查看本文档中所用到的主样式表的完整集合，参见 styles.css
Step 6: Build and run the application
打开终端窗口，并输入如下命令：
npm start 到 这里 了解更多关于 package.json 中其它脚本的知识。
该命令会同时运行两个并行的 node 进程：
- TypeScript 编译器运行在监听模式。
- 一个名叫 lite-server 的静态文件服务器，它把
index.html加载到浏览器中，并且在该应用中的文件发生变化时刷新浏览器。
稍后，一个浏览器页标签就会打开并显示出来。
Step 7: Make some live changes
尝试把 app/app.component.ts 中的消息修改成 "My SECOND Angular 2 App" 。
TypeScript 编译器和 lite-server 将会检测这些修改，重新把 TypeScript 编译成 JavaScript ，刷新浏览器，并显示修改过的消息。
当终止了编译器和服务器之后，可以关闭 terminal 窗口。
收工，下一步
项目的最终目录结构看起来是这样的：
要查看文件的内容，请打开 live example 。
下一步干什么？
第一个应用没做什么，它只是一个 Angular 2 的 "Hello, World" 而已。
我们写了一个很小的 Angular 组件，创建了一个简单的 index.html ，并且启动了一个静态文件服务器。
package.json 和
index.html 的修改将仅限于添加库或一些 css 样式，不用再需要修改模块加载部分。