冠军 阅读(68) 评论(0)

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

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

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

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

See It Run!

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

Output of quickstart app

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

这是最终的文件结构:

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 页会被打开,然后显示出:

Output of quickstart app

祝贺你!我们上路了。

如果你看到 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 的过程中,我们会做大量的此类工作。