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的主頁概念？

回答

相關問題