Angular2 5分钟快速入门（带有TypeScript解释）的翻译

2 年 ago
清, 宇
7 minutes

我在Google I/O 2016中看到了很多会议，我为即将来临的服务开发提高效率的框架Angular2的5分钟快速入门进行了翻译。由于我翻译包含了原文中的所有说明，所以可能需要超过30分钟的时间，请不要相信5分钟的说法。

请转到此处以查看省略了所有说明的内容，并在那里挑战5分钟内的Hello World成功。

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

来试试看吧!

请尝试执行一个可行的示例。将示例应用加载到Plunker中，并显示示例消息。

mes

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

* 前提条件: 安装 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的源代码，然后按以下简单步骤完成。

步骤一：创建和设置项目

在这个步骤中，我们将处理以下事项。

(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

在安装过程中，可能会以红色文字显示需要注意的错误。大多数情况下，安装会正确处理这些错误并成功完成。

npm错误和警告

如果在npm install完成后，控制台上没有显示以npm ERR!开头的消息，则说明一切都进行得很顺利。可能会在中途显示一些npm WARN消息，但即使这样，也没有问题。

通常在出现gyp ERR!后会接着看到一些npm WARN消息，但请忽略它们。如果需要使用node-gyp重新编译包，可能需要使用它们。如果重新编译失败，包将会被恢复（通常是编译后的版本），一切都将正常运行。

请务必确保在npm install完成后没有出现npm ERR!消息。

使用npm添加所需的库和包

在开发Angular应用程序时，将安装所需的库和包的任务交给npm包管理器。Angular团队建议为dependencies和devDependencies部分提供一个起始设置包。有关详细信息，请参阅npm packages页面。

有用的脚本

我们建议在package.json中提供一些脚本。它们将处理开发中的共同任务。

“`package.json (scripts)

{
“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”
}
}
“`
npm脚本通常通过npm run script name方式执行。（例如start）。有些命令不需要run关键字。以下是脚本的列表：

npm start – 执行编译并同时启动服务器，以”监视模式”运行。

npm run tsc – 执行一次TypeScript编译器。

npm run tsc:w – 在监视模式下执行TypeScript编译器。进程会持续运行，监视TypeScript文件的更改，并在文件更改时进行重新编译。

npm run lite – 运行lite-server。lite-server是一个轻量级的静态文件服务器，为使用路由的Angular应用程序开发提供了出色的支持。

npm run typings – 可以单独运行typings工具。

npm run postinstall – 在npm成功安装包时调用。此脚本将安装typings.json中定义的TypeScript定义文件。

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

步骤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 { }

AppComponent是应用程序的根。

所有的Angular应用程序至少有一个根组件。通常，根组件被命名为AppComponent。根组件托管客户端的用户体验。组件是Angular应用程序的基本构建块。组件通过关联的模板控制屏幕的一部分，即视图。

QuickStart只有一个非常简单的组件。但它具有对于所有组件来说是必需的结构。

使用一个或多个import语句来引用我们所需的内容。

@Component装饰器指示Angular使用哪个模板，以及如何生成组件。

组件类通过模板控制视图的显示和行为。

导入

Angular应用程序是模块。模块由几个文件组成，用于实现特定目标。Angular本身也是一个模块。Angular是由一系列相关功能的库模块组成，用于构建应用程序。

当需要模块或库时，使用导入语句。这是Angular 2核心的导入。这样，组件的代码就可以访问@Component装饰器了。

“`app/app.component.ts（导入）

import { Component } from ‘@angular/core’;

### @Component装饰器

组件是装饰器函数。该函数接受一个元数据对象作为参数。通过具有@符号的装饰器函数的前缀，将该函数应用于组件类，并将元数据作为对象一起调用。这是上面提到的类。

@Component装饰器使组件类与具有元数据的装饰器（decoration）相关联，以指示Angular如何生成和使用该组件。

“`app/app.component.ts（元数据）

@Component({
selector: ‘my-app’,
template: ‘

My First Angular 2 App

‘
})

这个特殊的元数据对象有两个字段：selector和template。

selector指定一个简单的CSS选择器，用于表示该组件的HTML元素。

该组件对应的元素被命名为my-app。当Angular在托管的HTML中找到my-app元素时，它将生成AppComponent的实例并显示它。

template指定与组件关联的模板。它以扩展HTML形式编写，指示Angular如何呈现组件的视图。

这个模板只有一行HTML，显示”My First Angular 2 App”。

更复杂的模板可能包含对组件属性的数据绑定，或者指定具有其他模板的应用程序组件。这些模板也可以指定其他组件。通过这种方式，Angular应用程序形成了组件树。

组件类

文件末尾有一个名为AppComponent的空类。

“`app/app.component.ts（类）

export class AppComponent { }

当我们开始构建大型应用程序时，可以通过在该类中添加属性和应用程序逻辑来扩展它。AppComponent类为空，因为在QuickStart中没有必要做任何事情。

我们将AppComponent导出，并可以在应用程序的其他位置导入它。当创建main.ts时会看到它。

第三步：添加main.ts文件

请使用以下内容在app/main.ts文件中加载Angular的根组件。


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

为了启动应用程序，需要导入两个东西。

Angular的浏览器引导函数
应用程序的根组件，AppComponent

然后，与AppComponent一起调用bootstrap。

bootstrap在平台上是特定的。

我们从@angular/platform-browser-dynamic而不是@angular/core导入了引导函数。这是因为引导不是核心的。因为启动应用程序的方法不止一种。实际上，大多数在浏览器中运行的应用程序都会调用此库的引导函数。

然而，我们也可以将组件加载到不同的环境中。我们可能会在Apache Cordova或NativeScript中加载它。我们可能希望在服务器上渲染应用程序的第一个页面，以提高启动性能和SEO。这些目标需要不同类型的引导函数。它们将从不同的库中导入。

为什么将main.ts与应用程序的组件文件分开创建？

main.ts和应用程序的组件文件都很小。在这个快速入门中，它们只是一个简单的示例。我们也可以将这两个文件合并为一个，这样可能可以避免复杂性。

本文旨在展示创建Angular应用程序的特定方法。启动应用程序是与显示视图不同的关注点。如果将关注点混合在一起，会变得更加复杂。可能可以在多个环境中以不同的引导方式启动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文件定义了托管web页面的应用程序。值得注意的HTML部分是：

JavaScript库

SystemJS配置文件脚本引用了我们之前写的main文件，指定了从哪里导入和执行应用程序的模块。

中的标签指示应用程序在哪里运行。

库

在index.html中加载以下脚本：

“`
index.html（库）

core-js的ES2015/ES6 shim是从这里开始的。该文件将在全局上下文（window）中应用ES2015（ES6）的重要功能的monkey patch。然后，zone.js和reflect-metadata是Angular2的polyfill。然后是用于模块加载的[SystemJS](https://angular.io/docs/ts/latest/quickstart.html#systemjs)库。

如果您关心提高用户体验、加载时间和内存占用等产品质量，则可以使用其他选项。

SystemJS

QuickStart使用[SystemJS](https://github.com/systemjs/systemjs)来加载应用程序和库的模块。还有其他替代方法，包括值得信赖的[webpack](https://angular.io/docs/ts/latest/guide/webpack.html)。SystemJS只是一个好的选择。但是我希望明确指出它只是一种选择，而不是每个人的首选。

每个模块加载器都需要一些配置，任何加载器的配置都会随着文件结构的多样化而变得复杂，并且需要考虑构建产品和性能。

我建议您熟悉所选加载器。如果您想了解有关SystemJS配置的更多信息，请访问[这里](https://github.com/systemjs/systemjs/blob/master/docs/config-api.md)。

请记住这些注意事项，那么在[之前添加的QuickStart中的systemjs.config.js配置文件](AddFiles)中，我们做了什么呢？首先，我们创建了一个映射，告诉SystemJS在导入某个模块时要查找的位置。然后，我们在SystemJS中注册了我们所有的包，即项目所依赖的所有包以及我们应用程序的包，即app。

尽管我们的QuickStart不会使用列出的所有包，但在大型应用程序中，它们中的许多都是必需的。至少在一个示例文档中，所有这些包都是必需的。

关于列出包，不需要的包只有在请求时才会加载，对运行时没有危害。
“`

当在SystemJS中请求来自app/文件夹模块时，app包会指示SystemJS应该怎么做。

在我们的QuickStart中，如果应用程序的TypeScript文件有以下导入声明，它将发起这样的请求。

“`
app/main.ts（import）

import { AppComponent } from ‘./app.component’;

请注意模块名称不包含文件扩展名。配置文件中指示SystemJS使用默认扩展名js，即JavaScript。

在运行应用程序之前，我们将TypeScript编译为JavaScript，因此使用ts编写模块并加载js是合理的。

在浏览器中进行编译

在plunker的可执行示例中，我们在浏览器中进行了对JavaScript的编译。这对于演示来说是一个好事。

但是，在开发过程中，请不要在浏览器中进行编译产品化的应用程序。

强烈建议在构建阶段执行JavaScript编译（即编译）之前对JavaScript进行编译。以下是原因：

您可以看到编译器的警告和错误。它们在浏览器中是隐藏的。
预先编译简化了模块加载过程。当编译是一个独立的外部步骤时，故障排查就变得更加容易。
预先编译会导致更快的用户体验。因为不需要浏览器编译，消除了编译所需的时间。

只编译已更改的文件，加快了开发速度。即使我们的应用程序变得非常庞大，我们也可以立即注意到差异。

预编译非常适合持续集成过程、构建、测试和部署。
“`

System.import是指示SystemJS从启动应用程序时指定的路径加载应用程序的主文件（ma.js、main.ts您还记得吗？）。在启动时，可以在控制台中获取启动时的日志和错误。

所有其他模块都是通过加载、import语句的请求或Angular本身的请求来加载的。

 

当Angular调用main.ts的引导函数时，Angular会读取AppComponent的元数据，寻找my-app选择器，并找到名为my-app的标签元素，然后渲染该标签之间的应用程序视图。

添加样式

样式不是必需的，但很好。我们也需要准备一个称为styles.css的样式表在index.html中使用。

请在项目的根文件夹中创建styles.css文件。现在我们可以开始样式化了。也许从以下最基本的样式开始会更好。如需使用示例文档中的完整主样式集，请参考styles.css文件。

styles.css（摘录）

h1 {
颜色：#369;
字体族：Arial, Helvetica, sans-serif;
字体大小：250%;
}
body {
外边距：2em;
}

请参见https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css以查看文档示例所使用的完整主样式集。


## Step 5: アプリのビルドと実行! <a name="Step5" />

ターミナルウィンドウを開いて、こちらのコマンドを入力してください。

运行npm的启动命令。


このコマンドは二つの並行してnodeプロセスを実行します。

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

しばらく経つと、ブラウザタブが開き、QuickStartアプリの出力が表示されるでしょう。

Great job!

## 変更を加える <a name="Changes" />

メッセージを"My SECOND Angular 2 app"へ変更してみましょう。

TypeScriptとlite-serverは監視しています。変更を検知し、TypeScriptをJavaScriptへ再コンパイルし、ブラウザを更新し、新しいメッセージを表示します。アプリケーションを開発する気の利いた方法ですね！

コンパイラとサーバーの利用が終わったら、ターミナルウィンドウを閉じてください。

## ラップアップ <a name="WrapUp" />


私たちのプロジェクトのフォルダ構成は以下のようになります。

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


以下がファイルの内容です。(**筆者註：要するに以下のファイルをコピーしてファイルを揃えましょう！**)

```app/component.ts
    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来构建一个小应用程序，以展示我们可以构建更大的应用程序。

我们来做一下《英雄之旅》的教程吧！

由Google提供支持 ©2010-2016。代码采用MIT风格许可证进行许可。文档采用CC BY 4.0许可证进行许可。

✖
广告
将在 10 秒后关闭
bannerAds