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-app
deklaracji na tej samej stronie; mam na myśli różne sekcje dużej witryny, które mają własną, niepowtarzalną ng-app
deklarację.
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
źródło
Odpowiedzi:
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
apps/app1/index.html
kiedy/app1
przychodzi żądanie . Używaj przyjaznych adresów URL (np.the-first-application/
Zamiastapp1/
i mapuj je przy użyciu technologii serwera, jeśli jest to wymagane.global.html
windex.html
ponieważ zawiera sprzedawca zawiera (patrz niżej).index.html
(patrz poniżej).ng-app
i root<div ui-view></div>
windex.html
.<app-name>.module.js
plik zawierający definicję modułu kątowego i listę zależności.<app-name>.js
plik zawierający konfigurację modułów i bloki uruchamiania oraz konfigurację routingu jako część tego.parts
folder zawierający kontrolery aplikacji, widoki, usługi i dyrektywy w strukturze, która ma sens dla konkretnej aplikacji . Nie uważam podfoldery podobacontrollers/
,views/
itp pomocne, ponieważ nie skalować, ale YMMV.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:
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.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.
źródło
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.
źródło
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:
Ten plunker wyjaśnia, w jaki sposób możemy ręcznie uruchomić AngularJS.
źródło