Przegląd architektury AngularJS
AngularJS to framework zaprojektowany w celu rozszerzenia możliwości HTML od prostego języka statycznego do bardziej dynamicznego języka intuicyjnego po stronie klienta. AngularJS jest w 100% JavaScript. Pomaga napisać lepiej zarządzany kod po stronie klienta. Daje to deweloperowi większą kontrolę nad kodem i możliwości manipulowania danymi po stronie klienta. Aby to osiągnąć, AngularJS ma odpowiedni wzór projektowy. Nazywa się to wzorem MVC. Dowiedzmy się więcej na ten temat w następnej sekcji. W tym temacie poznamy architekturę AngularJS .
Architektura
AngularJS jest oparty na wzorcu projektowym MVC. Zasady architektury MVC są bardzo dobrze uwzględnione w AngularJS. Ktoś mógł wiedzieć, że MVC jest solidną architekturą dla wielu języków po stronie serwera. AngularJS połączył również wzór MVC po stronie klienta.
MVC - model, widok, kontroler
Wzorzec MVC oznacza wzorzec kontrolera widoku modelu.
-
Model
Jest to najniższy poziom architektury. Odpowiada za przechowywanie i utrzymywanie danych aplikacji. Dane są przechowywane przez cały cykl życia strony, a czasem nawet między stronami. Model sam się aktualizuje na podstawie instrukcji otrzymanych od kontrolera.
-
Widok
Widok jest od przodu aplikacji. Jest to warstwa prezentacji architektury odpowiedzialna za wyświetlanie danych użytkownikowi. Zawiera pełny kod stron interfejsu użytkownika w dowolnym języku zgodnym z przeglądarką, zwykle HTML. Widok jest wyzwalany przez odpowiedni kontroler. Widok wysyła żądania do kontrolera na podstawie interakcji użytkownika z aplikacją. Kontroler następnie ponownie generuje widok na podstawie odpowiedzi otrzymanej od serwera.
-
Kontroler
Kontroler jest mózgiem przetwarzania za widokiem i modelem. Podejmuje decyzje o wygenerowaniu, regeneracji lub zniszczeniu widoku i modelu. Wszystkie operacje biznesowe i logika kodu są zapisywane wewnątrz kontrolera. (Niektórzy programiści wolą pisać logikę biznesową w samym Modelu). Kontroler jest również odpowiedzialny za wysyłanie żądań do serwera i otrzymywanie odpowiedzi. Następnie aktualizuje widok i model na podstawie odpowiedzi. Krótko mówiąc, kontroler kontroluje wszystko.
Architekturę MVC można przedstawić graficznie za pomocą poniższego obrazu.
MVC jest solidny, ponieważ opiera się na zasadzie opracowywania oprogramowania Separation of Concerns. Istnieje kilka kontrolerów, które obsługują określone zestawy danych i zarządzają odpowiednimi widokami i modelami. Logika aplikacji jest zatem oddzielona od warstwy interfejsu użytkownika.
MVC w AngularJS
Chodziło o MVC i jego zasady. Jak te zasady są wdrażane w AngularJS? Pozwól nam zrozumieć.
- Zakres - zakres to model przechowujący dane aplikacji. Zmienne zakresu są dołączone do DOM, a właściwości zmiennych są dostępne poprzez powiązania.
- HTML z wiązaniem danych - widok w AngularJS nie jest zwykłym HTML. Jest to HTML związany z danymi. Wiązanie danych pomaga renderować dynamiczne dane w tagach HTML. W ten sposób model regularnie aktualizuje DOM.
- ngController - Dyrektywa ngController odpowiada za współpracę między modelem, widokiem i logiką biznesową. Klasa kontrolera określona w dyrektywie ngController kontroluje zakres i widok.
Przegląd koncepcyjny
Okej, więc teraz rozumiemy, że AngularJS jest zbudowany na architekturze MVC. Czy to wszystko? Czy w grze nie ma nic więcej? Oczywiście, że tak.
Istnieje kilka ważnych pojęć, które należy zrozumieć, aby zrozumieć zachowanie aplikacji AngularJS. Rozumiem je.
-
Szablony
Szablony to elementy HTML wraz z elementami i atrybutami specyficznymi dla AngularJS. Dynamikę w aplikacjach AngularJS osiąga się poprzez połączenie szablonu z danymi z modelu i sterownika.
-
Dyrektywy
Dyrektywy to atrybuty lub elementy reprezentujące komponent DOM wielokrotnego użytku. Dyrektywy bezpośrednio manipulują bazowym DOM HTML, aby renderować widok dynamiczny. To zwalnia programistę od martwienia się o natywne elementy HTML i atrybuty.
-
Dwukierunkowe wiązanie danych
AngularJS automatycznie synchronizuje dane między modelem a widokiem poprzez wiązanie danych. Model jest uważany za jedno źródło prawdy dla danych aplikacji. Widok jest zawsze rzutem modelu. Po zmianie modelu widok zmienia się i odwrotnie. Jest to określane jako wiązanie dwustronne. Osiąga się to poprzez kompilację szablonu na żywo w przeglądarce.
-
Wytyczanie
Aplikacje AngularJS, będące aplikacjami jednostronicowymi (SPA), kładą duży nacisk na routing między stronami. AngularJS ma solidny mechanizm routingu, który dopasowuje adresy URL z listy tras określonych w routerze powiązanym z komponentem. Oznacza to, że ilekroć przeglądarka żąda adresu URL, renderowany jest powiązany komponent podrzędny, a nie cała strona.
-
Usługi
Kontroler jest połączony z widokiem. Oznacza to, że dobrą praktyką jest pisanie tylko tego kodu wewnątrz kontrolera, który jest logicznie użyteczny dla jego widoku. Logikę niezależną od widoku można przenieść w inne miejsce, aby mogła zostać ponownie wykorzystana przez inne kontrolery.
Nadchodzą Usługi w akcji. Usługi oddzielają logikę biznesową wielokrotnego użytku od logiki widoku. Logika specyficzna dla widoku znajduje się następnie wewnątrz określonych kontrolerów, podczas gdy wspólna logika biznesowa jest wspólna dla wszystkich kontrolerów.
Zasadą ogólną jest, że kod dostępu do danych zaplecza zapisywany jest również w usługach.
-
Wstrzykiwanie zależności
Teraz, gdy przenieśliśmy logikę niezależną od widoku do wspólnej lokalizacji, w jaki sposób kontrolujemy uprawnienia dostępu do wspólnych usług? Odbywa się to za pomocą wstrzykiwania zależności (DI). Dependency Injection to wzorzec projektowania oprogramowania, który zajmuje się tworzeniem obiektów i uzyskiwaniem ich zależności. Wszystko w AngularJS, od dyrektyw, przez kontrolery, aż po usługi i prawie wszystko, jest podłączone przez DI.
Zabawny fakt architektury AngularJS
AngularJS został nazwany jako AngularJS z powodu kątowych nawiasów w znacznikach HTML. Projekt został zaprojektowany tak, aby HTML był bardziej dynamiczny i przyjazny dla danych, dlatego programiści postanowili nazwać go po nawiasach kwadratowych w HTML.
Wniosek - architektura AngularJS
Artykuł obejmuje wszystkie ważne koncepcje architektury AngularJS. Jest to dobry wstęp do zrozumienia działania różnych elementów aplikacji AngularJS. Następnym krokiem jest stworzenie w pełni funkcjonalnej aplikacji AngularJS z wieloma kontrolerami, która pobiera również dane z backendu. To zapewni ci dobrą praktyczną praktykę w zakresie koncepcji AngularJS.
Polecane artykuły
Jest to przewodnik po architekturze AngularJS. Tutaj omawiamy architekturę, MVC w angularjs i Przegląd koncepcyjny. Możesz także przejrzeć nasze inne sugerowane artykuły, aby dowiedzieć się więcej -
- Kariera w AngularJS
- Pytania do wywiadu AngularJS
- Co to jest Backbone.js?
- Oprogramowanie do eksploracji danych