layout - AngularJS - 多种布局

Question

我刚开始使用 AngularJS，我知道它是一个 SPA。对于我们正在构建的应用程序，所有页面（索引页面除外）都将具有两列布局。但是，我们希望索引页是单列全角页面。AngularJS可以实现这个功能吗？

Answer 1

我建议发布一个 plunkr 或 jsfiddle，因为我不确定我是否真的在回答你的问题，或者如果你的问题还有更多我想念的。

如果您通过路由 (ng-view) 处理所有页面，那么只需应用类来区分该单列版本的样式。就像是：

.column_1, .column_2 { margin: 0; width: 50%; float: left; }
#firstpage .column_1, #firstpage .column_2 { margin: 0; width: 100%; float: none; }

然后在 html 中（仅在首页上），将所有内容包装在 div id="firstpage" 中。不要在路由页面中包含该 div，该样式仅适用于第一页。或者，如果您有其他设置，您也可以始终在 ng-view 周围使用样式：

<div class="classname">
    <div ng-view></div>
</div>

如果您有一个侧栏位于您的 ng-view 之外并且这就是您想要关闭/打开的内容，那么我建议在第一页上包含该类（以使其成为全角），并且同时在第一列上使用某种逻辑与 ng-hide/ng-show。