Angular2 中使用 ui-router 构建的单页应用实践-JavaScript中文网-JavaScript教程资源分享门户

前端开发领域中，单页应用已经成为了一种趋势。单页应用的核心就是通过 JavaScript 在浏览器端实现路由系统，从而实现用户体验的流畅和响应式。在 Angular2 中，我们可以使用开源的 ui-router 库来实现单页应用。本文将介绍如何使用 ui-router 在 Angular2 中构建单页应用，并提供详细的示例代码。

环境准备

在开始之前，我们需要确保环境已准备就绪。首先，我们需要安装 Node.js 和 NPM。其次，我们需要安装 Angular CLI 工具，它可以快速创建 Angular2 项目的框架。

在安装完 Node.js 和 NPM 后，我们可以在命令行中执行以下命令来安装 Angular CLI：

npm install -g @angular/cli

创建一个 Angular2 项目

在安装完 Angular CLI 后，我们可以使用以下命令在本地创建一个 Angular2 项目：

ng new my-app

这个命令将在本地创建一个名为 my-app 的 Angular2 项目。

安装 ui-router 库

创建完项目后，我们需要使用 NPM 安装 ui-router 库。在项目根目录下执行以下命令：

npm install ui-router-ng2 --save

配置路由

在使用 ui-router 构建单页应用时，我们需要在应用中添加路由。路由定义了用户访问不同 URL 时所应该加载的视图。在 Angular2 中，我们可以通过配置 RouterModule 来实现路由功能。在 app.module.ts 文件中添加如下代码：

// javascriptcn.com 代码示例
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './home/home.module#HomeModule' },
  { path: 'about', loadChildren: './about/about.module#AboutModule' },
];

@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

这里我们创建了两个路由：

当用户访问根路径时，会加载 HomeModule 模块
当用户访问 /about 路径时，会加载 AboutModule 模块

创建模块

在上一步中提到的 HomeModule 和 AboutModule 是指 Angular2 中的模块，每个模块包含一组相关的组件、指令和服务，它们构成了应用的一部分。

我们可以使用 Angular CLI 命令来创建模块。在命令行中执行以下命令来创建 HomeModule：

ng generate module home

这个命令将在项目中创建一个名为 HomeModule 的模块。然后，我们可以在 home.module.ts 文件中定义该模块中的路由：

// javascriptcn.com 代码示例
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';

const routes: Routes = [{ path: '', component: HomeComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  declarations: [HomeComponent],
})
export class HomeModule {}

这里我们定义了一个路由，当用户访问根路径时，会加载 HomeComponent 组件。

接下来，我们可以通过执行以下命令来创建 AboutModule：

ng generate module about

然后在 about.module.ts 文件中定义该模块中的路由：

// javascriptcn.com 代码示例
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about.component';

const routes: Routes = [{ path: '', component: AboutComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  declarations: [AboutComponent],
})
export class AboutModule {}

创建组件

我们已经定义了模块和路由，现在我们需要创建两个组件用于 HomeModule 和 AboutModule。在命令行中执行以下命令来创建 HomeComponent：

ng generate component home

这个命令将在项目中创建一个名为 HomeComponent 的组件。然后，我们可以在 home.component.ts 文件中定义该组件的模板：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'home',
  template: `
    <h1>Welcome to the Home Page</h1>
    <p>This is the home page of our app.</p>
  `,
})
export class HomeComponent {}

接着，我们可以通过以下命令创建 AboutComponent：

ng generate component about

然后在 about.component.ts 文件中定义该组件的模板：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'about',
  template: `
    <h1>About Us</h1>
    <p>Welcome to the about page of our app.</p>
  `,
})
export class AboutComponent {}

配置应用

现在我们已经创建了模块和组件，接下来我们需要在 app.component.ts 中定义根组件。我们将根组件作为 AppComponent 导出，这是一个默认的组件名。

// javascriptcn.com 代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <nav>
      <a routerLink="/">Home</a>
      <a routerLink="/about">About</a>
    </nav>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {}

这里我们创建了两个链接，一个对应 Home 页面，一个对应 About 页面。同时我们使用了 routerLink 指令来定义链接的路径。

运行应用

我们已经创建了所有必要的代码来构建一个基本的单页应用。现在，只需在命令行中输入以下命令来启动应用程序：

ng serve --open

这个命令将启动 Angular2 应用程序，并自动打开浏览器。现在，你将看到一个导航栏，其中包含两个链接。当你点击链接时，内容将会被更新而不会刷新整个页面。

总结

在本文中，我们讲解了如何使用 Angular2 和 ui-router 库来构建一个单页应用。我们介绍了 Angular2 的模块和组件，以及如何使用 RouterModule 来配置路由系统。最后，我们提供了一个示例代码，使用 Angular CLI 快速创建了所有必要的代码。了解在 Angular2 中使用 ui-router 构建单页应用的知识对前端开发者来说非常重要，因为它可以提高用户体验，同时还可以改善网站的性能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653e5fcd7d4982a6eb7e1bef