使用 Angular 2 开发单页应用程序之二

2017-01-19 本文已影响599人一课上手

在上一篇文章使用 Angular 2 开发单页应用程序之一中，我们已经完成了Angular 2开发环境的安装，并建立了一个最简单可运行的 Angular 2 单页应用程序SPA dw-ng2-app。
dw-ng2-app 包含有一个模块、一个组件、一个类、一个模板、元数据和数据绑定，但它仍缺少 4 个其他的重要部分：

多个组件
路由
服务
微服务的使用
接下来，您将创建这些自定义组件。

创建自定义组件和路由

创建自定义组件

按 Ctrl-C 停止 Angular 进程。在命令提示符下，运行以下命令：

ng g c Menu -is --spec false --flat：在 AppModule 根模块内创建 Menu 组件。
ng g c Weather -is --spec false：在 AppModule weather 子目录创建 Weather 组件。
ng g c Currency -is --spec false：在 AppModule currency 子目录中创建 Currency 组件。
ng g c Movie -is --spec false：在 AppModule movie 子目录中创建 Movie 组件。

执行命令

创建路由

要让 Angular 能在组件之间导航，需要创建路由。使用以下内容覆盖 menu.component.html 文件。

<div class="row">
  <div class="col-xs-12">
    <ul class="nav nav-pills">
      <li routerLinkActive="active"> <a [routerLink]="['/weather']" >Weather</a></li>
      <li routerLinkActive="active"> <a [routerLink]="['/movie']" >Movie Details</a></li>
      <li routerLinkActive="active"> <a [routerLink]="['/currency']" >Currency Rates</a></li>
    </ul>
  </div>
</div>

上面的菜单代码提供了页面菜单，当在菜单上点击Movie Details 时，Angular 会跳转到URL路径 http://localhost:4200/movie
下面将URL路径映射到我们在上一步创建的组件上。在根模块的文件夹中，创建一个名为 app.routing.ts 的配置文件，内容如下：

import { Routes, RouterModule } from '@angular/router';
import { CurrencyComponent } from "./currency/currency.component";
import { WeatherComponent } from "./weather/weather.component";
import { MovieComponent } from "./movie/movie.component";
const MAINMENU_ROUTES: Routes = [
    //full : makes sure the path is absolute path
    { path: '', redirectTo: '/weather', pathMatch: 'full' },
    { path: 'weather', component: WeatherComponent },
    { path: 'movie', component: MovieComponent },
    { path: 'currency', component: CurrencyComponent } 
];
export const CONST_ROUTING = RouterModule.forRoot(MAINMENU_ROUTES);

如果 URL相对路径是 movie，则 Angular 会调用 MovieComponent 组件。
现在，将页面链接到父组件，将 app.component.html 修改为以下内容：

<div class="container">
  <app-menu></app-menu>
  <hr>
  <router-outlet></router-outlet>
</div>

app-menu 会引入菜单
route-outlet 是URL指定的组件，可能是天气、电影或货币。

你还必须在模块中引入这个路由，在 app.module.ts 文件中添加两项，如下，

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';
import { MenuComponent } from './menu.component';
import { WeatherComponent } from './weather/weather.component';
import { CurrencyComponent } from './currency/currency.component';
import { MovieComponent } from './movie/movie.component';
import { CONST_ROUTING } from './app.routing'; // 新添加
 
@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    WeatherComponent,
    CurrencyComponent,
    MovieComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    CONST_ROUTING // 新添加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，如果您运行应用程序并单击 Weather 链接，应用程序将会显示 weather works!：

天气组件
如果单击 Movie Details 链接，应用程序会显示 movie works!：

电影组件
如果单击 Currency Rates 链接，应用程序将会显示 currency works!：

货币组件

至此，我们成功修改了 Angular 应用程序 dw-ng2-app，创建了多个自定义组件和路由。后续的文章中将继续介绍如何创建服务，并将这些服务集成到前端页面视图中。

文章导航

进一步的学习

免费获取项目源代码，咨询老师进行答疑指导，请加QQ：1628145742 ，或报名我们的实战课程：