快速构建AngularJs 2.0 教程

短命女 2022-09-26 02:45 197阅读 0赞

*  [环境准备 ][Link 1]: 安装 Node.js and npm 。
 *  [步骤 1][1] ：创建并配置此项目。
 *  [步骤 2][2] ：创建应用
 *  [步骤 3][3] ：创建一个组件并添加到应用程序中。
 *  [步骤 4][4] ：启动应用程序。
 *  [步骤 5][5] ：定义一个页面作为该应用的宿主。
 *  [步骤 6][6] ：构建并运行此应用。
 *  [步骤 7][7] ：做一些修改，并立即查看效果。
 *  [收工，下一步][Link 2]

如果你的机器上还没有 Node.js 和 npm ，  [安装它们 ][Link 3] 。 我们的例子需要 node  v5.x.x 或更高版本以及 npm  3.x.x  或更高版本。 要检查你正在使用的版本，请在终端窗口中运行  `node -v`  和  `npm -v`  命令。

使用终端窗口，为项目创建目录，并进入此目录。

`mkdir angular2-quickstart cd    angular2-quickstart`

典型的 Angular 项目需要一系列配置文件

*  **package.json** 用来标记出本项目所需的 npm 依赖包。
 *  **tsconfig.json** 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。
 *  **typings.json** 为那些 TypeScript 编译器无法识别的库提供了额外的定义文件。
 *  **systemjs.config.js** 为模块加载器提供了该到哪里查找应用模块的信息，并注册了所有必备的依赖包。 它还包括文档中后面的例子需要用到的包。
 *  **systemjs.config.js** provides information to a module loader about where to find application modules, and registers all the necessary packages. It also contains other packages that will be needed by later documentation examples.

在你的项目根目录中创建这些文件，并从下面的例子框中拷贝粘贴文本来填充它们。

package.json

app/main.ts

\{    "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",     "@angular/compiler": "2.0.0",     "@angular/core": "2.0.0",     "@angular/forms": "2.0.0",     "@angular/http": "2.0.0",     "@angular/platform-browser": "2.0.0",     "@angular/platform-browser-dynamic": "2.0.0",     "@angular/router": "3.0.0",     "@angular/upgrade": "2.0.0",     "core-js": "^2.4.1",     "reflect-metadata": "^0.1.3",     "rxjs": "5.0.0-beta.12",     "systemjs": "0.19.27",     "zone.js": "^0.6.23",     "angular2-in-memory-web-api": "0.0.20",     "bootstrap": "^3.3.6"   \},   "devDependencies": \{      "concurrently": "^2.2.0",     "lite-server": "^2.2.2",     "typescript": "^2.0.2",     "typings":"^1.3.2"   \} \}

tsconfig.json

app/app.module.ts

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

typings.json

#### app/app.module.ts ####

"globalDependencies": \{

"core-js": "registry:dt/core-js\#0.0.0+20160725163759",

"jasmine": "registry:dt/jasmine\#2.2.0+20160621224255",

"node": "registry:dt/node\#6.0.0+20160909174046"

systemjs.config.js

#### app/app.module.ts ####

/\*\*

\* System configuration for Angular 2 samples

\* Adjust as necessary for your application needs.

\*/

(function (global) \{

System.config(\{

paths: \{

// paths serve as alias

'npm:': 'node\_modules/'

\},

// map tells the System loader where to look for things

map: \{

// our app is within the app folder

app: 'app',

// angular bundles

'@angular/core': 'npm:@angular/core/bundles/core.umd.js',

'@angular/common': 'npm:@angular/common/bundles/common.umd.js',

'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',

'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',

'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',

'@angular/http': 'npm:@angular/http/bundles/http.umd.js',

'@angular/router': 'npm:@angular/router/bundles/router.umd.js',

'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

// other libraries

'rxjs':                       'npm:rxjs',

'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',

\},

// packages tells the System loader how to load when no filename and/or no extension

packages: \{

app: \{

main: './main.js',

defaultExtension: 'js'

\},

rxjs: \{

defaultExtension: 'js'

\},

'angular2-in-memory-web-api': \{

main: './index.js',

defaultExtension: 'js'

\});

\})(this);

虽然我们这里使用了 SystemJS 来达到目标，不过它也只是加载模块的选项之一。尽管用你喜欢的模块加载器吧。关于 Webpack 和 Angular ，参见  [Webpack 简介 ][Webpack] 。 或者到  [这里][Link 4] 学习关于 SystemJS 配置的知识。

## 安装依赖包 ##

使用 `npm` 命令来安装 `package.json` 中列出的依赖包。请在终端窗口 ( 或 Windows 的 cmd 窗口 ) 中输入下列命令：

`npm install`

在安装期间可能出现红色的错误信息，你还会看到  `npm WARN`  信息。不过不用担心，只要末尾处没有  `npm ERR!`  信息就算成功了。

你现在应该得到了如下结构：

angular2-quickstart

\--node\_modules ...

\--typings ...

\--package.json

\--systemjs.config.js

\--tsconfig.json

\--typings.json

如果在运行  `npm install`  之后没有出现  `typings`  目录，你就需要通过命令手动安装它：

`npm run typings install`

现在，你可以开始写代码了！

# 步骤 2 ：创建应用 #

我们用 [NgModules][] 把 Angular 应用组织成了一些功能相关的代码块。 Angular 本身也被拆成了一些独立的 Angular 模块。 这让你可以只导入你应用中所需的 Angular 部件，以得到较小的文件体积。

每个 Angular 应用都至少有一个模块： **根模块 **，在这里它叫做 `AppModule` 。

\*\* 在应用的根目录下创建一个 app 子目录：

mkdir app

使用下列内容创建 `app/app.module.ts` 文件：

#### app/app.module.ts ####

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ]})export class AppModule { }

这里是应用的入口点。

由于 QuickStart 是一个运行在浏览器中的 Web 应用，所以根模块需要从`@angular/platform-browser` 中导入 [`BrowserModule`][BrowserModule] 并添加到 `imports` 数组中。

这是要让一个最小的应用在浏览器中运行时，对 Angular 的最低需求。

QuickStart 应用不做别的，也就先不需要其他模块。在真实的应用中，我们可能还得导入 [`FormsModule`][FormsModule] 、 [`RouterModule`][RouterModule] 和 [`HttpModule`][HttpModule] 。这些会在 [英雄指南教程 ][Link 5]中引入。

# 步骤 3 ：创建组件并添加到应用中 #

每个 Angular 应用都至少有一个组件： **根组件 **，这里名叫 `AppComponent` 。

组件是 Angular 应用的基本构造块。每个组件都会通过与它相关的模板来控制屏幕上的一小块（视图）。

**使用下列内容创建组件文件 **`app/app.component.ts`:

#### app/app.component.ts ####

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

QuickStart 应用具有和其它 Angular 组件相同的基本结构：

*  **一个 import 语句 **。它让你能访问 Angular 核心库中的 [`@Component` 装饰器函数 ][Component]。
 *  **一个 @Component 装饰器 **，它会把一份 **元数据 **关联到 `AppComponent` 组件类上：
 *   *  **selector** 为用来代表该组件的 HTML 元素指定一个简单的 CSS 选择器。
     *  **template** 用来告诉 Angular 如何渲染该组件的视图。
 *  **组件类 **通过它的模板来控制视图的外观和行为
    
    through its template. Here, you only have the root component, `AppComponent`. Since you don't need any application logic in the simple QuickStart example, it's empty.
    
    这里，你只有一个根组件 `AppComponent` 。由于这个简单的 QuickStart 范例中并不需要应用逻辑，因此它是空的。

我们还要 **导出 **这个 `AppComponent` 类，以便让刚刚创建的这个应用导入它。

编辑 `app/app.module.ts` 文件，导入这个新的 `AppComponent` ，并把它添加到`NgModule` 装饰器中的 `declarations` 和 `bootstrap` 字段：

#### app/app.module.ts ####

1.  `import { NgModule } from '@angular/core';`
2.  `import { BrowserModule } from '@angular/platform-browser';`
3.  `import { AppComponent } from './app.component';`
4.  `@NgModule({`
5.  `imports: [ BrowserModule ],`
6.  `declarations: [ AppComponent ],`
7.  `bootstrap: [ AppComponent ]`
8.  `})`
9.  `export class AppModule { }`

# 步骤 4 ：启动应用 #

现在，我们还需要做点什么来让 Angular 加载这个根组件。

添加一个新文件

，内容如下：

#### app/main.ts ####

1.  `import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';`
2.  `import { AppModule } from './app.module';`
3.  `const platform = platformBrowserDynamic();`
4.  `platform.bootstrapModule(AppModule);`

这些代码初始化了应用所在的平台，然后使用此平台引导你的 `AppModule` 。

### 为什么要分别创建 `main.ts` 、应用模块 和应用组件的文件呢？ ###

应用的引导过程与 创建模块或者 展现视图是相互独立的关注点。如果该组件不会试图运行整个应用，那么测试它就会更容易。

引导过程是与平台有关的

但我们应该用正确的方式组织 Angular 应用的文件结构。 启动 App 与展现视图是两个相互分离的关注点。 把这些关注点混在一起会增加不必要的难度。 可以通过使用不同的引导器 (bootstraper) 来在不同的环境中启动 `AppComponent` 。 测试组件也变得更容易，因为不需要再运行整个程序才能跑测试。 让我们多花一点精力来用 **“正确的方式” **实现它。

# 步骤 5 ：定义该应用的宿主页面 #

在 目录下创建一个 `index.html` 文件，并粘贴下列内容：

#### index.html ####

1.  `<html>`
2.  `<head>`
3.  `<title>Angular 2 QuickStart</title>`
4.  `<meta charset="UTF-8">`
5.  `<meta name="viewport" content="width=device-width, initial-scale=1">`
6.  `<link rel="stylesheet" href="styles.css">`
7.  ``
8.  ``
9.  `<script src="node_modules/core-js/client/shim.min.js"></script>`
10. `<script src="node_modules/zone.js/dist/zone.js"></script>`
11. `<script src="node_modules/reflect-metadata/Reflect.js"></script>`
12. `<script src="node_modules/systemjs/dist/system.src.js"></script>`
13. ``
14. `<script src="systemjs.config.js"></script>`
15. `<script>`
16. `System.import('app').catch(function(err){ console.error(err); });`
17. `</script>`
18. `</head>`
19. ``
20. `<body>`
21. `<my-app>Loading...</my-app>`
22. `</body>`
23. `</html>`

这里值得注意的地方有：

*  JavaScript 库： `core-js` 是为老式浏览器提供的填充库， `zone.js` 和 `reflect-metadata` 库是 Angular 需要的，而 `SystemJS` 库是用来做模块加载的。
 *  `SystemJS` 的配置文件和一段脚本，它导入并运行了我们刚刚在 `main` 文件中写的 `app` 模块。
 *  `<body>` 中的 [`<my-app>`][my-app] 标签是 **应用程序生活的地方！**

## 添加一些样式 ##

样式不是必须的，但能让应用更漂亮。 `index.html` 中假定有一个叫做 `styles.css` 的样式表。

在 **project root** 目录下创建一个 `style.css` 文件，并且用下面列出的最小化样式作为初始样式。

#### styles.css (excerpt) ####

/* Master Styles */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%;} h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;} body { margin: 2em;}

要查看本文档中所用到的主样式表的完整集合，参见 [styles.css][]

# Step 6: Build and run the application #

打开终端窗口，并输入如下命令：

npm start

到 [这里 ][Link 6]了解更多关于 `package.json` 中其它脚本的知识。

该命令会同时运行两个并行的 node 进程：

*  TypeScript 编译器运行在监听模式。
 *  一个名叫 **lite-server** 的静态文件服务器，它把 `index.html` 加载到浏览器中，并且在该应用中的文件发生变化时刷新浏览器。

稍后，一个浏览器页标签就会打开并显示出来。

![Output of QuickStart app][]

# Step 7: Make some live changes #

尝试把 `app/app.component.ts` 中的消息修改成 "My SECOND Angular 2 App" 。

TypeScript 编译器和 `lite-server` 将会检测这些修改，重新把 TypeScript 编译成 JavaScript ，刷新浏览器，并显示修改过的消息。

当终止了编译器和服务器之后，可以关闭 terminal 窗口。

# 收工，下一步 #

项目的最终目录结构看起来是这样的：

angular2-quickstart

app

app.component.ts

app.module.ts

main.ts

node\_modules ...

typings ...

index.html

package.json

styles.css

systemjs.config.js

tsconfig.json

typings.json

要查看文件的内容，请打开 [live example][] 。

## 下一步干什么？ ##

第一个应用没做什么，它只是一个 Angular 2 的 "Hello, World" 而已。

我们写了一个很小的 Angular 组件，创建了一个简单的 `index.html` ，并且启动了一个静态文件服务器。

我们还设置了一个基本的应用环境，你可以把它用在本指南的其它部分。以后，我们对  `package.json` 和  `index.html` 的修改将仅限于添加库或一些 css 样式，不用再需要修改模块加载部分。

[Link 1]: https://angular.cn/docs/ts/latest/quickstart.html#prereq
[1]: https://angular.cn/docs/ts/latest/quickstart.html#create-and-configure
[2]: https://angular.cn/docs/ts/latest/quickstart.html#ngmodule
[3]: https://angular.cn/docs/ts/latest/quickstart.html#root-component
[4]: https://angular.cn/docs/ts/latest/quickstart.html#main
[5]: https://angular.cn/docs/ts/latest/quickstart.html#index
[6]: https://angular.cn/docs/ts/latest/quickstart.html#build-and-run
[7]: https://angular.cn/docs/ts/latest/quickstart.html#make-changes
[Link 2]: https://angular.cn/docs/ts/latest/quickstart.html#wrap-up
[Link 3]: http://blog.npmjs.org/post/85484771375/how-to-install-npm
[Webpack]: https://angular.cn/docs/ts/latest/guide/webpack.html
[Link 4]: https://github.com/systemjs/systemjs/blob/master/docs/config-api.md
[NgModules]: https://angular.cn/docs/ts/latest/guide/ngmodule.html
[BrowserModule]: https://angular.cn/docs/ts/latest/api/platform-browser/index/BrowserModule-class.html
[FormsModule]: https://angular.cn/docs/ts/latest/api/forms/index/FormsModule-class.html
[RouterModule]: https://angular.cn/docs/ts/latest/api/router/index/RouterModule-class.html
[HttpModule]: https://angular.cn/docs/ts/latest/api/http/index/HttpModule-class.html
[Link 5]: https://angular.cn/docs/ts/latest/tutorial/
[Component]: https://angular.cn/docs/ts/latest/api/core/index/Component-decorator.html
[my-app]: https://angular.cn/docs/ts/latest/quickstart.html#my-app
[styles.css]: https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
[Link 6]: https://github.com/angular/quickstart/blob/master/README.md#npm-scripts
[Output of QuickStart app]: https://angular.cn/resources/images/devguide/quickstart/my-first-app.png
[live example]: https://angular.cn/resources/live-examples/quickstart/ts/plnkr.html