角UI路由器-具有多个布局的嵌套状态
角UI路由器-具有多个布局的嵌套状态
my-module.js
'use strict';angular.module('my-module', ['ngResource', 'ui.router'])
// Routing for the app.
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider .state('root', {
url: '',
views: {
'layout': {
templateUrl: 'partials/layout/1-column.html'
},
'header': {
templateUrl: 'partials/layout/sections/header.html'
},
'footer': {
templateUrl: 'partials/layout/sections/footer.html'
}
}
})
.state('root.home', {
url: '/'
})
.state('root.signup', {
url: '/signup',
views: {
'step-breadcrumb': {
templateUrl: 'partials/signup/step-breadcrumb.html'
}
}
})
;
$urlRouterProvider.otherwise('/');
})
;index.html
<!doctype html><html class="no-js" ng-app="my-module">
<head>
<meta charset="utf-8">
<title>My Test App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<div ui-view="layout">
</div>
<!-- build:js({app,.tmp}) scripts/vendor.js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbuild -->
ABOUTYOU浏览 390回答 1
1回答
-
蛊毒传说
虽然没有柱塞显示你的例子，但我将与你分享一个：工作布局实例..请观察它，看看我在这里要解释的是什么。如果我们root状态应该是唯一的根状态，注入到index.html，我们确实需要一些不同的定义：所以对于index.html// index.html<body> <div ui-view="layout"> </div></body>我们需要这样的语法：$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' } } })这是什么？'header@root'？这是绝对的命名。在这里检查一下：视图名称-相对名称与绝对名称 (下面是小引文)和这里我试着详细说明在幕后，每个视图都分配了一个绝对名称，该名称遵循'viewname@statename'，其中viewname是视图指令中使用的名称，状态名称是状态的绝对名称，例如contact.tem。您还可以选择用绝对语法编写视图名称。其他州的定义也是如此。因为‘root.signup’有直接的父级‘root’，现有的语法将正常工作。.state('root.signup', { url: '/signup', views: { 'step-breadcrumb': { // working AS IS ...但是我们可以使用绝对命名，而且它也能工作。.state('root.signup', { url: '/signup', views: { 'step-breadcrumb@root': { // absolute naming ...因为这就是它背后的工作原理。请注意布局有关更多细节的示例
随时随地看视频慕课网APP
相关分类
AngularJS