1
Account Home and Blog Home should load "Account Home working fine" and "Blog Home working fine inside" "/" URL by default without clickAngularJS - 同じURLで異なるセクション「/」すなわちindex.htmlをで使用してUI-ルータに異なるコンポーネントの複数の子状態
のindex.htmlにアカウント成分やブログ成分によるにaccountHomeとblogHomeをロードする必要がありますデフォルト。
//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) {
\t 'use strict';
\t var accountModule = angular.module("accountModule",[]);
\t accountModule.component('account', {
\t \t bindings: {
\t \t },
\t \t controller: AccountController,
\t \t templateUrl: '/components/account/account.html'
\t });
\t function AccountController(){
\t }
})(window.angular);
//Blog component
(function(angular) {
\t 'use strict';
\t var blogModule = angular.module("blogModule",[]);
\t blogModule.component('blog', {
\t \t bindings: {
\t \t },
\t \t controller: BlogController,
\t \t templateUrl: '/components/blog/blog.html'
\t });
\t function BlogController(){
\t }
})(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>
UI-ルータ名の景色を見てください：https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views –
ありがとうございました。はい、これは非常に良いチュートリアルですが、私は以下のコメントに掲載されているように、違ったものを探していました。それについて何か改善が分かっていればコメントしてください。ありがとうございました。 – Patrick