具有两种不同布局的 Angular Js 应用程序答案

【问题标题】：Angular Js Application with two different layouts具有两种不同布局的 Angular Js 应用程序
【发布时间】：2017-02-09 20:51:50
【问题描述】：

我一直在研究具有多个模块的大型 angularJs 应用程序。问题是现在我必须在该应用程序中包含静态网站，并且该网站的布局与我的应用程序完全不同。

我做了一些研发，发现了一些主要依赖于 angular.bootstrap 的答案

https://docs.angularjs.org/api/ng/function/angular.bootstrap

但我的应用程序的 ng-view 是在 html 标记中声明的，而不是在正文中，而且我的布局如下所述。

<div ui-view="header">
</div>
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="page-container">
    <!-- BEGIN SIDEBAR -->
    <div class="page-sidebar-wrapper" ui-view="sidebar">
    </div>
    <!-- END SIDEBAR -->
    <!-- BEGIN CONTENT -->
    <div class="page-content-wrapper">
        <div class="page-content" ui-view="content">
        </div>
    </div>
    <!-- END CONTENT -->
</div>

但是网站结构与这种结构完全不同，所以任何人都可以建议如何解决这种情况

如果是，我应该在我的 index.html 中使用两个 ng-views，而不是在 html 标签中声明时如何使用两个 ng-views。

谢谢

【问题讨论】：

对嵌套视图使用ui-router。然后，您可以定义一个主视图、在该视图中设置布局的 2 个主要状态，以及为每个状态/布局定义带有子视图的子状态。

标签： javascript html angularjs angular-ui-router ng-view

【解决方案1】：

您所描述的类似于嵌套视图？默认路由器不支持，所以如果你想使用嵌套视图，你必须使用第三方模块。

【讨论】：