javascript - Angular 的多种布局

标签 javascript angularjs

Desired structure

我正在构建一个 Angular 应用程序,但在如何处理主页方面遇到了一些障碍。主页有 90% 不同 - 只有标题保持不变 - 在那里我有显示用户登录状态的指令。

要使用路由/模板等,我希望在示例的白色区域显示我的 ngview - 一切正常 - 只是不确定如何构建主页。它不需要 ngview 区域 persay 因为它是同类中唯一的一个。我不想将它作为第二个应用程序,因为这看起来很浪费并且会重新加载所有内容。

谷歌搜索提出了用指令替换白色区域的建议,但我认为我会失去整个路由/模板的好处。

我看到的替代方案有代码来确定是否在家并加载主体 CSS 类等,但这也不理想,因为内容是如此不同。

UI Router 是可能的,但我想尽可能避免使用预测试版的东西。

建议?

最佳答案

你可以这样:

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(带有路由 '/')

...your home page html...

shell.html(任何不同于'/'的路由)

<div>
    <div>
       <div ui-view></div>
    </div>
    <aside><aside>
</div>

最后,将 isHomePage() 添加到您的根范围

$rootScope.isHomePage = function() {
    return $location.path() == '/';
};

关于javascript - Angular 的多种布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21317642/

相关文章:

javascript - 为什么这个 JavaScript 会破坏我在 Internet Explorer 中的布局?

javascript - 在数组 typescript 和 angularjs 和 ionic 中查找值

javascript - Q - 在调用下一个操作之前等待操作完成

angularjs - Spotify 的重定向 URI 无效

AngularJS 页面只有在刷新后才能工作

javascript - 在 AngularJS 中从外部应用程序接收 POST

javascript - Ember 组件 sendAction() 不工作

javascript - 无法禁用youtube嵌入播放列表自动播放

javascript - if(window.jQuery) 加载 jQuery 后返回 false

javascript - 标准 JavaScript 中的日期格式