今天我创建了一个ThemeForest就像一个带有angular和mvc的网站，所以我有一个登录页面，它会加载Dashboard页面，在仪表板页面有很多图标，所以我点击图标，它会加载为每个模板完成不同的布局页面。
这是我的问题。
**
2）视图不是部分视图类型，而是一个新的HTML页面，其中包含从当前文件引用的新css和Js文件。
3）我不想在新的Html文件中加载当前的Js文件。
**
Angular js ui-Routing技术是否通过使用页面中提到的ui-view工作。所以在页面中我点击了图标，需要加载不同的母版页，所以现在发生的是主页加载下仪表板页面。它将通过角度路由支持或不支持。
所以我创建了一个示例演示：
$ stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// nested list with custom controller
.state('home.list', {
url: '/list',
templateUrl: 'Ecommmerce-Website.html',
})
// nested list with just some random string data
.state('home.paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
url: '/about',
views: {
'': { templateUrl: 'partial-about.html' },
'columnOne@about': { template: 'Look I am a column!' },
'columnTwo@about': {
templateUrl: 'table-data.html',
controller: 'scotchController'
}
}
});
});
这是启动页面：
这里我正在加载仪表板页面：
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.navbar { border-radius:0; }
</style>
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app to our site -->
<body ng-app="routerApp">
<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
<div ui-view></div>
</div>
</body>
这是在html上面加载的根路由器模板视图。
<div class="jumbotron text-center">
<a ui-sref=".list" class="btn btn-primary">Ecommerce Websites</a>
<a ui-sref=".paragraph" class="btn btn-danger">Hotels Websites</a>
</div>
<div ui-view></div>
另一个母版页：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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>
<style>
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 1500px}
/* 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;}
}
</style>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="routerApp">
<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 href="#section1">Home</a></li>
<li><a href="#section2">Friends</a></li>
<li><a href="#section3">Family</a></li>
<li><a href="#section3">Photos</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">
<h4><small>RECENT POSTS</small></h4>
<hr>
<h2>I Love Food</h2>
<h5><span class="glyphicon glyphicon-time"></span> Post by Jane Dane, Sep 27, 2015.</h5>
<h5><span class="label label-danger">Food</span> <span class="label label-primary">Ipsum</span></h5><br>
<p>Food is my passion. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<br><br>
<h4><small>RECENT POSTS</small></h4>
<hr>
<h2>Officially Blogging</h2>
<h5><span class="glyphicon glyphicon-time"></span> Post by John Doe, Sep 24, 2015.</h5>
<h5><span class="label label-success">Lorem</span></h5><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h4>Leave a Comment:</h4>
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
<br><br>
<p><span class="badge">2</span> Comments:</p><br>
<div class="row">
<div class="col-sm-2 text-center">
<img src="bandmember.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="col-sm-10">
<h4>Anja <small>Sep 29, 2015, 9:12 PM</small></h4>
<p>Keep up the GREAT work! I am cheering for you!! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<br>
</div>
<div class="col-sm-2 text-center">
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="col-sm-10">
<h4>John Row <small>Sep 25, 2015, 8:25 PM</small></h4>
<p>I am so happy for you man! Finally. I am looking forward to read about your trendy life. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<br>
<p><span class="badge">1</span> Comment:</p><br>
<div class="row">
<div class="col-sm-2 text-center">
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="col-xs-10">
<h4>Nested Bro <small>Sep 25, 2015, 8:28 PM</small></h4>
<p>Me too! WOW!</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
这里是plunker Demo： http://embed.plnkr.co/IzimSVsstarlFviAm7S7/preview：
答案 0 :(得分：1)
您必须对代码进行一些更改才能达到您的要求。
我使用ui-router多个视图来实现此目的 here is a documentation for it
1）在 app.js 中，将您的状态更改为
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
views: {
'': { templateUrl: 'partial-home.html' },
'header': { templateUrl: 'tplheader.html', },
'footer': {
templateUrl: 'tplfooter.html',
}
}
})
// nested list with custom controller
.state('list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
// nested list with just some random string data
.state('paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
url: '/about',
views: {
'': { templateUrl: 'partial-about.html' },
'columnOne@about': { template: 'Look I am a column!' },
'columnTwo@about': {
templateUrl: 'table-data.html',
controller: 'scotchController'
}
}
});
});
检查，将home.list更改为.state('list')和home.paragraph .state('paragraph' )
2）其次， partial-home.html
将ui-sref=".list"更改为ui-sref="list"，将ui-sref=".paragraph"更改为ui-sref="paragraph"
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
<a ui-sref="list" class="btn btn-primary">List</a>
<a ui-sref="paragraph" class="btn btn-danger">Paragraph</a>
</div>
<div ui-view></div>
3）在 index.html
中<body ng-app="routerApp">
<!-- NAVIGATION -->
<script type="text/ng-template" id="tplheader.html">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
</script>
<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
<div ui-view="header"></div>
<div ui-view></div>
<div ui-view="footer"></div>
</div>
<script type="text/ng-template" id="tplfooter.html">
<div class="text-center">
<p>A tutorial by <a href="http://scotch.io" target="_blank">scotch.io</a></p>
<p>View the tutorial: <a href="http://scotch.io/tutorials/javascript/angular-routing-using-ui-router" target="_blank">AngularJS Routing using UI-Router</a></p>
</div>
</script>
</body>