angular-ui-router 多视图views

最新推荐文章于 2021-06-24 00:16:46 发布

繁华清宁

最新推荐文章于 2021-06-24 00:16:46 发布

阅读量646

点赞数

CC 4.0 BY-SA版权

分类专栏： angular-js

本文链接：https://blog.youkuaiyun.com/sfl123zqm/article/details/54892918

angular-js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Angular.js应用中使用UI Router模块实现多视图布局。通过设置不同名称的ui-view，可以在单一页面中加载多个不同的视图组件，实现复杂页面的动态填充。文章提供了一个具体示例，展示如何配置路由来动态加载graph、tabledata和filters等不同区域的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://bubkoo.com/2014/01/01/angular/ui-router/guide/multiple-named-views/
angular.js模块ui-router之多视图,可以给ui-view指定名称，这样一个模板中就可以有多个ui-view。假设您有一个应用，需要动态填充graph、table data和filters，像下面这样：
这里写图片描述
当您需要使用多视图时，需要用到状态的views属性，views属性值是一个对象。
如果在状态中定义了views属性，那么状态中的templateUrl、template 和 templateProvider属性将被忽略。
示例-名称匹配
views的属性key应该对应ui-view的名称，像下面这样:
首先在主页面：
这里写图片描述
切换后的页面是：

而对应上图的111111,22222, 3333区域动态填充，其代码如下：
主页面的对应的html:

对应的home页面得html:

对应的about页面的html：

路由配置的js代码：

about下的view是动态配置的效果