AngularJS - Wiele widoków ng w jednym szablonie

Question 1

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

Question 2

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.

Question 3

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 .

Question 4

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.

Question 5

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

Question 6

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

Question 7

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.

Answer 1

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

Answer 2

2

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

Alp,

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

1

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

zx1986

Answer 7

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,

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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

Farshid Saberi

Answer 15

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

Answer 16

3

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

David Barreto

Answer 17

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

Answer 18

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

Answer 19

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

user441521

Answer 20

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

Answer 21

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.

AngularJS - Wiele widoków ng w jednym szablonie

Odpowiedzi: