TypeScript 5 Angular 2

TypeScript 5 分钟快速入门

翻译：Angular 2 - TypeScript 5 分钟快速入门

原文地址：https://angular.io/docs/ts/latest/quickstart.html

Angular 2 终于发布了 beta 版。这意味着正式版应该很快就要发布了。

让我们使用 TypeScript 语言从头创建一个超级简单的 Angular 2 应用。

如果不喜欢 Typescript，你也可以使用 JavaScript 来完成这个演练。

See It Run!

官方提供了一个在线的演示，地址在这里：live example，不过你可能不能正常访问。还是让我们自己来实践一下算了。不过，可以先看一下运行的结果。

你很快就可以自己完成它。

这是最终的文件结构：

app
    +app.component.ts
    +boot.ts
index.html 

也就是说，根目录下有一个 index.html 文件，在 app 目录下，有两个 Typescript  文件。

我们需要如下的 4 个步骤来完成它。

1. 创建开发环境
2. 为我们的应用编写 root component
3. 启动 root component 控制主页面
4. 编写主页面 (index.html)

如果我们忽略掉那些旁支末节的说明，按照这些步骤，我们真的可以在 5 分钟之内就完成这个演练的。当然了，多数人对 why 和 how 一样感兴趣，所以，时间可能会长一点。

创建开发环境

首先，我们需要一个地方来作为项目文件夹，保存一些库文件，一些 TypeScript 配置，以及一个你喜欢的 TypeScript 编辑器。如果没有的话，其实文本编辑器就可以了。

创建项目文件夹

mkdir angular2-quickstart
cd    angular2-quickstart

添加需要的库

推荐使用 npm  来获取和管理我们开发所使用的库。

还没有安装 npm? 现在就安装它，我们马上就会使用，而且在这个文档中会不断使用它。这里有安装 NPM 的介绍。

添加名为 package.json 的文件，将下面的内容粘贴到文件中。:

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

想知道为什么这个写吗? 在这里有详细的说明： appendix below

使用下面的命令来安装这些 packages. 打开一个终端窗口，在 Windows 中使用 command window 就可以，然后执行下面的 npm 命令。

npm install

在安装过程中，会看到一些吓人的红色错误信息，无视它们就可以，安装将会成功，在  appendix below  有详细的说明。

配置 TypeScript

TypeScript 并不能直接在浏览器中执行，所以我们需要使用 TypeScript 编译器进行处理，我们必须对 TypeScript 编译器进行一些特殊的配置。

添加名为 tsconfig.Json 的文件到项目文件夹中，将下面的内容粘贴到文件中。

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

还是在 appendix below 中有详细的说明。

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

第一个 Angular Component

Component 是 Angular 中的基础概念，一个 Component 管理一个视图 View， View 是页面中的一个片段，我们用来显示信息给用户并且响应用户的反馈。

从技术上说，Component 是一个用来控制 View 模板的类。在创建 Angular App 的时候，我们会编写大量的 Component。这是我们的第一次尝试，所以，我们会保持这个组件惊人的简单。

创建保存应用源码子文件夹

我们会将应用代码保存在名为 app 的子文件夹中，在控制台窗口中执行下面的命令创建文件夹。

mkdir app
cd    app

添加 Component 文件

现在，我们创建名为 app.component.ts 的文件，将下面的代码粘贴进来。

app/app.component.ts

import {Component} from 'angular2/core';

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

我们把上面的代码详细分析一下。先从最后一行的定义类开始。

The Component class

在代码的最后一行，是名为 AppComponent 的什么都没有做的类，在我们开始创建一个应用的时候，我们可以扩展这个类的属性和业务逻辑。由于我们还不需要在这个 QuickStart 中做什么，我们的 AppComponent 类目前还是空的。

Modules

Angular 应用是模块化的，其中包含一系列各有用途的独立文件。

多数应用文件导出一些东西，类似 Component，我们的 app.component 导出 AppComponent.

app/app.component.ts (export)

export class AppComponent { }

这个导出的行为将这个文件转化为了一个模块 module，文件的名称（不包含扩展名）通常作为模块的名称，根据这个规则，'app.component' 就是我们第一个模块的名称。

一个精巧的应用将会在一个组件构成的虚拟树中包含一些子组件，更加复杂的应用将会包含更多的文件和模块。

Quickstart 不复杂，我们只需要一个组件，在我们这个小应用中，组件还扮演着组织应用的角色。

模块依赖其它的模块。在 TypeScript 版本的 Angular 应用中，当我们需要其他模块提供服务的时候，我们将需要的模块导入到当前模块中。当其它的模块需要使用 AppComponent 的时候，可以使用下面的语法导入 AppComponent ，如下所示：

app/boot.ts (import)

import {AppComponent} from './app.component'

Angular 也是模块化的，它本身是一系列库模块的集合，每个库就是一个提供服务的模块，被未来的模块所使用。

当我们需要 Angular 中提供的服务的时候，我们就从 Angular 的库模块中导入。现在我们就需要 Angular 帮助我们，以便定义我们 Component 中的元数据。

Component Metadata

在我们为 Class 提供元数据之后，它才会成为 Angular Component. Angular 需要元数据来理解如何构造视图，以及这个组件如何同应用中的其他部分进行互动。

我们使用 Angular 提供的 Component 函数来定义 Component 的元数据，通过导入 Angular 的基础库 angular2/core， 我们可以访问这个函数。

app/app.component.ts (import)

import {Component} from 'angular2/core';

在 TypeScript 中，我们将这个函数应用到类的前缀来装饰这个类，使用 @ 符号，在组件类的上方调用这个函数。

app/app.component.ts (metadata)

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})

@Component 告诉 Angular 这个类是一个组件 Componet，配置对象传递给了 @Compoent 函数，包含两个字段，selector 和 template.

selector 指定了一个简单的 CSS 选择器，选择名为 my-app 的 HTML 元素。在 Angular 遇到页面中的 my-app 元素的时候， Angular 将会创建我们的 AppComponent 实例并显示它。

记住这个 my-app 选择器，在我们编写 index.html 的时候，我们需要这些信息。

template 属性保存伴随的模板，模板来自 HTML, 告诉 Angular 如何渲染视图，我们的视图只有一行 "My First Angular App"

现在我们需要告诉 Angular 如何加载组件。

Give it the boot

在 app 文件夹中，添加一个新文件 boot.rs，如下所示。

app/boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

我们需要两件事情来启动应用：

1. Angular 的浏览器函数 bootstrap
2. 我们刚刚编写的根组件

我们把它们导入进来，然后调用 bootatrap，将 AppComponent 组件作为参数传递给 bootstrap.

可以在 appendix below 中学习为什么我们从 angular2/platform/browser 导入 bootstrap ，以及为什么要创建独立的 boot.ts 文件。

我们已经请求 Angular 将我们的组件作为根来启动应用。Angular 将会把它放在哪里呢？ 

Add the index.html

Angular 在我们 index.html 中特定的位置显示我们的应用，现在是创建这个文件的时候了。

我们不会将 index.html 保存在 app/ 文件夹中，我们将它保存在上一级文件夹中，就在项目的根目录中。

cd ..

现在创建 index.html 文件，将下面的内容粘贴到文件中。

index.html

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <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>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

这个文件由三个主要的部分组成:

1. 加载我们需要的脚本文件，. Angular 2 需要 angular2-polyfills.js 和 Rx.js .

2. 我们配置了 System, 然后通过它来导入和加载我们刚刚编写的启动文件。.

3. 在 <body> 标记中添加了  <my-app> . 这就是我们应用执行的位置!

需要一些东西来定位和加载我们的应用模块，我们这里使用 SystemJS 做这件事。还有没有提到的方式也可以，但是 SystemJS 是最好的选择。我们喜欢使用它，它也能正常工作。

关于 SystemJS 配置的说明已经超出了今天的内容范围，我们将在  appendix below 中进行简单的介绍。

当 Angular 在 boot.ts 中调用 bootstrap 函数的时候，它将会读取 AppComponent 的元数据，发现 my-app 选择器，定位名为 my-app 的元素，然后在这个元素的标记之间加载我们的应用。

Compile and run!

打开一个终端窗口，输入下面的命令：

npm start

这个命令执行两个并行的 node 进程。

1. TypeScript 编译器运行在监控模式。
2. 称为  lite-server 的静态文件服务器，它会将 index.html 加载到浏览器中，当应用文件刷新的时候自动重新刷新浏览器。

稍等一下，一个浏览器的 Tab 页会被打开，然后显示出：

祝贺你！我们上路了。

如果你看到 Loading... ，而不是上述内容，查看：Browser ES6 support appendix.

Make some changes

将显示的信息修改为、 "My SECOND Angular 2 app".

TypeScript 编译器和 Lite-server 将会监控文件，它们将会检测到这些变化，自动重新编译 TypeScript 到 JavaScript ，刷新浏览器，显示修改之后的信息。

这是开发应用极好的方式。

 完成之后，我们可以关闭中断窗口。

Final structure

最终的项目结构看起来如下所示：

angular2-quickstart

node_modules

app

     app.component.ts

     boot.ts

index.html

package.json

tsconfig.json

下面是文件的内容：

app/app.component.ts

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

app/boot.ts

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

index.html

<html>
    <head>
        <title>Angular 2 QuickStart</title>
        <!-- 1. Load libraries -->
        <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>
        <!-- 2. Configure SystemJS -->
        <script>
            System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('app/boot')
                  .then(null, console.error.bind(console));
        </script>
    </head>
    <!-- 3. Display the application -->
    <body>
        <my-app>Loading...</my-app>
    </body>
</html>

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules"
    ]
}

Wrap Up

我们的第一个应用没有做多少事，就是一个基本 Angular 2 版本的 "Hello, World"

我们保持第一个应用足够简单：我们编写了一点 Angular 组件，添加在一些 JavaScript 库到 index.html 中，并且使用一个静态文件服务器启动了应用。这就是我们期望 “Hello,World " 所做的事情。

我们有更大的目标

好消息是更大的目标在等着我们，我们将只需要更新 package.json 来更新库。只在需要的时候，我们打开 index.html 文件来添加库或者是 css 样式表。

 我们会使用 Angular 2 来创建一个小的应用来演示更多的内容。

来继续学习 Tour of Heroes Tutorial!

Appendices

最后是一系列我们涵盖内容中涉及的知识点的速览。

这里没有基础的资料，对于好奇者来说可以继续读下去。 

Appendix: Browser ES6 support

 Angular 2 基于一些 ES2015 特性，大多数在流行的浏览器中可以找到。有些浏览器（包括 IE11 ) 需要一个垫片来支持需要的功能。试着在 index.html 文件的其他脚本之前加载垫片库。

<script src="node_modules/es6-shim/es6-shim.js"></script>

Appendix: package.json

npm 是流行的包管理程序，Angular 应用开发者依赖它来获取和管理应用所使用的库。

我们在 npm 的 package.json 文件中，指定我们需要使用的包。

Angular 团队建议使用的包列在 dependencies 和 devDependencies 配置节中。

package.json (dependencies)

{
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

还有一些其它的包选择，我们建议使用这些包，因为它们在一起工作的很好。现在使用它们，以后可以根据你的爱好和习惯使用其它的包。

在 package.json 中，包含一个可选的 scripts 配置节，我们可以定义一些有用的命令来执行开发和构建任务。我们已经在建议的 package.json 中包含了一些命令。

package.json (scripts)

{
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  }
}

我们已经看到了如何同时执行编译器和服务器的监控任务。

npm start

我们可以使用下面的方式来执行 npm 脚本： npm run + script-name. 下面是三个脚本的目的:

• npm run tsc - 执行一次 TypeScript 编译器

• npm run tsc:w - 在监控模式执行 TypeScript 编译器; 进程保持执行。等到 TypeScript 文件变化之后，重新编译它。

• npm run lite - 执行 lite-server, 一个轻量级的，静态文件服务器。, 由 John Papa 编写和维护，对 Angular 使用路由的应用有着杰出的支持.

Appendix: Npm errors and warnings

当执行 npm install 没有错误的时候一切都好， 会有一些 npm 警告信息，一切完全没有问题。

我们经常在一系列的 gyp 错误信息之后看到 Npm 的警告信息。忽略它们吧，包可能试图使用 node-gyp 重新编译自己。如果重新编译失败，包会进行恢复（典型地使用上一个 build 版本）而且正常工作。 

Appendix: TypeScript configuration

我们添加了一个 TypgeScript 配置文件 tscofnig.json 到我们的项目，在编译生成 JavaScript 的时候来指导编译器。可以从 TypeScript 官方的 TypeScript wiki 来获取关于 tsconfig.json 的详细说明。

我们使用的选项和标志都是基本的。

我们花一点时间来讨论 noImplicitAny 标志。TypeScript 开发者不同意它到底应该是 true 还是 false。这里没有正确的答案，我们以后也可以修改它。但是我们现在的选择会在大的项目中造成很大的不同，所以，它值得讨论一下。

当 noImplicitAny 标志为 false 的时候，如果编译器不能根据变量的使用来推断变量的类型，直接默认为 any 类型。这就是为什么称为 "implicitly any "，

当 noImplicitAny 标志为 true 的时候，TypeScript 编译器不能推断类型，它仍然生成 JavaScript 文件，但是报告一个错误。

在这个 QuickStart 和其它的开发示例手册中，我们将 noImplicitAny 标志设置为 false.

希望强制类型检查的开发者可能会设置 noImplicitAny 标志为 true。我们仍然可以将变量的类型设置为 any，如果这是更好的选择的话。

如果我们将 noImplicitAny 标志设置为 true，我们会得到一个显式的索引错误。如果我们觉得没有用，而是被困扰了，可以使用下面的标志来抑制它们。

1. "suppressImplicitAnyIndexErrors":true

Appendix: SystemJS Configuration

QuickStart 使用 SystemJS 加载应用和库模块。还有一些替代库页可以做的很好比如著名的 webpack 。SystemJS 在需要简单清楚的时候是一个好的选择。

各种模块加载器都需要进行配置，一旦文件变多，我们开始考虑生产力和性能的时候，所有的配置都变得复杂。

我们建议你精通所选择的加载器。

更多关于 SystemJS 的配置信息参考这里 here

由于以上的考虑，我们这里作了什么呢？

index.html (System configuration

<script>
  System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

package 节点告诉 SystemJS 当遇到一个来自 app 文件中的模块请求的时候如何去做。

当应用中的一个 TypeScript 文件有类似下面的导入语句时，我们的 QuickStart 会发出一些请求。

boot.ts (excerpt)

import {AppComponent} from './app.component'

注意，from 后面的模块名称没有包含扩展名，package 的配置告诉 SystemJS 默认的扩展名是 ‘js'，JavaScript 文件。

这是说的通的，因为我们会在编译 TypeScript 到 JavaScript 之后运行应用。

在 plunker 网站上的动态演示中，我们在浏览器中即时编译，演示没有问题，但是对于开发或者生产环境就不适合。

有许多因素我们建议在运行应用之前的 build 阶段编译成 JavaScript 代码:

• 在浏览器中，我们可以看到隐藏在后面的编译警告和错误信息。We see compiler warnings and errors that are hidden from us in the browser.

• 预编译简化了模块加载过程，而且当它是一个独立的外部步骤的时候更容易检测问题.

• 由于浏览器不用浪费时间进行编译，预编译意味着更快的用户体验.

• 迭代开发过程会更快，因为我们只需要编译变化的文件。一旦应用超过一定的量，我们就会注意到区别。

• 预编译适应持续集成，测试，发布。

System.import 调用告诉 SystemJS 导入 boot 文件（boot.js ... 等到编译之后，记得吗？）boot 是我们告诉 Angular 启动应用的地方，我们同时也捕获和记录启动中的错误信息到控制台中。

其它的模块或者由 Angular 自身或者由前面的模块加载。

Appendix: boot.ts

Bootstrapping is platform-specific

我们从 angular2/platform/browser 中导入 bootstrap 函数，而不是 angular2/core, 有一些原因。

我们只在希望跨所有平台目标的时候调用 "core" ，是的，多数 Angular 应用仅仅运行在浏览器中，多数情况下我们调用这个库的函数，如果我们总是为浏览器的话，这是一个很好的选择。

但是，有可能在不同的环境下加载组件，我们可能在移动设备中使用  Apache Cordova ,我们希望在服务器渲染首页，以便提高加载性能或者便于 SEO。

这些目标需要我们从其它库中导入不同的函数。

为什么创建独立的 boot.ts 文件?

boot.ts 文件很小，仅仅是一个 QuickStart，我们可以将仅有的几行合并到 app.component 文件中，减少一些复杂度。

下面的原因使我们没有这样做：

1. 很容易写好。
2. 可测试
3. 可重用
4. 关注点分离
5. 可以学到更多的导入和导出

容易

确实是额外的步骤和额外的文件，有多难呢？

我们会在更多的应用中看到独立的 boot.ts 的优点，让我们用很低的代价学到更多好的习惯。

Testability

即使我们知道我们永远不会测试这个 QuckStart ，我们也应该从一开始考虑到可测试性。

如果同一个组件文件中包含了 bootstrap 调用的话，它是很难测试的。一旦我们加载这个组件文件进行测试，bootstrap 函数就会试图加载应用到浏览器中。由于我们并不希望运行整个应用，它会报错，

将 bootstrap 功能移到独立的 boot.ts 文件中，可以避免这个错误，保持组件文件的清晰。

Reusability

在应用开发过程中，我们重构，重命名文件，如果文件中调用了 bootstrap，我们不能就不能做这些事情。我们不能移动，不能在其它应用中重用组件，不能为了更好的性能在服务区端预先渲染。

Separation of concerns

组件的职责是呈现和管理视图。

启动应用对视图来说完全无关。

Import/Export

在分离的 boot.ts 文件中，我们学到了 Angular 的基本技能：如何从模块导出，如何导入到其它模块。在学习 Angular 的过程中，我们会做大量的此类工作。

 

 

分类: AngularJS, Web Front, javascript