19

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

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

在此处输入图像描述

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

控制器代码

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

请让我知道，我怎样才能做到这一点

4

5 回答 5

11

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

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

在此处输入图像描述

资源：

于 2014-07-05T18:59:53.420 回答
7

ng view 应该可以做到这一点。保持顶部导航/左侧导航 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>
于 2013-04-30T03:56:20.450 回答
1

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

这是一个例子：http ://embed.plnkr.co/4GPDfTSQCuqukJE7AniZ/

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

让我解释一下 LayoutManager。

我想要有可以被覆盖的占位符。在此示例中，我有一个包含标题的工具栏，并在标题右侧为其他工具栏项目提供了一个空间。这为视图提供了添加额外功能的机会。

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

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

我对 Angular 很陌生，愿意接受建议。

于 2014-08-04T17:05:07.463 回答
1

我看不出有任何问题，如果您使用的是引导程序，那么使用可以轻松地根据需要划分屏幕

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

如果您想要完整的演示和代码，请查看此链接

编辑：2016 年 11 月 3 日：

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

您不需要播放显示/隐藏、ng-if，只需使用母版页和子页正确定义路由

最好看细节

于 2015-07-28T18:28:52.953 回答
1

我知道这是一个旧线程，但认为应该注意的是，从 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>
于 2016-12-12T02:17:13.640 回答