Angular to framework, który już od dłuższego czasu obecny jest na rynku IT. Powstają jego nowe wersje i jest chętnie wykorzystywany w projektach. Jednak programiści wciąż często kojarzą go głównie ze światem Front-Endu. Tymczasem jest to błąd. Pamiętam swój pierwszy projekt, w którym miałem pracować z Angularem, w tamtym przypadku wraz z Web Api 2.0 pod .NET. Na początku, jako ścisły Back-Endowiec, podchodziłem do takiego wyboru technologii sceptycznie, jednak bardzo szybko zmieniłem zdanie. Poniżej znajdziecie odpowiedź dlaczego.

Czym jest Angular?

Po krótce mówiąc Angular to framework, który pozwala na budowanie skalowalnych i bardzo wydajnych aplikacji webowych. Jest on oparty na JavaScript oraz HTML.

Jak jest zbudowany Angular?

Angular w wersji 1.0, nazywany również AngularJS, stworzono głównie do budowy, tzw. Single Page Applications, ale również aplikacji wieloekranowych. I tutaj dochodzimy do odpowiedzi na pytanie postawione w tytule tego artykułu. Otóż Angular zbudowany jest bardzo podobnie do znanego wielu programistom wzorca architektonicznego MVC (Model-View-Controller), uważanego przez wielu za pierwowzór wzorców architektonicznych, które wspierają dobre praktyki architektury aplikacji oraz tworzenie czystego projektowo kodu.

Podobnie jak MVC, Angular w wersji 1.0 składa się z kontrolerów, modeli oraz widoków. Oczywiście, podobnie jak budować można aplikację MVC w bardziej złożony sposób (i nawet jest to zalecane), tak samo można rozszerzać aplikację webową napisaną w ramach Angular, np. delegując logikę do route’s, managerów oraz innych plików. Jednak na potrzeby tego artykułu skupię się tylko na tych podstawowych elementach.

Kontrolery

Kontrolerom obecnym w MVC, w Angularze odpowiadają kontrolery napisane w JavaScript, w ramach tzw. modułów. Moduł spina pod sobą kontrolery, serwisy i inne elementy aplikacji. Co istotne, w ramach jednego pakietu nie powinniśmy deklarować zbyt wielu modułów. Osobiście, kiedy tworzyłem pakiet funkcjonalności dotyczący jednego modelu domeny, np. zestaw narzędzi do obsługi wyświetlania danych, ich edycji, prezentacji kilku widoków oraz komunikacji z API aplikacji, to powoływałem do tego celu tylko jeden moduł. Dzięki zastosowaniu modułów, czyli modules w Angularze możemy lepiej i łatwiej zarządzać tzw. Bundlingiem, czyli mechanizmem JavaScript odpowiedzialnym za zarządzanie modułami, pakietami, zasobami oraz ich importem i eksportem.

Modele

AngularJS, podobnie jak MVC, posiada modele odpowiedzialne za logikę aplikacyjną. Dla aplikacji wieloekranowych w Angular rolę modeli w pewnym stopniu spełniają serwisy – jest to oczywiście duże uproszczenie, jeśli nie nadużycie, ale nie powinno to burzyć podejścia do tego tematu. Serwisy, nazywane też inaczej recipes, (co nie najlepiej w tłumaczeniu brzmi po polsku), odgrywają kluczową rolę w logice aplikacji. Mają one też swoje rodzaje i odmiany, ale ja osobiście korzystałem tylko z service recipes, czyli z serwisów, które mogą wykorzystywać inne odmiany recipes, takie jak value recipes oraz factory recipes. W przypadku service recipes istotne jest to, że są oparte na wzorcu Constructor Injection zamiast wzorcu Singleton.

Widoki

Podobnie jak w MVC, czy w innym wzorcu dla aplikacji webowej, używamy widoków odpowiedzialnych za dostarczenie interfejsu użytkownika. W przypadku wzorca MVC bardzo często stosuje się widoki sprzężone ściśle z modelem, typowane przez ten model, co idzie w parze z wykorzystywania silnika Razor. Silnik ten, obecny w ASP.NET MVC od wersji 3.0, pozwala na wstrzykiwanie obiektów natywnych danego języka, jego składni oraz obiektów konkretnych modeli do składni HTML. W przypadku Angulara, widoki w zdecydowanej większości stworzone są za pomocą czystego HTMLa, a za odpowiednik silnika Razor można uznać używane w ramach framework’u dyrektywy, które są swego rodzaju instrukcjami, procedurami wstrzykiwanymi do elementów HTMLa.

Najważniejszymi dyrektywami Angulara są ng-model (przekazywanie obiektów i ich wartości do widoku) oraz ng-repeat (możliwość iterowania obiektów tablic czy list). Będziecie mogli zbudować mnóstwo interfejsów użytkownika wykorzystując tylko te dwie dyrektywy.

Przykład prostej aplikacji w Angular

Poniżej znajduje się przykładowa aplikacja oparta na Angular (bez wykorzystania serwisu). Można zaimportować poniższe fragmenty kodu do poszczególnych template’ów z zakładki Web dostępnych w Visual Studio, w wersji 2017 są to odpowiednio:

  • Dla modułu -> AngularJs Module
  • Dla kontrolera -> AngularJs Controller albo AngularJs Controller using $scope
  • Dla widoku -> standardowy template pliku HTML Page

Moduł:

angular.module(‚angularModule’, []);

 

Kontroler:

angular.module(‚angularModule’).controller(„angularController”, function ($scope) {

   $scope.angularTestObject = „test”;

});

 

Widok:

<!DOCTYPE html>

<html>

<body>

   <div ng-app=”angularModule” ng-controller=”angularController”>

       <p>angularTestObject’s value equals:</p>{{ angularTestObject }}

   </div>

</body>

</html>

Przeczytaj również: Szaleństwo mikroserwisów

 

Autorem wpisu jest:
Igor Trafalski

Programista .NET, aktywnie działający w branży od dwóch lat. Specjalizuje się w technologiach .NET oraz Web Services, a także rozwiązaniach Back-End i Front-End aplikacji webowych. Poza pracą pasjonat brytyjskiego języka angielskiego, miłośnik książek i podróży. Autor bloga nomesscode.

Dodaj komentarz

Komentarze:

Skontaktuj się z nami

Chcesz dowiedzieć się więcej o naszych usługach? Napisz do nas – odpowiemy na każdą wiadomość.

Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma, w celach handlowych.
Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma, w celach marketingowych.
Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma w celach rekrutacyjnych.
Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma na potrzeby przyszłych rekrutacji.
W związku z obowiązującymi przepisami dotyczącymi ochrony danych osobowych tj. Ustawą o ochronie danych osobowych z dnia 10 maja 2018 roku, jak również treścią Rozporządzenia Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (RODO), informujemy, że: 1. Administratorem danych osobowych jest JCommerce Sp. z o.o. z siedzibą w Katowicach, ul. Ściegiennego 3, 40-114 Katowice (KRS: 00007393418).
2. Powyższe dane osobowe przetwarzane będą przez JCommerce Sp. z o.o. – w zależności od udzielonych przez Panią/Pana zgód (podstawa prawna przetwarzania: art. 6 ust. 1 pkt a) RODO):
• w celach handlowych,
• w celach marketingowych.
3. Podanie powyższych danych osobowych nie jest wymogiem ustawowym, umownym lub warunkiem zawarcia umowy. Nie jest Pan/Pani zobowiązany/a do podania powyższych danych osobowych, jednak brak ich podania uniemożliwi realizacje ww. celu.
4. Posiada Pan/ Pani prawo dostępu do treści swoich danych, w tym otrzymania ich kopii i ich sprostowania, usunięcia, ograniczenia przetwarzania, prawo do przenoszenia danych, prawo do sprzeciwu wobec przetwarzania, prawo do cofnięcia zgody w dowolnym momencie, jeśli została udzielona. Wycofanie zgody nie wpływa jednak na zgodność z prawem przetwarzania, którego dokonano na podstawie zgody przed jej wycofaniem; oświadczenie o cofnięciu zgody na przetwarzanie danych osobowych należy złożyć w siedzibie JCommerce Sp. z o.o. lub przesłać na adres mailowy zgody@jcommerce.pl. Cofnięcie zgody na przetwarzanie danych osobowych skutkuje brakiem możliwości realizacji ww. celów przetwarzania;
5. Dane osobowe są udostępniane przez JCommerce Sp. z o.o. upoważnionym pracownikom i osobom współpracującym z JCommerce Sp. z o.o. na podstawie umów cywilnoprawnych, przez których realizowany jest cel przetwarzania;
6. Wszelkie pytania dotyczące ochrony danych osobowych oraz realizacje przysługujących praw, prosimy kierować na adres odo@jcommerce.pl;
7. W zależności od udzielonej zgody, dane osobowe będą przetwarzane przez czas niezbędny do realizacji ww. celów przetwarzania. W przypadku wniesienia sprzeciwu, JCommerce Sp. z o.o. przestanie przetwarzać Pani/Pana dane w ww. celu, chyba że będzie w stanie wykazać, że w stosunku do tych danych istnieją ważne prawnie uzasadnione podstawy, które są nadrzędne wobec Pana/Pani interesów, praw i wolności, lub niezbędne do ewentualnego ustalenia, dochodzenia lub obrony roszczeń;
8. Nie przekazujemy Pani/Pana danych poza teren Europejskiego Obszaru Gospodarczego oraz do organizacji międzynarodowych.
9. Pani/Pana dane osobowe nie podlegają zautomatyzowanemu podejmowaniu decyzji, w tym profilowaniu.
10. Ma Pani/Pan prawo wniesienia skargi do organu nadzorczego gdy uzna Pan/Pani, iż przetwarzanie ww. danych osobowych narusza przepisy ogólnego rozporządzenia o ochronie danych osobowych z dnia 27 kwietnia 2016 r.