前端开发领域中，单页应用已经成为了一种趋势。单页应用的核心就是通过 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 文件中添加如下代码：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------- ------ - ---- ------------------ ----- ------- ------ - - - ----- --- ------------- ------------------------------- -- - ----- -------- ------------- ---------------------------------- -- -- ----------- -------- --------------- ------------------------------ ------------- --------------- ---------- -------------- -- ------ ----- --------- --
这里我们创建了两个路由：
- 当用户访问根路径时，会加载
HomeModule模块 - 当用户访问
/about路径时，会加载AboutModule模块
创建模块
在上一步中提到的 HomeModule 和 AboutModule 是指 Angular2 中的模块，每个模块包含一组相关的组件、指令和服务，它们构成了应用的一部分。
我们可以使用 Angular CLI 命令来创建模块。在命令行中执行以下命令来创建 HomeModule：
ng generate module home
这个命令将在项目中创建一个名为 HomeModule 的模块。然后，我们可以在 home.module.ts 文件中定义该模块中的路由：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------- ----- ------- ------ - -- ----- --- ---------- ------------- --- ----------- -------- -------------------------------- ------------- ---------------- -- ------ ----- ---------- --
这里我们定义了一个路由，当用户访问根路径时，会加载 HomeComponent 组件。
接下来，我们可以通过执行以下命令来创建 AboutModule：
ng generate module about
然后在 about.module.ts 文件中定义该模块中的路由：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - -------------- - ---- -------------------- ----- ------- ------ - -- ----- --- ---------- -------------- --- ----------- -------- -------------------------------- ------------- ----------------- -- ------ ----- ----------- --
创建组件
我们已经定义了模块和路由，现在我们需要创建两个组件用于 HomeModule 和 AboutModule。在命令行中执行以下命令来创建 HomeComponent：
ng generate component home
这个命令将在项目中创建一个名为 HomeComponent 的组件。然后，我们可以在 home.component.ts 文件中定义该组件的模板：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------
--------- -
----------- -- --- ---- ---------
------- -- --- ---- ---- -- --- --------
--
--
------ ----- ------------- --接着，我们可以通过以下命令创建 AboutComponent：
ng generate component about
然后在 about.component.ts 文件中定义该组件的模板：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- --------
--------- -
--------- -------
---------- -- --- ----- ---- -- --- --------
--
--
------ ----- -------------- --配置应用
现在我们已经创建了模块和组件，接下来我们需要在 app.component.ts 中定义根组件。我们将根组件作为 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