AngularJS 是目前前端开发中非常流行的一个 JavaScript 框架，它的出现，为前端开发提供了更加高效、便捷的开发方式。在 AngularJS 中，UI Router 是一个非常重要的组件，它可以实现复杂路由，并提供了简单的 API。在本文中，我们将详细介绍如何使用 UI Router 实现复杂路由。
什么是 UI Router
UI Router 是一个基于 AngularJS 的路由框架，它拓展了 AngularJS 的 ngRoute 组件，并加入了一些新的特性，比如嵌套视图、命名视图、状态参数等。
UI Router 的主要功能是管理 AngularJS 的视图与状态之间的映射关系，通过状态的切换，实现视图的动态更新，从而实现单页面应用（SPA）的效果。
UI Router 是 AngularJS 的一个第三方组件，并需要在我们的应用中单独引入。最新的 UI Router 版本为 1.x，其使用与早期版本存在一些差异，需要注意。
如何使用 UI Router
UI Router 的使用非常简单，我们只需要在应用的模块中注入 $stateProvider 服务，然后通过调用 $stateProvider.state() 方法，来创建应用路由的不同状态。
下面是一个简单的应用路由配置示例：
-- -------------------- ---- -------
----------------------- --------------
-------------------------------- ------------------- -
--------------
-------------- -
---- --------
------------ -----------
--
--------------- -
---- ---------
------------ ------------
--
--------------------------------------
---在上面的代码中，我们定义了两个状态（State），分别为 home 和 about。通过 $stateProvider.state() 方法，我们可以指定每个状态所对应的 URL、HTML 模板以及其他参数。
在这个示例中，我们将首页（home）的 URL 设置为 /home，将其对应的 HTML 模板设置为 home.html。同时，我们将默认路由设置为 /home，这样当用户访问根路径时，就会自动跳转到首页。
实现复杂路由
对于一些复杂的应用场景，我们可能需要设置更加复杂的路由。下面我们通过一个实例来详细介绍如何使用 UI Router 实现一个较为复杂的路由设置。
假设我们的应用中有两个主要视图：一个是带有侧栏的主视图 Main，另一个是没有侧栏的子视图 Child。我们需要支持以下两种主要路由：
- /main：显示 Main 视图。
- /main/child：显示 Child 视图，同时在 Main 视图侧栏中高亮显示 Child 菜单项。
首先，我们需要在 HTML 文件中添加两个 ui-view 指令，用于展示 Main 和 Child 视图。同时，我们也需要为 Main 视图的侧栏创建一个导航菜单，用于实现路由跳转。下面是 HTML 文件中相应的代码示例：
-- -------------------- ---- -------
----- ---------------
-----
----
------ ----------------------------
------ -----------------------------------
-----
------
---- ---------------------
---- ----------------------
-------在上面的代码中，我们使用 ui-sref 指令来定义菜单项的路由链接，这样当用户点击菜单时，就会自动跳转到相应的路由。
接下来，我们需要在应用的路由文件中添加相应的状态（State），如下所示：
-- -------------------- ---- -------
----------------------- --------------
-------------------------------- ------------------- -
--------------
-------------- -
---- --------
------ -
------- -
------------ ------------
----------- ----------
--
-------- -
--------- --
-
-
--
-------------------- -
---- ---------
------ -
--------- -
------------ -------------
----------- -----------
-
-
--
--------------------------------------
---在上面的代码中，我们定义了两个状态（State），分别为 main 和 main.child。
在 main 状态中，我们通过 views 属性指定了 Main 视图和 Child 视图的位置。其中，main 视图对应的是 HTML 文件中的 ui-view="main"，而 child 视图对应的是 HTML 文件中的 ui-view="child"。同时，我们还指定了 main 视图所对应的 HTML 模板以及对应的控制器。
在 main.child 状态中，我们定义了 URL 为 /child，同时指定了视图的 HTML 模板和相应的控制器。需要注意的是，我们在 views 属性中使用了 @ 符号来指定子视图的命名空间，这样 UI Router 才能正确地找到对应的视图。
最后，我们使用 $urlRouterProvider.otherwise() 方法来指定默认路由，这样当用户访问根路径时，就会自动跳转到 /main。
总结
UI Router 是 AngularJS 中非常重要的一个路由框架，它可以实现复杂路由，并提供了简单的 API。在本文中，我们详细介绍了如何使用 UI Router 实现复杂路由，并通过一个示例，演示了如何实现路由的嵌套和命名视图。希望读者可以通过本文对 UI Router 的使用有更加深入的了解，从而更好地应用它来实现自己的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648edad148841e9894d4317f