介绍
AngularJS 是一款非常优秀的前端框架，而 UI-Router 是 AngularJS 框架中非常重要的一部分。UI-Router 是 AngularJS 框架中用于管理多个视图的路由框架，它通过使用状态机的方式来管理 URL 和页面状态。
UI-Router 在 AngularJS 的路由基础上进行了扩展，并且可以和 AngularJS 其他功能进行良好的整合，因此，UI-Router 替代了之前的路由管理器，成为了 AngularJS 中最为常用的路由管理工具之一。
UI-Router 基本使用
UI-Router 很容易理解，只需要掌握两个概念就可以了：
状态（states）：状态描述了页面的层次结构以及 UI-Router 中对应的 URL；可以通过配置不同的状态来管理不同的页面。
视图（views）：UI-Router 通过视图来管理页面的不同部分；每一个状态都可以对应多个视图。
1. 安装
使用 Bower 或者 NPM 来安装 UI-Router：
bower install angular-ui-router
npm install angular-ui-router
2. 配置
配置 UI-Router 需要在 AngularJS 的 config 中进行，如下：
-- -------------------- ---- -------
----------------------- --------------
-------------------------------- ------------------- -
--------------------------------------
--------------
-------------- -
---- --------
------------ ------------
----------- ----------------
--
--------------- -
---- ---------
------------ -------------
----------- -----------------
--
---上面的代码中，通过 $urlRouterProvider 来设置默认路由，然后使用 $stateProvider 来定义路由状态。
url：定义对应状态的 URL。templateUrl：定义对应状态的视图。controller：定义对应状态的控制器。
3. 在 HTML 中使用
在 HTML 中使用 UI-Router 非常简单。只需要在需要展示 view 的地方使用指令即可，如下：
<ui-view></ui-view>
上面的代码中，<ui-view></ui-view> 用于动态展示当前路由状态下的视图内容。
UI-Router 高级用法
嵌套视图
UI-Router 支持视图的嵌套，也就是说，在一个页面中，会存在多个子视图。这种情况下，我们就需要使用 views 配置项来配置每个视图的 URL 和视图内容。
-- -------------------- ---- -------
---------------------------- -
---- --------
------ -
--------- -
------------ --------------
----------- ------------------
--
---------- -
------------ ---------------
----------- -------------------
-
-
---上面的代码中，通过 views 配置项来定义了 header 和 content 两个子视图。
<div ui-view="header"></div> <div ui-view="content"></div>
上面的代码中，我们分别为两个子视图分配了一个 ui-view 告诉 UI-Router 该视图的位置。
重定向
重定向是指在用户访问某个路径时，自动跳转到另一个路径。这种情况下，我们就需要使用 $urlRouterProvider 的 when 方法或者 rule 方法来实现。下面是使用 when 方法的示例代码：
$urlRouterProvider.when('/', '/home');上面的代码中，当用户访问根路径时，自动跳转到 /home 路径。
命名视图
通过在视图中指定一个名称，我们就可以在 JavaScript 代码中通过名称来操作这个视图了。
views: {
'header@': {
templateUrl: 'header.html',
controller: 'HeaderController'
}
}上面的代码中，在视图名称后面添加了一个 @ 符号，表示这是一个命名视图。在 JavaScript 中，我们可以通过名称 header@ 来引用这个视图。
嵌套状态和嵌套命名视图
UI-Router 支持将多个状态嵌套到一起。当嵌套多个状态时，UI-Router 可以让你控制视图的渲染方式。
-- -------------------- ---- -------
---------------------------- -
---- --------
------ -
--------- -
------------ --------------
----------- ------------------
--
---------- -
------------ ---------------
----------- -------------------
-
-
----------------------- -
---- ----------
------ -
--------------- -
------------ --------------
----------- ------------------
-
-
----------------------- -
---- ----------
------ -
--------------- -
------------ --------------
----------- ------------------
-
-
---上面的代码中，我们在 home 状态中嵌套了两个子状态，每个子状态都有自己的视图，但是它们都渲染在 home 状态的 content 中。
总结
本文对 AngularJS 的 UI-Router 进行详细的介绍和解释，让读者对 UI-Router 有了深刻的认识。UI-Router 是 AngularJS 中非常重要的一部分，可以帮助我们更好地管理前端路由，提高前端应用的开发效率，因此，深入了解 UI-Router 的知识点对于前端开发者来说是非常重要的。
参考代码
完整的 AngularJS 的 UI-Router 示例代码如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- - -----------------
------- -----------------------------------------------------------------
------- ----------------------------------------------------------------------------------
------- -----------------------
----------------------- --------------
-------------------------------- ------------------- -
--------------------------------------
--------------
-------------- -
---- --------
------ -
--------- -
------------ --------------
----------- ------------------
--
---------- -
------------ ---------------
----------- -------------------
-
-
--
--------------------- -
---- ----------
------ -
--------------- -
------------ --------------
----------- ------------------
-
-
--
--------------------- -
---- ----------
------ -
--------------- -
------------ --------------
----------- ------------------
-
-
--
--
------------------------------- ---------------- -
------------------ - ----- -- --------
--
-------------------------------- ---------------- -
------------------- - ----- -- ---------
--
------------------------------- ---------------- -
----------------- - ----- -- --------
--
------------------------------- ---------------- -
----------------- - ----- -- --------
--
---------
-------
----- ---------------
---- -----------------------
---- ------------------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658ff500eb4cecbf2d5811b7