Question

我想创建母版页，即主页面，将在应用程序的所有视图中使用。

例如，左侧导航和顶级导航。每当应用程序中的URL更改时，此导航都应显示在所有视图中。

enter image description here

根据ng-view，它只渲染给定的局部视图并替换先前的视图。在上面的图像中，我应该使用角度控制器显示我的左侧和顶部导航。

控制器代码

angular.module('modelDemo').controller("authCtrl", ['$scope', function($scope) {
      $scope.list;
}]);

请让我知道，我怎样才能实现这个目标

Answer 1

您可以按照以下步骤使用angular-route或Angular-ui-router，并设置主人：

步骤1.将index.html设为主页。
步骤2.使用<header>添加引用模板的<footer>，<aside>，<div>，ng-include等。
- 注意：您的左侧和顶部导航将成为其中的一部分
步骤3.视图内容将使用指令属性ng-view或ui-view
步骤4.使用模块app.config()配置子页面

enter image description here

来源：

使用Angular Route：https://docs.angularjs.org/tutorial/step_07
- 全新应用的模板：https://github.com/angular/angular-seed
使用Angular UI路由器：Angular Tutorial 30 mins

Answer 2

ng视图应该能够做到这一点。保持顶部导航/左侧导航html完整，并使用ng视图显示各种显示区域。 http://docs.angularjs.org/api/ng.directive:ngView

要使用ng-view内顶部导航中的控制器，您可以使用$ parent访问该范围：https://stackoverflow.com/a/14700326/390330

小范围的小提琴：http://jsfiddle.net/ezhrw/2/

<button ng:click="$parent.letter = greek">Assignment expression {{ greek }}</button>

Answer 3

我试图创建相同的概念，但需要一种方法来定义占位符。我开始在Plnkr.co中进行实验，到目前为止，我使用了一个LayoutManager来驱动自己从routeProvider对象中的设置。

以下是一个示例：http://embed.plnkr.co/4GPDfTSQCuqukJE7AniZ/

您将看到多个路由如何使用相同页眉和页脚的示例，我没有包含侧边栏的示例。

让我解释一下LayoutManager。

我希望有可以覆盖的占位符。在这个例子中，我有一个包含标题的工具栏，并为标题右侧的其他工具栏项提供了一个空格。这为视图提供了引入其他功能的机会。

所有这些都是由LayoutManager驱动的。 LayoutManager是一个读取$ routeProvider上设置的布局属性的服务。我想以一种方式实现这一点，保持每条路线的清洁和自包含。 LayoutManager被注入工具栏指令。工具栏指令驱动它的LayoutManager的范围属性。

反过来，LayoutManager依赖于routeProvider以及rootScope $ routeChange事件。

我对Angular很新，对建议持开放态度。

Answer 4

我看不出任何问题，如果你使用bootstrap然后使用可以轻松划分你想要的屏幕

<div class="row">
    <div class="col-lg-3">
       Left panel
    </div>
    <div class="col-lg-9" style="border:1px solid #999; overflow-y:auto">
        <div> Top Banner </div>

        <!--  Main view to render all the page -->
        <div ui-view>  </div>

    </div>
</div>

如果您想要完整的演示和代码，请参阅this link

编辑：2016年11月3日：

如果您使用的是ui-router，那么我们可以使用抽象状态来创建不同的母版页。

您不需要播放show / hide，ng-if，只需使用母版页和子页面正确定义路由

Better to see the detail

Answer 5

我知道这是一个老线程，但是应该注意到，从Angular 1.5+开始，我们已经介绍了组件。您应该使用标题组件和页脚组件，而不是处理具有命名视图和所有废话或使用ngInclude的路由。只需将这些添加到index.html（或任何你称之为主html模板的地方）并瞧。

例如（这是使用Angular Material并且缺少布局模块，但希望你明白这一点）

<强> 1。添加到index.html

<layout-header></layout-header>

<强> 2。 header.component.js（你不需要所有这些，但我认为这很有帮助）

(function () {
'use strict';
angular
    .module('layout')
    .component('layoutHeader', {
        templateUrl: 'layout/header.html',
        bindings: {},
        controller: Controller
    });

Controller.$inject = [];
function Controller() {
    var ctrl = this;

    initialize();

    ////////////////////

    function initialize(){

    }

}
}());

第3。了header.html

<md-toolbar> <div class="md-toolbar-tools"> <h2> <span>Really Awesome Title!!!!</span> </h2> <span flex></span> <md-button class="md-icon-button" aria-label="More"> <md-icon class="material-icons">more_vert</md-icon> </md-button> </div> </md-toolbar>

AngularJS中的母版页概念？

5 个答案: