在 AngularJS 中使用 UI-router 可以方便地实现子状态及视图嵌套。本文将详细介绍如何使用 UI-router 实现这一功能，并提供示例代码。
1. 安装 UI-router
首先，需要安装 UI-router。可以通过 npm 进行安装：
npm install angular-ui-router
然后，在 HTML 中引入 UI-router：
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"></script>
2. 配置路由
在 AngularJS 中配置 UI-router 路由需要使用 ui.router 模块。首先，在模块中声明依赖：
var app = angular.module('myApp', ['ui.router']);然后，配置路由：
-- -------------------- ---- -------
----------------------------------- ------------------- -
--------------------------------------
--------------
-------------- -
---- --------
------------ -----------
--
--------------- -
---- ---------
------------ ------------
--
----------------- -
---- -----------
------------ --------------
---
---在上面的代码中，$urlRouterProvider 用于配置默认路由。$stateProvider 用于配置具体路由，包括路由名称、URL 和模板文件路径等信息。
3. 实现子状态
在 UI-router 中，子状态即为父状态下的路由。要实现子状态，需要在父状态下配置子状态。例如：
-- -------------------- ---- -------
----------------------------------- ------------------- -
--------------------------------------
--------------
-------------- -
---- --------
------------ -----------
--
--------------- -
---- ---------
------------ ------------
--
----------------- -
---- -----------
------------ --------------
--
----------------------- -
---- -----------
------------ --------------------
---
---在上面的代码中，about.details 即为 about 父状态下的子状态。访问 about/details 将会加载 about-details.html 模板文件。
4. 实现视图嵌套
UI-router 还支持视图嵌套。要实现视图嵌套，需要在模板文件中使用 ui-view 指令。例如：
<div ui-view></div>
在上面的代码中，ui-view 指令将会被替换为对应的模板文件。
还可以在路由配置中使用 views 属性来实现视图嵌套。例如：
-- -------------------- ---- -------
----------------------------------- ------------------- -
--------------------------------------
--------------
-------------- -
---- --------
------ -
--------- -
------------ -------------
--
---------- -
------------ -----------
--
--------- -
------------ -------------
-
-
--
--------------- -
---- ---------
------ -
--------- -
------------ -------------
--
---------- -
------------ ------------
--
--------- -
------------ -------------
-
-
--
----------------- -
---- -----------
------ -
--------- -
------------ -------------
--
---------- -
------------ --------------
--
--------- -
------------ -------------
-
-
--
----------------------- -
---- -----------
------ -
---------------- -
------------ --------------------
-
-
---
---在上面的代码中，views 属性用于配置视图嵌套。header、content 和 footer 为父模板文件中的命名视图。details@about 表示 about 父状态下的 details 子状态的命名视图。
示例代码
下面是一个完整的示例，包含父状态、子状态和视图嵌套：
-- -------------------- ---- -------
--- --- - ----------------------- ---------------
----------------------------------- ------------------- -
--------------------------------------
--------------
-------------- -
---- --------
------ -
--------- -
------------ -------------
--
---------- -
------------ -----------
--
--------- -
------------ -------------
-
-
--
--------------- -
---- ---------
------ -
--------- -
------------ -------------
--
---------- -
------------ ------------
--
--------- -
------------ -------------
-
-
--
----------------- -
---- -----------
------ -
--------- -
------------ -------------
--
---------- -
------------ --------------
--
--------- -
------------ -------------
-
-
--
----------------------- -
---- -----------
------ -
---------------- -
------------ --------------------
-
-
---
----- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
---------------- ------------
------- --------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------------------
------- ----------------------
-------
------
---- -----------------------
---- ------------------------
---- -----------------------
------- ----------------------- -----------------
--------
-----
----
------ ----------------------------
------ ------------------------------
------ ----------------------------------
-----
------
---------
---------
------- ----------------------- ---------------
-------------
---------- -- --- ---- ---------
---------
------- ----------------------- ----------------
--------------
---------- -- --- ----- ---------
-- -----------------------------------
---- ------------------------
---------
------- ----------------------- ------------------------
--------- ------------
-------- --- --- ------- --- --- ----- ---------
---------
------- ----------------------- ------------------
----------------
---------- -- --- ------- ---------
---------
------- ----------------------- -----------------
-------------- ---- --------- -------------
---------
-------
-------结论
使用 UI-router 可以方便地实现子状态及视图嵌套。在配置路由时，需要注意父状态和子状态的关系，以及视图嵌套的命名视图。通过本文的介绍和示例代码，相信读者已经可以掌握如何在 AngularJS 中使用 UI-router 实现子状态及视图嵌套。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6756ea11ba81afebc524753a