AngularJS - wiele widoków w jednym szablonie

126

Buduję dynamiczną aplikację internetową za pomocą AngularJS. Czy możliwe jest posiadanie wielu ng-view w jednym szablonie?AngularJS - wiele widoków w jednym szablonie

Źródło

2013-07-09 Jayram Singh

wydaje się, że wniosek pull, nadal z pewnymi błędami: https://github.com/angular/angular.js/pull/1198 – Alp

Jan Varwig pisze o roli dyrektyw kątowej. Nie jest to odpowiedź na twoje pytanie, ale w niektórych przypadkach jego pomysły mogą być dobrą alternatywą: http: //jan.varwig.org/archive/angularjs-views-vs-directives/comment-page-1 –

przechodził przez kątowy tutorial i miał dokładnie to samo pytanie, nie wyjaśniają tego bardzo, wydaje się, że jest to dość głęboka koncepcja. – qwwqwwq

Możesz mieć tylko jeden ng-view.

Możesz zmienić jego zawartość na kilka sposobów: ng-include, ng-switch lub mapować różne kontrolery i szablony za pomocą metody routeProvider.

Źródło

2013-07-09 09:28:19 pasine

kontrolery mapowania i szablony zastąpią cały element ng-view, prawda? – zx1986

A co z dynamiczną zmianą treści widżetu? Czy nie chcesz utworzyć widoku dla widżetu i kontrolera dla widgetu i modelu dla widżetu? –

Czy zaleca się korzystanie z widoków? Czy nie lepiej jest zdefiniować elementy div za pomocą 'ng-show' i' ng-hide' oraz kontrolować ich widoczność za pomocą zmiennych? Ponieważ czasami chciałbym ukryć/pokazać wiele komponentów – SomethingSomething

Używając zwykłego modułu ng-view, nie można mieć więcej niż jednego szablonu dynamicznego.

Jednak pozwala na to this project (poszukaj ui-router).

Źródło

2013-07-09 10:17:54

angular-ui wydaje się być dobrym wyborem w (niedalekiej przyszłości), ale nadal wydaje się bardzo niestabilny do użytku produkcyjnego. –

UI-Router to projekt, który może pomóc: https://github.com/angular-ui/ui-router Jeden z nich dysponuje jest Wiele Nazwane widoki

UI-Router posiada wiele funkcji i polecam Ci go używać, jeśli pracujesz na zaawansowana aplikacja.

Sprawdź dokumentację wielu nazwanych widoków here.

Źródło

2013-09-04 13:25:55

Niestety jak czytnik ui-router mówi: Uwaga: UI-Router jest w trakcie aktywnego rozwoju. W związku z tym, chociaż biblioteka jest dobrze przetestowana, interfejs API może ulec zmianie. Rozważ użycie go w aplikacjach produkcyjnych tylko wtedy, gdy czujesz się komfortowo, śledząc dziennik zmian i odpowiednio aktualizując swoje użycie. – trainoasis

@trainoasis Używany do wielu projektów, Wydaje się 'bardzo' stabilny i do tej pory nie miałem problemu ze zmianą API, w rzeczywistości nie pamiętam żadnych większych zmian w API. –

Wierzę, że można to osiągnąć, po prostu ng-view. W głównym szablonie możesz mieć sekcje ng-include dla widoków podrzędnych, następnie w głównym kontrolerze zdefiniuj właściwości modelu dla każdego szablonu podrzędnego. Tak, aby automatycznie wiązały się z sekcjami ng-include. To jest tak samo jak posiadanie wielu ng-view

można sprawdzić na przykładzie podanym w ng-includedocumentation

na przykład po zmianie szablonu z listy rozwijanej, że zmienia treść. Załóżmy, że masz jeden główny ng-view i zamiast ręcznie wybierać zawartość podrzędną, wybierając opcję rozwijaną, robisz to tak, jak po załadowaniu widoku głównego.

Źródło

2014-10-21 05:53:38 Tekz

W przypadku braku rozwiązania takiego jak UI-Router, ng-include jest rzeczywiście realną alternatywą, jak wyjaśniłeś. To, czego ng-include nie jest w stanie zrealizować, to widoki oparte na adresie URL (stan), ścieżka $ nie może dynamicznie renderować różnych widoków na podstawie bieżącego adresu URL. Możemy przekręcić ramiona Angulara i zrobić to za pomocą niestandardowej logiki w kontrolerze, na przykład w 'ng-include' [documentation] (https://docs.angularjs.org/api/ng/directive/ngInclude) , ale nie jest to pożądany wzór architektury aplikacji, UI-Router jest właściwym rodzajem rozwiązania. – Yiling

Jeden plus za komentarz @Yiling. Używanie ng-include jest obejściem. –

Możliwe jest posiadanie wielu lub zagnieżdżonych widoków. Ale nie przez ng-view.

Główny moduł trasy w kanciastym nie obsługuje wielu widoków. Ale możesz użyć ui-routera. Jest to moduł innej firmy, który można uzyskać za pośrednictwem Github, angular-ui/ui-router, https://github.com/angular-ui/ui-router. Opracowywana jest również nowa wersja ngRoutera (ngNewRouter). W tej chwili nie jest stabilny. Zapewniam ci prosty przykład uruchomienia z routerem ui. Za jego pomocą można nazwać widoki i określić, które szablony i kontrolery mają być używane do ich renderowania. Używając $ stateProvider, powinieneś określić sposób renderowania symboli zastępczych dla określonego stanu.

<body ng-app="main"> 
    <script type="text/javascript"> 
    angular.module('main', ['ui.router']) 
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) { 
     $stateProvider 
     .state('home', { 
      url: '/', 
      views: { 
       'header': { 
        templateUrl: '/app/header.html' 
       }, 
       'content': { 
        templateUrl: '/app/content.html' 
       } 
      } 
     }); 
    }]); 
    </script> 
    <a ui-sref="home">home</a> 
    <div ui-view="header">header</div> 
    <div ui-view="content">content</div> 
    <div ui-view="bottom">footer</div> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"> 
</body>

Do tej próbki potrzebne jest odniesienie do angularjs i kątowego-ui.router.

$ bower install angular-ui-router

Źródło

2015-10-09 12:19:52

Dziękuję Farshid, to jest świetne! Należy o tym wspomnieć w repozytorium Github-ui-ui/ruter Github https://github.com/angular-ui/ui-router gdzie dostałem moduł – totallytotallyamazing

Nie jestem pewien, dlaczego musiałbyś to zrobić. Dlaczego nie ng-include nagłówka/stopki i ng-zobacz zawartość? – user441521

AngularJS - wiele widoków w jednym szablonie

Odpowiedz

Powiązane problemy