Dlaczego programista Back-Endowy
miałby polubić Angulara?

Artykuły eksperckie | 13.06.2018 | Czas czytania: 6 minut

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.

Poszukujesz programisty lub doświadczonego zespołu IT?

 

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, JCommerce

.NET Developer

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.

Komentarze

  • Janko dnia 2018-07-16 08:20:58
    Nie ma czegoś takiego jak "framework architektoniczny MVC". Jest wzorzec architektoniczny/projektowy MVC, który jak się domyślam z Twojego wpisu został zaimplelementowany w Angular 2. To o czym mówisz jako framework mvc, to zapewne mowa o asp.net mvc albo jakaś pokrewna implementacja. Nie mam zamiaru atakować, ale to trochę słabe, że na stronie takiej firmy jak jCommerce pojawiają się wpisy tak mylące pojęcia i z nieusystematyzowaną wiedzą programistyczną.
  • Igor Trafalski dnia 2018-07-16 11:32:26
    @Janko, przejęzyczyłem się, oczywiście chodziło mi o wzorzec architektoniczny, a nie framework. Jeśli chodzi o sam kontekst MVC w moim wpisie, to pokazałem poodobieństwo samej budowy MVC do budowy Angular, głównie w wersji Angular 1.0, choć budowa struktury i logiki aplikacji w Angular 2.0 jest też podobna. Pozdrawiam.
  • Igor Trafalski dnia 2018-07-16 12:05:08
    @Janko Zaktualizowałem artykuł. Pozdrawiam.

Skontaktuj się z nami