前言
在 AngularJS 的单页应用（SPA）开发中，我们通常会将应用划分为多个逻辑上独立的模块，每个模块都包含自己的路由、控制器、服务等。如何实现多个模块之间的跳转是一个常见的问题，本文将从 AngularJS 的 UI-Router 路由库入手，详细介绍如何实现多个模块之间的跳转。
UI-Router 的基本使用
首先，我们需要了解 AngularJS 中最常用的路由框架之一 —— UI-Router。UI-Router 是一个强大的 AngularJS 路由库，相比 AngularJS 内置的 ngRoute，它提供了更多的路由特性和强大的状态管理功能。如果你还不熟悉 UI-Router，可以先阅读官方文档：
- UI-Router 官方文档：https://ui-router.github.io/ng1/
安装 UI-Router：
UI-Router 的安装非常简单，可以使用 npm 或者 Bower 进行安装，也可以直接下载源码到项目中使用。
使用 npm 安装：
npm install angular-ui-router
使用 Bower 安装：
bower install angular-ui-router
引入 UI-Router：
安装完成后，需要在项目中引入 UI-Router，如下所示：
<script src="path/to/angular.js"></script> <script src="path/to/angular-ui-router.js"></script>
在 AngularJS 应用中，需要将 UI-Router 作为依赖注入到应用中：
var app = angular.module('myApp', ['ui.router']);关于 UI-Router 的详细使用方法，可以参考官方文档。
实现多个模块之间的跳转
了解了 UI-Router 的基本使用后，我们来看一下如何实现多个模块之间的跳转。在 AngularJS 的单页应用中，通常将应用划分为多个逻辑上独立的模块，每个模块都对应着一个状态（state），同时每个模块都需要有一个对应的 URL。
在 UI-Router 中，可以通过 state 的名字来跳转到对应的模块。例如，在一个名为 "home" 的模块中，我们可以定义一个名为 "about" 的 state，用于跳转到另一个名为 "about" 的模块，如下所示：
-- -------------------- ---- -------
----------------------------------- ------------------- -
---------------------------- -
---- --------
------------ ------------------
----------- ----------------
---
----------------------------- -
---- ---------
------------ -------------------
----------- -----------------
---
--------------------------------------
---在上述代码中，我们定义了两个 state：home 和 about，其中 home 对应着 /home 的 URL，而 about 对应着 /about 的 URL。同时，我们还定义了一个默认的 URL，即当用户输入的 URL 不匹配任何一个 state 时，会跳转到 /home。
接下来，在 home 模块中，我们可以通过 ui-sref 指令来跳转到另外一个模块（即 about）：
<a ui-sref="about">About</a>
在上述代码中，我们使用了 ui-sref 指令来定义一个名为 "about" 的 state，这个指令会自动地将该 state 对应的 URL 输出为 href 属性。
除了直接跳转到另外一个模块外，我们还可以在当前模块的控制器中使用 $state 服务来跳转到另外一个模块，如下所示：
app.controller('HomeController', function($scope, $state) {
$scope.goToAbout = function() {
$state.go('about');
};
});在上述代码中，我们在 HomeController 的控制器中定义了一个 goToAbout 函数，用于跳转到名为 "about" 的模块。在这个函数中，我们使用了 $state 服务的 go 方法来跳转到另外一个模块。
总结
本文介绍了如何使用 UI-Router 实现 AngularJS 单页应用中多个模块之间的跳转。通过定义每个模块的 state 和 URL，我们可以很方便地实现模块之间的跳转，并且不需要刷新页面。同时，通过使用 ui-sref 指令和 $state 服务，我们可以在模板和控制器中实现跳转功能。本文所介绍的内容对于正在学习或使用 AngularJS 的开发者都有很大的参考和借鉴意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ac6a9948841e989486b399