AngularJS - Wiele widoków ng w jednym szablonie

132

Buduję dynamiczną aplikację internetową przy użyciu AngularJS. Czy można mieć wiele ng-viewna jednym szablonie?

angularjs ng-view

— Jayram
źródło

2

wydaje się, że jest żądanie ściągnięcia, nadal z kilkoma błędami: github.com/angular/angular.js/pull/1198

— Alp,

4

Jan Varwig pisze o roli dyrektyw w Angular. To nie jest odpowiedź na twoje pytanie, ale w niektórych przypadkach jego pomysły mogą być dobrą alternatywą: jan.varwig.org/archive/angularjs-views-vs-directives/ ...

— Juha Palomäki

przechodził przez samouczek dotyczący kątów i miał dokładnie to samo pytanie, nie wyjaśniają tego zbyt jasno, wydaje się jednak dość głęboką koncepcją ..

— qwwqwwq

100

Możesz mieć tylko jedną ng-view.

Można zmienić jego treść na kilka sposobów: ng-include, ng-switchlub mapowanie różne kontrolery i szablony poprzez routeProvider.

— pasine
źródło

1

mapowanie kontrolerów i szablonów zastąpi cały element ng-view, prawda?

— zx1986

9

A co z dynamiczną zmianą zawartości widżetu? Czy nie chciałbyś utworzyć widoku dla widżetu i kontrolera dla widżetu oraz modelu widżetu?

— Ray Suelzer,

Czy warto korzystać z widoków? Czy nie lepiej jest zdefiniować elementy div za pomocą ng-showi ng-hideoraz kontrolować ich widoczność za pomocą zmiennych? Ponieważ czasami chciałbym ukryć / pokazać wiele komponentów

— SomethingSomething

39

UI-Router to projekt, który może pomóc: https://github.com/angular-ui/ui-router Jedną z jego funkcji jest wiele nazwanych widoków

UI-Router ma wiele funkcji i polecam korzystanie z niego, jeśli pracujesz nad zaawansowaną aplikacją.

Sprawdź dokumentację dotyczącą wielu nazwanych widoków tutaj .

— Morteza Ziyae
źródło

6

Niestety, jak mówi readme ui-router: Uwaga: UI-Router jest aktywnie rozwijany. W związku z tym, chociaż ta biblioteka jest dobrze przetestowana, interfejs API może się zmienić. 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

1

@trainoasis Używałem go 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 żadnej większej zmiany w API.

— Morteza Ziyae

19

Wierzę, że możesz to osiągnąć mając singiel ng-view. W głównym szablonie możesz mieć ng-includesekcje dla podwidoków, a następnie w głównym kontrolerze zdefiniuj właściwości modelu dla każdego szablonu podrzędnego. Aby automatycznie wiązały się z ng-includesekcjami. To to samo, co posiadanie wielung-view

Możesz sprawdzić przykład podany w ng-include dokumentacji

w przykładzie zmiana szablonu z listy rozwijanej powoduje zmianę treści. Tutaj załóżmy, że masz jeden główny ng-viewi zamiast ręcznie wybierać zawartość podrzędną, wybierając listę rozwijaną, robisz to tak, jak podczas ładowania widoku głównego.

— Tekz
źródło

2

W przypadku braku rozwiązania takiego jak UI-Router, ng-include jest rzeczywiście realną alternatywą, jak już wyjaśniłeś. To, czego ng-include nie może osiągnąć, to multiwidoki oparte na adresie URL (stan), $ route nie może dynamicznie renderować różnych widoków na podstawie bieżącego adresu URL. Moglibyśmy przekręcić ramiona Angulara i sprawić, by stało się to, używając niestandardowej logiki w kontrolerze, jak na przykładzie w ng-include dokumentacji , ale nie jest to pożądany wzorzec architektury aplikacji, UI-Router jest właściwym rozwiązaniem.

— Yiling

Jeden plus za komentarz @Yiling. Korzystanie z ng-include jest obejściem.

— Farshid Saberi

13

Używając zwykłego ng-viewmodułu nie możesz mieć więcej niż jednego dynamicznego szablonu.

Jednak ten projekt umożliwia ci to (szukaj ui-router).

— Łukasz Bachman
źródło

3

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

— David Barreto

8

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

Główny moduł routingu w trybie kątowym nie obsługuje wielu widoków. Ale możesz użyć routera ui. To jest moduł innej firmy, który można uzyskać za pośrednictwem Github, angular-ui / ui-router, https://github.com/angular-ui/ui-router . Obecnie opracowywana jest również nowa wersja ngRouter (ngNewRouter). W tej chwili nie jest stabilny. Podaję więc prosty przykład uruchomienia z routerem ui. Za jego pomocą możesz nazwać widoki i określić, które szablony i kontrolery mają być używane do ich renderowania. Używając $ stateProvider, należy określić, jak symbole zastępcze widoku mają być renderowane 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>

Musisz odwołać się do angularjs i angular-ui.router dla tej próbki.

$ bower install angular-ui-router

— Farshid Saberi
źródło

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

— totalnieamazing

Nie wiem, dlaczego miałbyś to zrobić. Dlaczego nie ng-uwzględnij nagłówek / stopkę i ng-wyświetl zawartość?

— user441521

ng-include będzie działać, jeśli pliki są hostowane, np. na nodejs. Jeśli pracujesz z katalogiem lokalnym, zgłosiłby błąd między domenami.

— Sid

0

Nie możesz mieć wielu widoków ng. Poniżej znajduje się mój przypadek użycia, w którym rozwiązałem swoje wymagania. Chciałem mieć zachowanie kart w moim oknie dialogowym modelu. Miałem problem z klikaniem zakładek zawierających hiperłącze, które wywoływały łącza routera. Rozwiązałem to za pomocą przycisku i css dla kart. Kiedy użytkownik kliknie kartę, w rzeczywistości nie wywoła żadnego hiperłącza, które zawsze wywoła router ng-router. Kiedy użytkownik kliknie kartę, wywoła metodę, w której dynamcilly ładuję html. Poniżej znajduje się funkcja po kliknięciu karty

self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

Użytkownik $ templateRequest. Na stronie test_template.html dodaj treść html. Ta zawartość html zostanie powiązana z twoim kontrolerem.

— Aslam anwer
źródło