QuickStart

快速开始的目标是编译运行一个超级简单的基于TypeScript的Anguler 2应用，并且为接下来的文档示例建立一个开发环境，同时它也能作为现实应用开发的基础。

试试看！

尝试用plunker加载这个在线示例，它将会展示一个简单的消息：

编译这个app！

• 准备： 安装Node
• 步骤1：创建和配置项目
• 步骤2：第一个Angular组件
• 步骤3：添加main.ts
• 步骤4：添加index.html
• 步骤5：编译并运行app！
• 作一些改变

准备：安装Node.js

如果你的机器上没有Node.js和npm的话，请先安装。

确保你的node版本至少为v5.x.x, npm版本至少为3.x.x，你可以通过在命令行执行node -v和 npm -v来查看。更老的版本将会引发错误。

步骤1：创建和配置项目

我们将按以下顺序进行：

• (a) 创建项目目录
• (b) 添加package和configuration文件
• (c) 安装package

(a) 创建项目目录

mkdir angular2-quickstart
cd angular2-quickstart

(b) 添加package定义和configuration文件

在项目路径中添加以下package定义和configuration文件：

• package.json 列出QuickStart app依赖的包，以及定义一些有帮助的script。详见Npm Package Configuration
• tsconfig.json 是TypeScript编译配置文件。详见TypeScript Configuration
• typings.json 标识了TypeScript定义文件。 详见TypeScript Configuration
• systemjs.config.js，SystemJS配置文件。

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.2",
    "@angular/compiler":  "2.0.0-rc.2",
    "@angular/core":  "2.0.0-rc.2",
    "@angular/http":  "2.0.0-rc.2",
    "@angular/platform-browser":  "2.0.0-rc.2",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.2",
    "@angular/router":  "2.0.0-rc.2",
    "@angular/router-deprecated":  "2.0.0-rc.2",
    "@angular/upgrade":  "2.0.0-rc.2",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.12",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

安装package

我们使用npm来安装列在package.json文件中的packages。在命令窗口中执行以下命令：

npm install

typings文件夹在npm install之后可能不会自动创建，如果这样，请手动安装

npm run typings install

设置已经全部完成了。让我们开始写代码吧。

步骤2：第一个Angular组件

首先我们创建一个文件夹来存放我们的应用，并且添加一个超级简单的Angular组件。

在根目录下创建一个app子目录

mkdir app

创建组件文件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 { }

步骤3：添加main.ts

现在我们需要告诉Angular使之加载根组件。创建文件app/main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

步骤4：添加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>

添加一些样式

样式不是必须的，但它们能让页面更美观。index.html预定义了一个叫styles.css的样式表

在项目根目录下创建文件styles.css，添加如下最简单的样式。 如果需要文档示例的完整样式，请参考styles.css

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
body {
  margin: 2em;
}

 /*
  * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
  * for the full set of master styles used by the documentation samples
  */

步骤5：编译并运行app！

打开命令窗口并执行如下命令

npm start

这个命令将运行两个并行node进程

1. 监控模式下的TypeScript编译器
2. 一个叫lite-server的静态服务器，它将在浏览器中加载index.html并在每次应用文件变更时刷新浏览器

做的漂亮！

作一些改变

尝试将消息改为“My SECOND Angular 2 app”

总结

我们最终的项目目录结构看起来是这样的：

.
├── app
│   ├── app.component.ts
│   └── main.ts
├── node_modules ...
├── typings ...
├── index.html
├── package.json
├── styles.css
├── systemjs.config.js
├── tsconfig.json
└── typings.json

下一步做什么？

我们的第一个应用不会包含太多东西。它就是一个Angular 2版的“Hello, World”。

在我们的第一次实践中，我们让它保持足够简单：我们写一个Anguar组件，创建了一个简单的index.html，并且运行了一个静态文件服务器。这是我们所能期待的“Hello, World”应用的全部内容了。

接下来我们将要用Angular 2建立一个小型应用demo。