使用 Angular 2 实现单页应用程序（3）

look_w

示例项目概述示例项目包含一个开箱即用的 Angular 应用程序，以及您将在开箱即用的应用程序上开发的一个自定义应用程序。当您完成上述操作后，您将拥有一个包含 3 个微型应用程序的        Angular 应用程序，每个微型应用程序中的特性使用了 3 个 Web 服务 API：

所有应用程序逻辑都将在您的浏览器中运行。仅在浏览器需要新数据时，才需要服务器。事实上，您可以关闭服务器进程，它仍会在您的应用程序中工作，因为它是一个 SPA。
下图显示了应用程序拓扑结构：

您将使用 Angular CLI 创建您的项目（该项目默认情况下会包含 AppModule 和 AppComponent）和 4        个自定义组件：

• 菜单组件
• 天气组件
• 电影组件
• 货币组件

您将创建用于菜单导航的路由，并将以下服务注入到天气、电影和货币组件中：

• 来自使用微服务的 HTTP 的数据
• 在使用这些服务时跨组件的资源共享

创建基础应用程序和模块准备好开始了吗？首先在操作系统命令行上转到您想放置项目目录的位置。
创建一个 Angular 项目运行下面的命令来生成一个新 Angular 项目（其中 dw_ng2_app 是项目名称）：

ng new dw_ng2_app --skip-git

安装所有需要的包和 Angular 基础应用程序（这将花费大约 10 分钟时间）后，您将返回到操作系统命令提示符上。如果您随后列出 /dw_ng2_app        目录的内容，就可以看到项目结构：

|— e2e |— node_modules |— src angular-cli.json karma.conf.js package.json protractor.conf.js README.md tslint.json

../dw_ng2_app/src 目录的内容包括：

|— app |— assets |— environments favicon.ico index.html main.ts polyfills.ts styles.css test.ts tsconfig.json typings.d.ts

../dw_ng2_app/src/app 目录（根模块文件夹）包含以下文件：

app.component.css app.component.html app.component.spec.ts app.component.ts app.module.ts index.ts

运行开箱即用的 Angular 应用程序更改到项目目录，运行 ng serve 来启动开箱即用的 Angular 应用程序。
默认情况下，该进程在端口 4200 上启动。如果您的 port 系统环境变量的值不是 4200，该进程将在此端口上启动。您可以运行 ng          serve --port 4200 命令来覆盖默认端口号，这是一项可选操作。
打开您的浏览器并输入 URL http://localhost:4200/。您的 Angular 应用程序会显示 app          works!，这表明应用程序已启动、运行并准备就绪：
如果在应用程序运行过程中更改代码，Angular 会非常智能地监视并自动重新启动应用程序。尝试编辑 app.component.ts 文件，更改 title        的值。您可以看到，您的浏览器页面反映了这一更改：
如何将模块链接到组件在清单 1 中，第 20 行显示了 AppModule 模块的声明。
清单 1. app.module.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     FormsModule,     HttpModule   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

此模块仅包含一个组件 —AppComponent— 如上第 10 行所示。第 18 行表明，在引导进程下启动的第一个组件是          AppComponent。
组件内部结构清单 2 给出了 app.component.ts 文件中的主要应用程序组件的内容。
清单 2. app.component.ts

1 2 3 4 5 6 7 8 9 10

import { Component } from '@angular/core'; @Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css'] }) export class AppComponent {   title = 'My Angular 2 app works!'; }

这是 app.component.html 文件中的主要应用程序组件的内容：

1 2 3

<h1>   {{title}} </h1>

元数据位置元数据告诉 Angular 如何处理类。事实上，在您通过向 AppComponent 附加元数据给类时，告诉 Angular 它还不是组件。
可以使用 @Component 修饰器附加元数据，这会将类标识为组件。@Component        修饰器接受一个必需的配置对象，该对象包含 Angular 创建和呈现该组件和它的视图所需的信息。
  中的代码使用可用的 @Component 配置选项中的 3 个选项：

• selector：一个 CSS 选择器，告诉 Angular 在父 HTML 文件中找到 selector          标记的地方创建和插入此组件的一个实例
• templateUrl：组件的 HTML 文件
• styleUrls：组件的样式表，比如 .css 文件

组件内的模板位置模板是一个 HTML 表单，用于告诉 Angular 如何呈现组件。在   的第 5          行上，templateUrl 指向一个名为 app.component.html 的视图。
组件内的数据绑定数据绑定是一个 HTML 表单，用于告诉 Angular 如何呈现组件。在 app.component.ts 文件中，title 的值在类内设置，在        app.component.html 文件中使用。数据绑定可以是单向或双向的。在本例中，如果您在双花括号 {{ }}        内提及该变量，则该映射是单向的。值从类传递到 HTML 文件。