怎么办多个视图与角度，以支持头部和侧边栏？ [英] How to do multiple views with Angular to support header and sidebar?
本文介绍了怎么办多个视图与角度，以支持头部和侧边栏？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的第一次AngularJS。我已经成功地在我的 index.html的实施一个 NG-视图包含一个
但现在我创建一个仪表盘（ dashboard.html ）。所以，我在除了了header.html A左侧菜单中的，所以它看起来是这样的：
我的index.html是类似这样的：
＆LT; DIV NG-包括='模板/ header.html中'＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =主ID =主无空间＆GT;
＆LT; DIV ID =主页＆GT;
＆LT; DIV ID =包装类=容器＆GT;
＆LT; DIV CLASS ='集装箱'＆GT;
＆LT; DIV NG-视图＆gt;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV NG-包括='模板/ footer.html'＆GT;
我dashboard.html是类似这样的：
＆LT; DIV CLASS =崩盘导航栏，导航栏崩溃-EX1崩溃＆GT;
＆LT; UL类=NAV导航栏，导航侧导航＆GT;
＆LT;李班=主动＆GT;
＆下;一个纳克-的href =＃/ LINK1＆GT;链接1所述; / A＆GT;
＆LT; /李＆GT;
＆LT;立GT;
＆下;一个纳克-的href =＃/ LINK2＆GT;链路2'; / A＆GT;
＆LT; /李＆GT;
＆LT;立GT;
＆下;一个纳克-的href =＃/ LINK3＆GT;链接3'; / A＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
解决方案
试试这个：
\r
\r\r
\r angular.module（'应用'，['ngRoute']）\r
的.config（['$ routeProvider'，函数（$ routeProvider）{\r
$ routeProvider。\r
当（'/仪表板'，{\r
templateUrl：dashboard.html'，\r
控制器：DashboardCtrl\r
}）\r
。除此以外（{\r
redirectTo：'/仪表盘\r
}）;\r
}]）;\r
\r
功能DashboardCtrl（）{\r
\r
} \r
* {\r
箱尺寸：边界盒;\r
}\r
#main：{后\r
内容：;\r
显示：块;\r
明确：两者;\r
}\r
{的#header\r
填充：20像素;\r
边框：1px的固体＃000;\r
}\r
#main {\r
填充：20像素;\r
边框：1px的固体＃000;\r
}\r
#sidebar {\r
填充：20像素;\r
边框：1px的固体＃000;\r
浮动：左;\r
宽度：20％;\r
}\r
＃内容{\r
填充：20像素;\r
边框：1px的固体＃000;\r
浮动：权利;\r
宽度：78％;\r
}\r
#footer {\r
填充：20像素;\r
边框：1px的固体＃000;\r
} \r
＆LT;脚本SRC =https://cdnjs.cloudflare.com/ajax /libs/angular.js/1.3.14/angular.js\"></script>\r
＆所述; SCRIPT SRC =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-route.js＆GT;＆下; /脚本＆GT;\r
＆LT; DIV NG-应用=应用程序＆GT;\r
＆LT; DIV NG-包括='了header.html'ID =头＆GT;＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =主ID =主无空间＆GT;\r
＆LT; DIV ID =主页＆GT;\r
＆LT; DIV ID =包装类=容器＆GT;\r
＆LT; DIV CLASS =容器＆GT;\r
＆LT; DIV NG-视图id =main的＆GT;加载...＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; DIV NG-包括='footer.html'ID =页脚＆GT;＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT;脚本类型=文/ NG-模板ID =dashboard.html＆GT;\r
＆LT; DIV NG-包括='sidebar.html'ID =侧边栏＆GT;＆LT; / DIV＆GT;\r
＆LT; DIV ID =内容＆GT;仪表及LT; / DIV＆GT;\r
＆LT; / SCRIPT＆GT;\r
＆LT;脚本类型=文/ NG-模板ID =header.html中＆GT;\r
头\r
＆LT; / SCRIPT＆GT;\r
＆LT;脚本类型=文/ NG-模板ID =sidebar.html＆GT;\r
侧边栏\r
＆LT; / SCRIPT＆GT;\r
＆LT;脚本类型=文/ NG-模板ID =footer.html＆GT;\r
页脚\r
＆LT; / SCRIPT＆GT;\r
＆LT; / DIV＆GT; \r
I'm using AngularJS for the first time. I've successfully implemented a single ng-view in my index.html page which contains a header.html template. So it looks like below
But now I'm creating a dashboard (dashboard.html). So, I have a left side menu in-addition to header.html so it looks like this:
My index.html is similar to this:
<div ng-include="'templates/header.html'"></div>
<div class="main" id="main-no-space" >
<div id="main-page">
<div id="wrapper" class="container">
<div class='container'>
<div ng-view></div>
</div>
</div>
</div>
<div ng-include="'templates/footer.html'">
My dashboard.html is similar to this:
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li class="active">
<a ng-href="#/link1">Link 1</a>
</li>
<li>
<a ng-href="#/link2">Link 2</a>
</li>
<li>
<a ng-href="#/link3">Link 3</a>
</li>
</ul>
</div>
解决方案
Try this:
angular.module('app', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/dashboard', {
templateUrl: 'dashboard.html',
controller: DashboardCtrl
})
.otherwise({
redirectTo: '/dashboard'
});
}]);
function DashboardCtrl() {
}
* {
box-sizing: border-box;
}
#main:after {
content: "";
display: block;
clear: both;
}
#header {
padding: 20px;
border: 1px solid #000;
}
#main {
padding: 20px;
border: 1px solid #000;
}
#sidebar {
padding: 20px;
border: 1px solid #000;
float: left;
width: 20%;
}
#content {
padding: 20px;
border: 1px solid #000;
float: right;
width: 78%;
}
#footer {
padding: 20px;
border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-route.js"></script>
<div ng-app="app">
<div ng-include="'header.html'" id="header"></div>
<div class="main" id="main-no-space">
<div id="main-page">
<div id="wrapper" class="container">
<div class="container">
<div ng-view id="main">loading...</div>
</div>
</div>
</div>
<div ng-include="'footer.html'" id="footer"></div>
</div>
<script type="text/ng-template" id="dashboard.html">
<div ng-include="'sidebar.html'" id="sidebar"></div>
<div id="content">dashboard</div>
</script>
<script type="text/ng-template" id="header.html">
header
</script>
<script type="text/ng-template" id="sidebar.html">
sidebar
</script>
<script type="text/ng-template" id="footer.html">
footer
</script>
</div>
JSFiddle http://jsfiddle.net/mcVfK/928/
这篇关于怎么办多个视图与角度，以支持头部和侧边栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
