AngularJS的主页概念？

我想创建母版页，这是将在应用程序的所有视图中使用的主页。AngularJS的主页概念？

例如，左导航和顶级男士导航。只要网址在应用程序中发生变化，此导航应该显示在所有视图中。

enter image description here

作为每纳克视图，它只给出渲染局部视图和替换先前视图。在上面的图片中，我应该使用角度控制器来显示我的左侧和顶部导航。

控制器代码

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

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

来源

2013-04-30 niran

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

使用控制器从NG-视图内的顶部导航，你可以使用$家长可以访问该范围：https://stackoverflow.com/a/14700326/390330

捣鼓父范围：http://jsfiddle.net/ezhrw/2/

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

来源

2013-04-30 03:56:20 basarat

问题在于，如果将控制器添加到主视图，我无法从控制器访问数据。我认为这是由于ng-view和$ routeProvider。因为$ routeProvider包含哪些控制器需要用于数据呈现 – niran 2013-04-30 04:03:29

新控制器中的作用域是父控制器作用域的子域。下面是我创建的一个更好的示例，用于解释这个父子关系：http://jsfiddle.net/basarat/QQNRD/ – basarat 2013-04-30 04:09:48

当您在主页面中直接使用Controller并且没有$ routProvider Innjection时，此工作正常。如果使用$ routProvider，它将获取指定的控制器并呈现它。在这里，我正在尝试使用一个通用控制器，它显示所有顶部和左侧导航，而不管视图更改 – niran 2013-04-30 04:37:17

您可以使用角度路由或Angular-ui路由器，并设置你的主，按照下面的步骤：

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

：https://docs.angularjs.org/tutorial/step_07一个全新的应用程序
- 模板：https://github.com/angular/angular-seed
采用了棱角分明的UI路由器：

enter image description here

来源Angular Tutorial 30 mins

来源

2014-07-05 18:59:53 Jaider

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

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

你会看到的多条路线如何使用相同的页眉和页脚的例子，我不包括与侧边栏的例子。

让我解释LayoutManager的。

我想有可能被覆盖的占位符。在这个例子中，我有一个工具栏，其中包含一个标题，并为标题右侧的附加工具栏项目提供一个空格。这为视图提供了投入附加功能的机会。

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

反过来，布局管理对routeProvider的依赖以及对rootScope $ routeChange事件。

我很新的角度，开放的建议。

来源

2014-08-04 17:05:07 alettieri

不错的方法，但是好像你在添加子工具栏。它不会更改顶部工具栏 – niran 2014-08-05 02:25:49

的确如此。应该称之为子工具栏不是主要的。 – alettieri 2014-08-05 22:47:11

我看不出任何问题，如果你使用的是引导，然后使用可以轻松地将您的屏幕，只要你想

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

如果您正在使用的用户界面路由器那么我们可以抽象用户国家创造不同的母版页。

你并不需要发挥显示/隐藏，NG-如果只是定义了正确的路由与你母版页和子页面

Better to see the detail

来源

2015-07-28 18:28:52

这是一个非常好的解决方案。另外还有一点：你可能希望两个面板（列）的高度相同。看看这篇文章来解释如何做到这一点：http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height（我从优秀的这个技巧PluralSight上的“具有Bootstrap 3的响应式网站”教程。） – 2017-02-03 15:05:55

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

例如（这是采用了棱角分明材料和缺少布局模块，但希望你明白了吧）

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.标题。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-12 02:17:13 Justin

AngularJS的主页概念？

回答

相关问题