Koncepcja strony wzorcowej w AngularJS?

Question

Chciałbym stworzyć stronę wzorcową, czyli stronę główną, która będzie używana we wszystkich widokach aplikacji.

Na przykład nawigacja po lewej i nawigacja po wierzchu. Ta nawigacja powinna być wyświetlana we wszystkich widokach, ilekroć URL zmienia się w aplikacji.

Zgodnie ng widzenia tylko tynki otrzymać częściowy widok i zastąpienie poprzedniego widoku. Na powyższym obrazku cała moja nawigacja po lewej i na górze powinna być wyświetlana za pomocą regulatora kątowego.

kod Kontroler

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

Proszę dać mi znać, jak mogę to osiągnąć

Answer 1

widok ng powinien być w stanie to zrobić dobrze. Zachowaj nienaruszoną nawigację górną/nawigację po lewej stronie html i korzystaj z widoku ng dla różnych obszarów wyświetlania. http://docs.angularjs.org/api/ng.directive:ngView

Aby używać kontrolera z górnej nawigacji wewnątrz NG-view można użyć $ rodzica, aby uzyskać dostęp do tego zakresu: https://stackoverflow.com/a/14700326/390330

Fiddle dla zakresu dominującej: http://jsfiddle.net/ezhrw/2/

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

Answer 2

Można użyć trasą kątową lub rytmem kątowym i ustawieniem urządzenia master, wykonując następujące czynności:

• Krok 1. Zrób swój index.html Twoja strona wzorcowa.
• Krok 2. Dodać <header>, <footer>, <aside>, <div> itp przedstawieniu szablony za pomocą ng-include
  • UWAGA: left i top nawigacja będzie częścią
• Krok 3. Zawartość widoku będzie renderowana przy użyciu atrybutu dyrektywy ng-view lub ui-view
• Krok 4. Użyj swojego modułu app.config() do skonfigurowania stron podrzędnych

Źródło:

• użyciu kątowa Trasa: https://docs.angularjs.org/tutorial/step_07
  • szablon dla aplikacji nowiutkim: https://github.com/angular/angular-seed
• użyciu kątowa Router UI: Angular Tutorial 30 mins

Answer 3

Próbowałem stworzyć tę samą koncepcję, ale potrzebowałem sposobu na zdefiniowanie symboli zastępczych. Zacząłem eksperymentować w Plnkr.co i jak dotąd uciekłem się do korzystania z LayoutManager, który sam się wyszukuje z ustawień w obiekcie routeProvider.

Oto przykład: http://embed.plnkr.co/4GPDfTSQCuqukJE7AniZ/

Zobaczysz przykład, jak wiele tras korzystać z tego samego nagłówka i stopki, nie zawierają przykład z paska bocznego.

Pozwól mi wyjaśnić LayoutManager.

Chciałem mieć zastępcze, które mogą być przesłonięte. W tym przykładzie mam pasek narzędzi, który zawiera tytuł i zapewnia spację po prawej stronie tytułu dla dodatkowych elementów paska narzędzi. Daje to widokom możliwość dodania dodatkowej funkcjonalności.

Wszystko to jest obsługiwane przez LayoutManager. LayoutManager to usługa odczytująca właściwości układu ustawione na $ routeProvider. Chciałem to zaimplementować w taki sposób, aby wszystko było czyste i niezależne od trasy. LayoutManager jest wstrzykiwany do dyrektywy dotyczącej paska narzędzi. Dyrektywa paska narzędzi przenosi jego właściwości zakresu do LayoutManager.

Z kolei LayoutManager ma zależność od routeProvider oraz od zdarzenia rootScope $ routeChange.

Jestem bardzo nowy w Angular, otwarty na sugestie.

Answer 4

nie widziałem żadnego problemu, jeśli używasz bootstrap następnie można użyć łatwo podzielić ekran jak chcesz

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

Jeśli chcesz pełną wersję demo i kod na potem zobaczyć this link

Edited : 3 listopada 2016:

Jeśli używasz ui-routera, możemy użyć stanu abstrakcyjnego użytkownika, aby utworzyć różne strony wzorcowe.

Nie trzeba grać pokazać/ukryć, ng-ale tylko jeśli prawidłowo zdefiniować routing ze sobą stron wzorcowych i stron podrzędnych

Better to see the detail

Answer 5

Wiem, że to stary wątek, ale myśl należy zauważyć, że od wersji Angular 1.5+ wprowadzono komponenty. Zamiast zajmować się trasami z nazwanymi widokami i wszystkimi tymi bzdurami lub używając ngInclude, powinieneś używać komponentu nagłówka i komponentu stopki. Po prostu dodaj je do pliku index.html (lub jakkolwiek nazwałeś swój szablon HTML) i voila.

Na przykład (to jest przy użyciu kątowa Materiał i brakuje modułu układu, ale mam nadzieję, że masz punkt)

1. Dodano index.html

<layout-header></layout-header> 

2. header.component.js (nie potrzebujesz tego wszystkiego, ale myślę, że to jest przydatne)

(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. nagłówek.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>