AngularJS: tworzenie aplikacji internetowej z wieloma aplikacjami ng


40

Blogosfera zawiera wiele artykułów na temat wytycznych dotyczących struktury aplikacji AngularJS, takich jak te (i inne):

Jednak jednym ze scenariuszy, na który jeszcze nie natknąłem się na wytyczne i najlepsze praktyki, jest przypadek, w którym masz dużą aplikację internetową zawierającą wiele aplikacji „mini-spa”, a wszystkie aplikacje mini-spa dzielą pewną ilość kodu.

Nie odnoszę się do przypadku próby umieszczenia wielu ng-appdeklaracji na tej samej stronie; mam na myśli różne sekcje dużej witryny, które mają własną, niepowtarzalną ng-appdeklarację.

Jak pisze Scott Allen na swoim blogu OdeToCode :

Jednym ze scenariuszy, który nie został dobrze rozwiązany, jest scenariusz, w którym wiele aplikacji istnieje w tej samej większej aplikacji internetowej i wymaga częściowego kodu na kliencie.

Czy istnieją jakieś zalecane podejścia, pułapki, których należy unikać, lub dobre przykładowe struktury tego scenariusza, na które można wskazać?


Aktualizacja - 9/10/2015
Jednym projektem z ciekawą strategią organizacji jest MEAN.JS i folder modułów.
https://github.com/meanjs/mean
https://github.com/meanjs/mean/tree/master/modules

Kolejny przykład pochodzi z przykładu ASP.NET Music Store SPA. https://github.com/aspnet/MusicStore https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps


5
Z czym zdecydowałeś się pójść? Jestem w tej samej pozycji, w której chcę, aby izolacja aplikacji została rozbita na szereg mniejszych, samodzielnych aplikacji
Stephen Patten

Odpowiedzi:


8

Oto projekt, z którym pracuję. Uznałem, że jest przydatny w dwóch większych projektach, które zbudowałem i do tej pory nie trafiłem na żadne przeszkody.

Struktura folderów

your-project/
  apps/
    global.html
    app1/
      index.html
      app1.module.js
      app1.js
      parts/
        foo.js
        foo.html
        ...
    app2/
  libs
    lib1/
      lib1.module.js
      parts/
        directive1.js
        directive1.html
    lib2/
  third-party/
  • Skonfiguruj środowisko sieciowe serwera, aby wyszukiwało, apps/app1/index.htmlkiedy /app1przychodzi żądanie . Używaj przyjaznych adresów URL (np. the-first-application/Zamiast app1/i mapuj je przy użyciu technologii serwera, jeśli jest to wymagane.
  • Twój technologia serwer musi zawierać global.htmlw index.htmlponieważ zawiera sprzedawca zawiera (patrz niżej).
  • Uwzględnij zasoby wymagane przez odpowiednią aplikację w index.html(patrz poniżej).
  • Umieść ng-appi root <div ui-view></div>w index.html.
  • Każda aplikacja i lib to osobny moduł kątowy.
  • Każda aplikacja otrzymuje <app-name>.module.jsplik zawierający definicję modułu kątowego i listę zależności.
  • Każda aplikacja otrzymuje <app-name>.jsplik zawierający konfigurację modułów i bloki uruchamiania oraz konfigurację routingu jako część tego.
  • Każda aplikacja otrzymuje partsfolder zawierający kontrolery aplikacji, widoki, usługi i dyrektywy w strukturze, która ma sens dla konkretnej aplikacji . Nie uważam podfoldery podoba controllers/, views/itp pomocne, ponieważ nie skalować, ale YMMV.
  • Biblioteki mają tę samą strukturę co aplikacje, ale pomijają rzeczy, których nie potrzebują (oczywiście).

Zacznij od usług i dyrektyw w aplikacji, w której są używane. Gdy tylko będziesz potrzebować czegoś w innej aplikacji, przejdź do biblioteki. Spróbuj stworzyć funkcjonalnie spójne biblioteki, a nie tylko biblioteki zawierające wszystkie dyrektywy lub wszystkie usługi.

Majątek

Minimalizuję zarówno pliki JS, jak i CSS dla kompilacji wersji, ale pracuję z plikami nieuprawnionymi podczas programowania. Oto konfiguracja, która to obsługuje:

  • Zarządzaj dostawcą obejmuje globalnie w global.html. W ten sposób ciężkie rzeczy można załadować z pamięci podręcznej podczas nawigacji między SPA. Upewnij się, że buforowanie działa poprawnie.
  • Aktywa na SPA są zdefiniowane w index.html. Powinno to obejmować tylko pliki specyficzne dla aplikacji, a także używane biblioteki.

Powyższa struktura folderów ułatwia znalezienie odpowiednich plików dla kroków kompilacji minimalizacji.


7

Aplikacje pojedynczej strony (SPA) nie są tak naprawdę przeznaczone do używania w sposób, który sugerujesz z naprawdę dużą aplikacją i wieloma mini-SPA w głównej. Największym problemem będą czasy ładowania strony, ponieważ wszystko musi zostać załadowane z góry.

Jednym ze sposobów rozwiązania tego problemu jest skorzystanie ze strony nawigacji, która zabierze Cię do poszczególnych SPA. Strona nawigacji będzie dość lekka, a następnie załadujesz tylko jedno SPA na raz, w zależności od tego, co zostało wybrane. Możesz udostępnić pasek łączy z linkami nawigacyjnymi w każdym ze swoich SPA, aby użytkownicy nie zawsze musieli wracać do strony nawigacji, gdy muszą przejść do innego obszaru.

Korzystanie z tego podejścia może powodować pewne wyzwania związane z utrwalaniem informacji w różnych OSO. Ale mówimy o czymś, czego SPA nie były przeznaczone. Istnieje kilka struktur, które mogą pomóc w utrwalaniu danych po stronie klienta. Breeze jest pierwszym, który przychodzi na myśl, ale są też inni.


Jeśli chodzi o układ - kilka pytań programistów dotyczy układu dużego projektu, w zależności od konkretnych potrzeb. Natknąłem się na to i to . W SPA nie ma nic magicznego, co wpłynęłoby na układ aplikacji poza odpowiedzią na te pytania.

To powiedziawszy, istnieją różne podejścia, które najlepiej sprawdzają się w różnych projektach. Poleciłbym trzymać się układu podstawowego, jaki zapewnia projekt nasion kątowych. Utwórz osobne foldery z dostarczonych dla niestandardowych pakietów i kodu źródłowego. W folderze źródłowym użyj układu projektu, który jest odpowiedni do twoich potrzeb.


-1

Jeśli Twoja aplikacja wymaga wielu deklaracji ng-aplikacji na tej samej stronie, musisz ręcznie uruchomić moduł AngularJS, wprowadzając nazwę modułu, jak pokazano poniżej:

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

Ten plunker wyjaśnia, w jaki sposób możemy ręcznie uruchomić AngularJS.


5
mg1075 było całkiem jasne, że tak nie jest: „Nie odnoszę się do przypadku próby posiadania wielu deklaracji aplikacji na tej samej stronie; raczej mam na myśli różne sekcje dużej witryny, które mają własne, unikalne ng -aplikacja. ”
cincodenada
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.