Angular2的5分钟快速入门的翻译（不包括TypeScript说明）

2 年 ago

韵, 科

6 minutes

Google I/O 2016的许多会议，提供了许多能够显著改变服务开发效率的框架。现在，我将翻译Angular 2的5分钟快速入门教程。本文省略了解释，只是为了让您进行所需的QuickStart文件复制操作，这是无解释版本。让我们一起挑战在5分钟内成功创建Hello World（我的第一个Angular 2应用程序）。

如果一切顺利，为了回顾，请也阅读这份附有说明的翻译。

我们的QuickStart的目标是构建和运行一个非常简单的TypeScript的Angular 2应用程序。在本文之外的教程和其他文档中提到的示例是为实际应用程序建立基础的，但在本文中，我们也将建立用于这些示例的开发环境。

让我们试试看吧！

请尝试运行可执行的示例。将示例应用程序加载到plunker中，并显示示例消息。

让我们构建一个应用程序！（目录）

* 前提条件：安装Node.js。
* 步骤1：创建应用项目文件夹，定义依赖包的依赖关系，并进行特殊的项目配置。
* 步骤2：创建应用的Angular根组件。
* 步骤3：添加main.ts，并指定根组件给Angular。
* 步骤4：添加用于托管应用的index.html。
* 步骤5：构建并运行应用。
* 对应用进行一些修改。
* 结束。

提及Node.js时的前提条件。

如果尚未安装，将安装Node.js®和npm。

请在终端或控制台窗口中运行node -v和npm -v命令，以确认其版本号分别为node v5.x.x和npm 3.x.x。过旧或过新的版本将会导致错误。

（注：由于node的最新版本是6.x，因此最好安装nvm或干净安装旧版本。）

从GitHub上下载QuickStart的源代码，以替代以下解释中的每个步骤，以便简要地完成以下步骤。

步骤1：创建和设置项目

在这个步骤中，将处理以下内容。

(a) 创建项目文件夹。
(b) 添加包定义和配置文件。
(c) 安装软件包。

(a) 创建项目文件夹。

> mkdir angular2-quickstart
> cd    angular2-quickstart

（b）添加包定义和配置文件。

将下面的包定义文件和配置文件添加到项目文件夹中。

package.json文件列出了QuickStart应用程序所依赖的包，并定义了一些有用的脚本。详细信息请参阅NPM包配置。

tsconfig.json是TypeScript编译器的配置文件。有关详细信息，请参阅TypeScript的配置。

typings.json 是 TypeScript 的定义文件。请参阅 TypeScript 的配置以获取详细信息。

systemjs.config.js是SystemJS的配置文件。在下面进行讨论。

{
  "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.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "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.10",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

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

{
  "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"
  }
}

/**
 * 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': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

(c) 安装包裹。

请使用npm安装在package.json中列出的软件包。请在终端窗口（在Windows中是命令窗口）中输入以下命令。

> npm install

我们已经准备好了，现在，让我们写一些代码吧。

步骤2：初始的Angular组件

那么，让我们创建一个文件夹，将我们的应用程序放入其中。然后，让我们创建一个非常简单的Angular组件。

请在应用程序用的子文件夹中创建一个子文件夹。
请将一个子文件夹添加到项目的根目录中。

> mkdir app

在新建的文件夹中，使用以下内容创建app/app.component.ts文件


    import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App</h1>'
    })
    export class AppComponent { }

第三步：添加main.ts

让Angular加载根组件。请创建一个包含以下内容的app/main.ts文件。


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

步骤四：添加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
  */

第五步：构建和运行应用程序！

请打开终端窗口，并输入以下命令。


> npm start

这个命令会同时执行两个并发的node进程。

lite-serverと呼ばれる静的サーバー　ブラウザでindex.htmlをロードし、アプリケーションファイルが更新された時にリフレッシュします。

一段时间后，浏览器将会打开一个标签页，并显示QuickStart应用程序的输出。

干得好！

修改

让我们将消息更改为”My SECOND Angular 2 应用程序”。

TypeScript和lite-server会检测变化。一旦发现变化，TypeScript会重新编译为JavaScript，浏览器则会更新并显示新的消息。这是一种聪明的应用程序开发方法！

当你使用编译器和服务器结束后，请关闭终端窗口。

总结

我们项目的文件夹结构如下所示。

angular2-quickstart
    +app
        +app.component.ts
        +main.ts
    +node_modules ...
    +typings ...
    +index.html
    +package.json
    +styles.css
    +systemjs.config.js
    +tsconfig.json
    +typings.json

下面是文件的内容。(作者注：总之，复制以下的文件并整理文件！)

    import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App</h1>'
    })
    export class AppComponent { }

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

<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>

{
  "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.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "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.10",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

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

{
  "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"
  }
}

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
  */

/**
 * 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': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

下一个是什么？

我们的第一个应用程序并没有做很多事情。基本上就是Angular 2 的”Hello World”。

我保留了最初的应用程序。创建了一个小型的Angular组件，并编写了一个简单的index.html文件，然后在静态文件服务器上启动。这就是我们期望的“Hello World”应用程序的全部内容。

我们有更大的抱负！

好消息是，现在设置过程中几乎没有额外负担了。你可以编辑package.json文件来更新库，还可以将所需的库和CSS样式表添加到index.html中。

我们已经达到了能够进行下一步的阶段。下一步是尝试构建一个小型的应用程序，以展示我们能够使用Angular2来构建更大的应用程序。

让我们来尝试一下《英雄之旅》教程吧！