与AngularJS一起使用单独的首页布局_Angularjs_Layout

与AngularJS一起使用单独的首页布局

angularjs layout

与AngularJS一起使用单独的首页布局,angularjs,layout,Angularjs,Layout,我的应用程序的大多数部分共享一个共同的布局，包括标题、侧导航和内容区域。这些公共元素设置在my index.html文件中，渲染路由的结果通过ng view指令包含。见下文。请注意，我也在尝试使用材质设计 <body layout="row"> <md-sidenav md-is-locked-open="true" class="md-whiteframe-z2"> <header> <

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

<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>

我的问题是，如何创建一个布局完全不同的头版，例如没有侧边导航？在我看来，我需要将header、sidenav等移动到一个单独的模板中，然后有条件地将路由的结果注入到单独的模板中，然后才能在ng视图中使用它。换句话说，我认为我需要有条件地修饰路由响应

从哪里开始呢

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

一个简单的ng if可能会有所帮助。。。仅在主页控制器中设置变量，以便所有其他路由的条件都为false

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

另一种选择是动态ng include