Should load accountHome and blogHome into account component and blog component into index.html by default.
//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;}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="/#">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<!-- UI-Router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<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-animate.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/navbar.css">
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="components/navbar/navbar.component.js"></script>
<script src="components/carousel/carousel.component.js"></script>
<script src="components/account/account.js"></script>
<script src="components/blog/blog.js"></script>
</head>
<body ng-app="myapp">
<carousel></carousel>
<nav-bar></nav-bar>
<div id="section1" class="container-fluid">
<div ui-view="account"></div>
</div>
<div id="section2" class="container-fluid">
<div ui-view="blog"></div>
</div>
</body>
</html>
<!--Account template-->
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>John's Blog</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a ui-sref="accountHome">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">
<div ui-view></div>
</div>
</div>
</div>
<!--blog template-->
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>John's Blog</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a ui-sref="blogHome">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">
<div ui-view></div>
</div>
</div>
</div>I was looking for something like this, see config section and then use $state.go('defaultStateForSection'); to load all the default section content. Here is full code, git link If anyone has a better answer then please comment. I appreciate any better answer.
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>