Czy AngularJS jest przeznaczony tylko do aplikacji jednostronicowych (SPA)?

Patrzymy na opcje budowy frontonu aplikacji, którą tworzymy, i próbujemy ocenić narzędzie, które będzie dla nas działać i dać nam najlepszą platformę do dalszego rozwoju.

To jest projekt Node.js. Naszym pierwotnym planem było użycie ekspresu i zejście tą drogą, ale zdecydowaliśmy, że zanim rozpoczniemy ten etap, najlepiej sprawdzić, co tam jest. Nasza aplikacja ma kilka obszarów, które naszym zdaniem nie pasują do modelu jednostronicowego, ponieważ są powiązane z perspektywy aplikacji, ale nie z widoku.

Widzieliśmy kilka frameworków, których moglibyśmy użyć do zbudowania klienta, takich jak Backbone.js , Meteor itp., A także AngularJS.

To może być dość oczywiste pytanie, ale nie możemy rozszyfrować, czy AngularJS jest przeznaczony wyłącznie do aplikacji jednostronicowych, czy może być używany do aplikacji wielostronicowych, takich jak na przykład Express.

AKTUALIZACJA 17 lipca 2013 Aby utrzymać ludzi w pętli, będę aktualizować to pytanie, gdy będziemy przechodzić proces. Na razie zbudujemy wszystko razem i przekonamy się, jak dobrze to działa. Dotarliśmy do kilku osób, które są bardziej wykwalifikowane w AngularJS niż my, i zadaliśmy pytanie dotyczące podziału większych aplikacji, które współużytkują kontekst, ale mogą być zbyt duże, pracując na jednej stronie.

Konsensus był taki, że moglibyśmy obsługiwać wiele stron statycznych i tworzyć aplikacje AngularJS, które działają tylko z tymi stronami, skutecznie tworząc kolekcję SPA i łącząc te aplikacje razem za pomocą standardowego linkowania. Teraz nasz przypadek użycia jest bardzo specyficzny, ponieważ nasze rozwiązanie ma kilka aplikacji, i jak powiedziałem, najpierw wypróbujemy jedną bazę kodu i stamtąd zoptymalizujemy.

AKTUALIZACJA 18 czerwca 2016 Projekt upadł z urwiska, więc nigdy nie zajęliśmy się zbytnią pracą. Niedawno podnieśliśmy go, ale nie używamy już kątów i zamiast tego używamy React. Nadal korzystamy z architektury przedstawionej w poprzedniej aktualizacji, w której używamy aplikacji ekspresowych i samoobsługowych, więc na przykład mamy /chatekspresową trasę, która obsługuje naszą aplikację React, mamy inną trasę, /projectsktóra obsługuje aplikację projektów i wkrótce. W pewnym sensie patrzymy na to, że każda aplikacja jest zagregowanym katalogiem głównym pod względem zestawu funkcji, musi ona być samodzielna, aby mogła być uważana za samą aplikację. Z technicznego punktu widzenia wszystkie informacje są dostępne, są to tylko podstawowe informacje ekspresowe i jakikolwiek smak dobrodziejstw aplikacji po stronie klienta, których chcesz użyć.

Ani trochę. Możesz używać Angulara do tworzenia różnych aplikacji. Routing po stronie klienta to tylko niewielka część.

Masz dużą listę funkcji, które przyniosą korzyści poza routingiem po stronie klienta:

• wiązanie dwustronne
• szablony
• formatowanie walut
• pluralizacja
• kontrole wielokrotnego użytku
• Oszczędna obsługa interfejsu API
• Obsługa AJAX
• modularyzacja
• zastrzyk zależności

To szalone, że wszystko to „można wykorzystać tylko w aplikacji na jednej stronie”. Oczywiście, że nie… to tak, jakby powiedzieć „Jquery jest tylko dla projektów z animacjami”.

Jeśli pasuje do twojego projektu, użyj go.

Na początku zmagałem się z „jak” również z Angularem. Pewnego dnia przyszło mi do głowy: „JESZCZE javascript”. Istnieje mnóstwo przykładów na temat inscenizacji Angulara (jeden z moich ulubionych wraz z książką https://github.com/angular-app/angular-app ). Najważniejszą rzeczą do zapamiętania jest załadowanie plików js, tak jak w każdym innym projekcie. Wszystko, co musisz zrobić, to upewnić się, że różne strony odwołują się do poprawnego obiektu Angular (kontroler, widok itp.) I że jesteś wyłączony. Mam nadzieję, że to ma sens, ale odpowiedź była tak prosta, że ​​przeoczyłem ją.

Może moje doświadczenie będzie komuś przydatne. Logicznie podzieliliśmy nasz projekt. Jedno SPA, którego używamy do przesyłania danych, drugie do pracy z mapą, drugie do edycji profilu użytkownika itp. Na przykład mamy trzy aplikacje: kanał, użytkownika i mapę. Używam go w oddzielnych adresach URL, jak poniżej:

https://host/feed/#/top/
https://host/user/#/edit/1/
https://host/map/favorites/#/add/

Każda z tych aplikacji ma własne mapowania routingu lokalnego między stanami w aplikacji. Myślę, że to dobra praktyka, ponieważ każda aplikacja działa tylko w swoim własnym kontekście i zależnościach obciążenia, których naprawdę potrzebuje. Ponadto jest to bardzo dobra praktyka do procesów debugowania i integracji.

Rzeczywiście, możesz bardzo łatwo tworzyć mieszankę aplikacji SPA, na przykład kanał będzie zawierał adres URL z aplikacją angularjs, aplikację użytkownika z Reagjs i mapować do aplikacji backbone.js.

W odpowiedzi na twoje pytanie:

Angular nie tylko dla SPA, Angular gra dobrze i szybko dla aplikacji SPA, ale nikt nie zadaje sobie trudu, aby zbudować aplikację MPA dla różnych aplikacji SPA. Ale myśląc o swojej architekturze adresu URL, nie zapomnij o dostępności SEO swoich aplikacji.

Popieram również pomysł:

Jaka jest różnica między projektem a aplikacją? Aplikacja to aplikacja internetowa, która coś robi - np. System blogów, baza danych z rejestrami publicznymi lub prosta aplikacja ankiet. Projekt to zbiór konfiguracji i aplikacji dla określonej witryny. Projekt może zawierać wiele aplikacji. Aplikacja może być w wielu projektach.

Jeśli potrzebujesz tylko kilku stron z wiązaniem danych klienta, wybrałbym Knockout i JavaScript Namespacing.

Knockout jest świetny, szczególnie jeśli potrzebujesz nieskomplikowanej kompatybilności wstecznej i masz dość proste strony. Jeśli używasz komponentów innych firm, niestandardowe wiązania Knockout są proste i łatwe w obsłudze.

Przestrzeń nazw JavaScript umożliwia oddzielne zarządzanie kodem i zarządzanie nim.

var myCo = myCo || {};
myCo.page = {
    init: function(){ ... },
    ...
}

I w znaczniku skryptu po załadowaniu innych skryptów

<script>
    myCo.init();
</script>

Kluczem jest to, że korzystasz z dowolnego narzędzia, kiedy chcesz. Potrzebujesz wiązania danych? Nokaut (lub cokolwiek chcesz). Potrzebujesz routingu? sammy.js (lub cokolwiek chcesz).

Kod klienta może być tak prosty lub skomplikowany, jak chcesz. Próbowałem zintegrować Angulara z bardzo skomplikowaną stroną z istniejącą, zastrzeżoną platformą, i to był koszmar. Angular jest świetny, jeśli zaczynasz od nowa, ale ma krzywą uczenia się i blokuje ci bardzo ścisły przepływ pracy. Jeśli tego nie zrobisz, Twój kod może się bardzo szybko zaplątać.

Powiedziałbym, że Angular to przesada, jeśli tylko chcesz stworzyć SPA. Jasne, jeśli już dobrze się z tym rozwijasz, śmiało. Ale jeśli dopiero zaczynasz korzystać z frameworka i potrzebujesz tylko SPA, wybrałbym coś prostszego z wieloma własnymi korzyściami. Polecam zajrzeć do Vue.js lub Aurelia.io .

Vue.js wykorzystuje dwukierunkowe wiązanie danych, MVVM, komponenty wielokrotnego użytku, prosty i szybki do pobrania, mniej kodu do pisania itp. Łączy w sobie niektóre z najlepszych funkcji Angular i React.

Aurelia.io , szczerze mówiąc, niewiele wiem. Ale rozejrzałem się dookoła i wydaje się, że warto to sprawdzić, podobnie jak powyżej.

Linki:
https://vuejs.org/
http://aurelia.io/