给定一个像这样的HTML文件:
<html>
<header ui-view="header"></header>
<div class="main" ui-view></div>
<footer ui-view="footer"></footer>
</html>
Run Code Online (Sandbox Code Playgroud)
如何创建一个布局状态,用标题模板填充"标题",页脚带有页脚模板,然后允许子状态填充空的ui视图?
我想空的ui-view也可以命名为ui-view ="main".
我有以下布局:

边栏和标题栏将始终存在,但其内容是特定于上下文的.
我认为这里有两个选项:嵌套状态(sidenav> Headerbar> Content)或视图(如果我理解正确的话).无论我读过多少视频和文章,我仍然在努力让我的脑袋缠绕在ui-router上.
单击Sidenav会将状态(或视图)加载到Content中,Headerbar会根据加载到Content中的内容调整其内容.
我的感觉是,嵌套状态似乎是最简单的直接方法,特别是在考虑继承时.
从另一个角度来看,这些似乎可能是兄弟姐妹(虽然继承问题可能让我错了).我的观点是,观点将使我在未来的子项目等方面具有更大的灵活性.
当然,ng-include和指令也可以发挥作用.
成为ui-router的新手可能有人会把我拉向正确的方向吗?我卡住的地方正在加载主页视图.我希望我的用户在登录后可以在"内容"部分中看到他们的信息中心.然后,当用户从补充工具栏导航时,如何将新元素加载到内容中?
在客户视图中,我有一个创建客户按钮,该按钮应加载位于customers.create.html其中的部分视图customers.html.
如何将当前视图"customers.html"替换为另一个视图"customers.create.html"?
customers.html客户
<div>
<button ng-click="create()" class="btn btn-default" ui-sref="customers.create">Create</button>
</div>
<div style="height:500px;" ng-grid="myOptions"></div>
Run Code Online (Sandbox Code Playgroud)
app.js
$stateProvider
.state('customers', {
url: "/customers",
templateUrl: "../views/customers.html",
controller: ['$scope', '$stateParams', '$state',
function ( $scope, $stateParams, $state){
}]
})
.state('customers.create', {
url: "/create",
templateUrl: "../views/customers.create.html"
})
Run Code Online (Sandbox Code Playgroud)
在单击创建按钮时,路径将更改为/ customers/create,而不是html视图,它将保持不变.
我不能把它<div ui-view></div>放在创建按钮下,因为那时客户数据网格和创建按钮仍然可见.
也许我不应该使用分层客户.创建视图?