将ui路由器用于“主"路由器.布局? [英] Using ui-router for "main" layout?
问题描述
我正在尝试使用ui-router视图为页面创建主布局"，但似乎无法正常工作(各种错误，未调用控制器，未加载模板)./p>
I'm trying to create the 'main layout' for my page using ui-router views, but I can't seem to get it working right (various errors, controllers not getting called, templates not getting loaded).
<!DOCTYPE html>
<html ng-app="App">
<head>
...
</head>
<body>
<header ui-view="header">
</header>
<section ui-view="navigation">
</section>
<section ui-view="content">
</section
</body>
</html>
这个想法是让状态代表整个站点的根"状态，提供导航和标题以及根控制器"的模板.其他每个状态都将其内容加载到内容"视图中，而不会影响其他状态.
The idea is to have a state representing the "root" state for the whole site providing templates for navigation and header as well as a "root controller". Every other state loads it's content into the "content" view without affecting the others.
$stateProvider
.state("index", {
url: "/",
controller: "App.IndexController",
controllerAs: "vm",
views: {
"header@index" : { templateUrl: "app/main/header.html" }
// nav etc.
}
该应用程序加载时没有任何错误，但是模板和控制器从未被调用.我错过了什么吗?
The app loads without any errors, but the templates as well as the controller never get invoked. Did I miss something?
我还看到许多人提供了一个单独的布局"视图，该视图被加载到一个未命名的视图中(主要在< body> 标记上)，但是我认为这没有用作为主要的 index.html 文件已经是我的布局了.或者:有没有更好的方法来实现我想要的?
I also saw that many people provide a separate "layout" view that get's loaded into an unnamed view (mostly on the <body> tag), but I consider this useless as the main index.html file is already my layout. Or: Is there a better way to achieve what I want?
推荐答案
有一个答案角度UI路由器-具有多种布局的嵌套状态，其中一个工作的导航器显示了布局: http://plnkr.co/edit/I0BJ09BxR7nG9kZDeEIv?p =预览
There is an answer Angular UI Router - Nested States with multiple layouts with a working plunker showing layout: http://plnkr.co/edit/I0BJ09BxR7nG9kZDeEIv?p=preview
重点是带有index.html的
The point is that there is index.html with
<div ui-view="layout"></div>
然后，根状态将其自己的模板(布局)注入到该 ui-view ="layout" 中.
And the root state then injects into that ui-view="layout" its own template (layout) and also injects into layout views.
所以首先是布局模板:
<div>
<section class="top">
<div ui-view="top"></div>
</section>
<section class="middle">
<section class="left">
<div ui-view="left"></div>
</section>
<section class="main">
<div ui-view="main"></div>
</section>
</section>
</div>
这是状态def
$stateProvider
.state('root', {
url: '',
views: {
'layout': {
templateUrl: 'partials/layout/1-column.html'
},
'header@root': {
templateUrl: 'partials/layout/sections/header.html'
},
'footer@root': {
templateUrl: 'partials/layout/sections/footer.html'
}
}
})
它是如何工作的?我们正在使用绝对和相对目标名称.
And how it is working? we are using the absolute and relative target names.
在后台，为每个视图分配一个绝对名称，该绝对名称遵循viewname @ statename的方案，其中viewname是视图指令中使用的名称，州名称是该州的绝对名称，例如contact.item.您还可以选择以绝对语法编写视图名称.
Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.
例如，前面的示例也可以写成:
For example, the previous example could also be written as:
.state('report',{
views: {
'filters@': { },
'tabledata@': { },
'graph@': { }
}
})
这篇关于将ui路由器用于“主"路由器.布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
