具有Angular的多个布局 [英] Multiple layouts with Angular
问题描述
我正在建造一个Angular应用程序，并在如何处理主页方面遇到了一些障碍。主页有90％的不同 - 只有标题保持不变 - 在那里我有指令显示ex的用户登录状态。
I am building an Angular app and hitting a bit of a snag in how to handle the home page. The home page is 90% different - only the header stays the same - in there I have directives that show user login state for ex.
为了使用路由/模板等，我希望我的ngview显示在样本的白色区域 - 一切正常 - 只是不知道如何建立主页。它不需要ngview区域，因为它是唯一的类型。我不想把它作为第二个应用程序，因为这似乎浪费，并将重新加载一切。
To make use of routing/templates etc I'd ideally like to have my ngview in the white area of sample shown - that all works fine - just not sure how to build the home page. It doesn't need an ngview area persay since it's the only one of it's kind. I don't want to make it as a second apps however as that seems wasteful and would reload everything.
谷歌搜索提出了用指令替换白色区域的建议，但我想我会失去整个路由/模板的好处。
Googling this brings up suggestions of replacing the white area with a directive but then I think I would lose the whole routing/template benefit.
我看过的替代品有代码来确定是否在家中并加载一个正文CSS类等，但由于内容如此不同，这也不理想。
Alternatives I have seen have code to determine if on home and load a body CSS class etc but that is not ideal either as the content is so different.
UI路由器是可能的，但我想尽可能避免使用prebeta。
UI Router is a possibility but I'd like to avoid prebeta stuff if possible.
建议？
推荐答案
你可以这样：
index.html：
index.html:
<body>
...header..
<div ng-if="isHomePage()">
<div ui-view></div>
</div>
<div ng-if="!isHomePage()">
<div ng-include="'shell.html'"></div>
</div>
...footer..
</body>
home.html（带路线'/'）
home.html (with route '/')
...your home page html...
shell.html（任何不同于'/'的路线）
shell.html (any route different than '/')
<div>
<div>
<div ui-view></div>
</div>
<aside><aside>
</div>
最后，将 isHomePage（）添加到您的根范围
finally, add isHomePage() to your root scope
$rootScope.isHomePage = function() {
return $location.path() == '/';
};
这篇关于具有Angular的多个布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
