默认情况下，应将accountHome和blogHome加载到index.html组件和博客组件中。
[ATLConversationCollectionView _endItemAnimationsWithInvalidationContext:tentativelyForReordering:animator:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit/UIKit-3600.7.47/UICollectionView.m:5765
2017-06-23 11:33:27.473137+0530 SampleApp[1815:546610] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Invalid update: invalid number of sections. The number of sections contained in the collection view after the update (3) must be equal to the number of sections contained in the collection view before the update (3), plus or minus the number of sections inserted or deleted (1 inserted, 0 deleted).'
*** First throw call stack:
(0x19207afd8 0x190adc538 0x19207aeac 0x192b12710 0x198ab47cc 0x198ab865c 0x198ab893c 0x198ab879c 0x198ab8720 0x198380558 0x10099f14c 0x101eb12b4 0x105039a10 0x10504a5e4 0x105039a10 0x10503eb78 0x1920290c0 0x192026cdc 0x191f56d94 0x1939c0074 0x19820f130 0x10010b454 0x190f6559c)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb)
//config
var myapp = angular.module('myapp', ["ui.router", "navbarModule", "carouselModule", "accountModule", "blogModule"]);
myapp.config(function($stateProvider,$locationProvider){
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$stateProvider
.state('/', {
url: "/",
views: {
"account": {
component: "account"
},
"blog": {
component: "blog"
}
}
})
.state("accountHome", {
parent: '/',
url:"",
template:"<h1>Account Home working fine</h1>"
})
.state('accountDetails', {
parent: '/',
url:"details",
template:"<h1>Account Details working fine</h1>"
})
.state("blogHome", {
parent: '/',
url:"",
template:"<h1>Blog Home working fine</h1>"
})
.state('blogDetails', {
parent: '/',
url:"details",
template:"<h1>Blog Details working fine</h1>"
})
});
//Account component
(function(angular) {
'use strict';
var accountModule = angular.module("accountModule",[]);
accountModule.component('account', {
bindings: {
},
controller: AccountController,
templateUrl: '/components/account/account.html'
});
function AccountController(){
}
})(window.angular);
//Blog component
(function(angular) {
'use strict';
var blogModule = angular.module("blogModule",[]);
blogModule.component('blog', {
bindings: {
},
controller: BlogController,
templateUrl: '/components/blog/blog.html'
});
function BlogController(){
}
})(window.angular); /* Set height of the grid so .sidenav can be 100% (adjust if needed) */
/* Set gray background color and 100% height */
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}
答案 0 :(得分：1)
我正在寻找这样的东西，请参阅config部分，然后使用$ state.go（＆＃39; defaultStateForSection＆＃39;）;加载所有默认的部分内容。 Here is full code, git link如果有人有更好的答案，请发表评论。我感谢任何更好的答案。
var myapp = angular.module('myapp', ["ui.router", "navbarModule", "accountModule", "blogModule"]);
myapp.config(function($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$stateProvider
//index state '/'
.state('/', {
url: "/",
views: {
"account": {
component: "account"
},
"blog": {
component: "blog"
}
}
})
//load all the default section in '/' ie. index.html i.e. /defaultStateForSection
.state("defaultStateForSection", {
parent: '/',
views: {
'accountHome@/': {
template: "<h1>Account Home is working</h1>"
},
'blogHome@/': {
template: "<h1> Blog Home is working</h1>"
}
}
})
//replace accountHome with accountDetails in /defaultStateForSection
.state('accountDetails', {
parent: 'defaultStateForSection',
url: "accountDetails",
views: {
'accountHome@/': {
template: "<h1>Account Details working fine</h1>"
}
}
})
.state('blogDetails', {
parent: 'defaultStateForSection',
url: "blogDetails",
views: {
'blogHome@/': {
template: "<h1>Blog Details working fine</h1>"
}
}
})
});
//NavBar
(function() {
'use strict';
var navbarModule = angular.module("navbarModule", []);
navbarModule.component('navBar', {
bindings: {},
controller: NavController,
templateUrl: '/components/navbar/navbar.template.html'
});
function NavController() {
$(document).ready(function() {
/* affix the navbar after scroll below header */
$("header").toggle().toggle();
$(".navbar").affix({
offset: {
top: $("header").outerHeight(true)
}
});
console.log($("#myCarousel").outerHeight(true));
});
// $('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
//instead of this we can use ng-click as well
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
console.log(hash);
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
//Don't need this
// window.location.hash = hash;
});
} // End if
});
$state.go('defaultStateForSection');
}
})();
//Account
(function(angular) {
'use strict';
var accountModule = angular.module("accountModule",[]);
accountModule.component('account', {
bindings: {
},
controller: AccountController,
templateUrl:'/components/account/account.html'
});
function AccountController(){
}
})(window.angular);
//blog
(function(angular) {
'use strict';
var blogModule = angular.module("blogModule",[]);
blogModule.component('blog', {
bindings: {
},
controller: BlogController,
templateUrl: '/components/blog/blog.html'
});
function BlogController(){
}
})(window.angular); body {
position: relative;
}
.container-fluid{
padding-left: 0px;
padding-right: 0px;
}
.affix {
top:0;
width: 100%;
z-index: 9999 !important;
}
.navbar {
margin-bottom: 0px;
border-radius: 0px;
}
.affix ~ .container-fluid {
position: relative;
top: 50px;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
height: 100%;
margin: auto;
}
/* Set gray background color and 100% height */
.sidenav {
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
} <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<body ng-app="myapp">
<nav-bar></nav-bar>
<div id="section1" class="container-fluid" style="min-height: 2000px">
<div ui-view="account"></div>
</div>
<div id="section2" class="container-fluid" style="min-height: 2000px">
<div ui-view="blog"></div>
</div>
</body>
<!-- Account Section -->
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Pati's Blog</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a ui-sref="defaultStateForSection">Account Home</a></li>
<li><a ui-sref="accountDetails">Account Details</a></li>
</ul><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-sm-9" style="background-color: white; color: black;min-height: 2000px">
<div ui-view="accountHome"></div>
</div>
</div>
</div>
<!-- Blog Section -->
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Pati's Blog</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a ui-sref="defaultStateForSection">Blog Home</a></li>
<li><a ui-sref="blogDetails">Blog Details</a></li>
</ul><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Blog..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-sm-9" style="background-color: white; color: black;min-height: 2000px">
<div ui-view="blogHome"></div>
</div>
</div>
</div>
<!-- nav bar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Account</a></li>
<li><a href="#section2">Blog</a></li>
<li><a href="#section3">Section 3</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>