Question

我的应用程序的大多数部分共享一个共同的布局，包括标题，sidenav和内容区域。这些公共元素在我的index.html文件中设置，渲染路由的结果通过ng-view指令包含在内。见下文。（请注意，我也尝试使用Material Design。）

<body layout="row">    

    <md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">    
        <header>
            <!-- heading -->
        </header>    
        <ul>
            <!-- menu options -->
        </ul>    
    </md-sidenav>

    <div flex layout="column">
        <md-toolbar layout="row">
            <!-- tool bar content -->
        </md-toolbar>
        <md-content flex layout-padding id="content">
            <div ng-view></div>  <!-- result goes here -->
        </md-content>
    </div>    

    <!-- scripts --> 

</body>

我的问题是，如何创建具有完全不同布局的首页，例如它没有侧面导航？在我看来，我需要将标题，sidenav等移动到一个单独的模板中，然后在ng-view中使用之前有条件地将路由的结果注入单独的模板中。换句话说，我认为我需要有条件地修饰路线响应。

我从哪里开始？

我看到有一个UI路由器模块可用，但我认为这对我的简单场景来说可能有点过头了。

Answer 1

一个简单的ng-if可能有帮助...只在你的主页控制器中设置一个变量，所以其他所有路径的条件都是假的。

<md-sidenav ng-if="!homePageControllerVariable">

另一种选择是动态ng-include

使用AngularJS单独的首页布局

1 个答案: