AngularJS: tworzenie aplikacji internetowej z wieloma aplikacjami ng

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

• http://www.johnpapa.net/angular-app-structures-guidelines/
• http://codingsmackdown.tv/blog/2013/04/19/angularjs-modules-for-great-justice/
• http://danorlando.com/angularjs-architecture-understanding-modules/
• http://henriquat.re/modularizing-angularjs/modularizing-angular-applications/modularizing-angular-applications.html

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

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.

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.

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.