众所周知，如果使用原生路径，Angular视图由ng-view指令加载。像这样：div ng-view/div。一般来说，我们会把这个指令放在index.html文件中，然后通过控制器加载相应的模板视图。像这样：

var bookstore app=angular . module(' bookstore app '，[ 'ngRoute '，' ngAnimate '，' bookStoreCtrls '，])；bookStoreApp.config(函数($ routeProvider){ $ routeProvider . when('/hello '，{ templateurl : ' tpls/hello . html '，controller: 'HelloCtrl' })。when('/list '，{ template URLs : ' TPS/booklist . html '，controller: ' BookListCtrl ' })。否则({ redirectto : '/hello ' })})；这是一个属于AngularJS的本地路由定义。表面上看起来挺方便的，没有什么大问题。但是想想看，如果我们有一个网页，左边是菜单栏，右边是每个菜单对应的视图。然后，如果按照这个定义点击每个菜单项，不用刷新整个网页吗？我们想要的只是右侧视图的更新。因此，需要嵌套路由。

嵌套布线意味着视图可以嵌套在视图中，管线可以嵌套在管线中。此外，通过ui-router，可以实现不同视图之间的参数传递。

不像ngRouter，ui-router使用。定义路线时，在html标记中，它使用ui-view而不是ng-view，例如div ui-view/div。Ui-router为路由定义提供$stateProvider和$urlRouterProvider。

下面的示例演示了如何实现路由嵌套：

home.html

创建以下html页面：

div class=' jumbo tron text-center ' h1 home/h1 p该页面演示了span class='text-danger '嵌套/span view。/p a ui-sref='。list ' class=' BTN BTN-primary ' list/a a ui-sref='。“危险”段落/a/div ui-view/div home-list.html

创建以下html页面：

ul li ng-repeat='主题中的主题' { topic } }/Li/ul about.html

创建以下html页面：

div class=' jumbo tron text-center ' h1关于页面/h1 p该页面演示了span class='text-danger ' multiple/span和span class=' text-danger '命名/span view。/p/div div class=' row ' div class=' col-MD-6 ' div ui-view=' column one '/div/div class=' col-MD-6 ' div ui-view=' column two '/div/div/div table-data.html

创建以下html页面：

H2 ice-Creats/H2 table class=' table table-悬停表-条纹表-加边' the ad tr TDname/TD TDcost/TD/tr/Thad t body tr ng-repeat=' topics in topics ' TD { { topic }。名称} }/TD TD $ { {主题。price}}/TD/tr/tbody/table注意，到目前为止，我们还没有插入任何AngularJS路由或任何其他框架。目前，我们只创建了一些页面片段，我们需要一个占位符或父页面来保存这些页面片段。让我们称这一页为index.html。

index.html

使用以下内容创建此html页面

！doctype html html ng-app=' Routerapp ' head meta charset=' utf-8 ' link rel='样式表href=' CSS/bootstrap-3。0 .0/CSS/bootstrap。CSS ' rel='外部无跟随'脚本src=' http : js/angular。量滴js /脚本src=' http : js/angular-animate。js /脚本src=' http : js/angular-ui-ui在主页中我们引入了angular.min.js、angular-ui-router.js、angular-animate.js和app.js。在班级为容器的差异中我们创建了一个div ui-view=''/div，该差异内的超文本标记语言内容会根据路由的变化而变化。在a ui-sref='home'/a中ui-sref指令链接到特定状态。

在应用程序.射流研究…文件的内容，我们声明了AngularJS模块和路由配置。当页面加载的时候我们会在index.html中显示home.html的内容。代码如下：

var routerApp=angular。模块(' routerApp '，[' ui。路由器'])；routerApp.config(函数($stateProvider，$urlRouterProvider) { /*路由重定向$urlRouterProvider:如果没有路由引擎能匹配当前的导航状态，那它就会默认将路径路由至home.html *这个页面就是状态名称被声明的地方*/$ urlsrupervider。其他('/home ')；$stateProvider .州(' home '，{ url: '/home '，模板URL : ' TPL S2/home。html ' })/*带有自定义控制器的嵌套列表*/。状态(' home.list '，{ url: '/list '，模板URL : ' TPL S2/home-list。' html '，控制器：函数($ scope){ $ scope。话题=['奶油糖果'，'黑色电流'，'芒果']；} }) //只有一些随机字符串数据的嵌套列表。状态(' home.paragraph '，{ url: '/paragraph '，template: '我当然可以用一勺冰淇淋'}) .状态('关于，{ URL : '/关于',/*视图用在该状态下有多个用户界面视图的情况，可以对不同的用户界面视图使用特定的模板，控制器，解析数据绝对视角使用'@' 符号来区别，比如[emailprotected]'表明名为"第一栏"的用户界面视图使用了关于状态的模板（模板),相对视角则无*/view : {//无名视图' ' : { Templateurls : ' TPL S2/关于。html ' }，//对于ui-view=' column one ' '[电子邮件保护]' : { Template: '这里是第一列的内容}，//对于' ui-view='第二列' ' '[email protected]' : {模板URL : ' TPL S2/表-数据。html '，Controller : ' Controller ' } } })；});劳特拉普。控制器('控制器'，函数($ scope){ $ scope。消息=' test$ scope。主题=[{ name : ' Butterscotch '，price: 50 }，{ name: 'Black Current '，price: 100 }，{ name: 'Mango '，price : 20 }]；});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。