Angular 2 - Hello World 例子

本页编辑的时候使用 Angular-CLI 1.0.0-beta.4 版本。

由于 Angular 2 用 Typescript，需要“翻译（transpile）”才能用。为了方便大家、顺便也降低学习成本、加快开发。 我们就用 Angular-CLI 命令行（类似 Yeoman 生成器）。

平常开始新 Angular项目，需要添加一些基本文件：

tsconfig.json
tsconfig.json
package.json
typings.json
app/

None

再安装需要的模块（npm install –save xxxxxxxx）。 看状况，配置 SystemJS 或者 Webpack 后才能开始写代码。。。 详细请看 https://angular.io/docs/ts/latest/quickstart.html 不解释。

时间关系

我们不用这么麻烦的方法。我们用简化这么繁琐的“日常工作”。Angular CLI 就是简化这些工作缩短为三行代码。 Angular CLI 包含了生成 Component、Directive、Route、Pipe、Service，可以构建 production 版本， 支持 live-reload，支持 test，推送到 Github page。

安装 Angular CLI

npm install -g angular-cli

Bash

Angular CLI 需要 Node 4.0+ 才能安装。

使用 Angular CLI

创建新项目，叫做 【wdt】

ng new wdt

Bash

Angular CLI 就自动创建一个叫做【wdt】的文件夹，并且自动安装需要的模块（npm install）。

安装模块完成后，我们就可以用 VS Code 写代码了（或者你最爱的文本编辑器）。

运行开发伺服器（dev server）

ng serve

Bash

打开 http://localhost:4200/ 就可以预览你的 app 了。

Hello World

用 Angular CLI 自动生成的 app 基本就是个 Hello World 了。如果要在网页看到 Hello World，简单修改一下

// src/app/wdt.component.ts
import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'wdt-app',
  templateUrl: 'wdt.component.html',
  styleUrls: ['wdt.component.css']
})
export class WdtAppComponent {
  //title = 'wdt works!';
  title = 'Hello World!';
}

TypeScript

扩展阅读