Wprowadzenie do AngularJS

Wprowadzenie

 

AngularJS to framework który głównie służy do tworzenia aplikacji typu Single Page Applications, w skrócie SPA. Polega to na tym że podczas uruchomienia strony, zostają dostarczone wszystkie niezbędne pliki aplikacji, a dane są doczytywane z serwera za pomocą technologii Ajax. Został stworzony przez inżynierów z Google.

Oficjalna strona dokumentacji:

https://angularjs.org/

Przejdźmy teraz krok po kroku proces implementacji frameworka na stronę. W pierwszej kolejności powinniśmy zadbać o to by pobrać pliki źródłowe ze strony dokumentacji.

Następnie kliknąć przycisk download. Domyślne ustawienia w popupie powinny w zupełności wystarczyć:

Następnie pobrane pliki umieszczamy w katalogu projektu, następnie podłączamy za pomocą znacznika script w dokumencie html. Istnieje również możliwość skorzystania z serwera CDN.

 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>

 

Przykładowa struktura aplikacji powinna wyglądać w następujący sposób:

 

<!DOCTYPE html>

<html lang="en" ng-app>

<head>

<meta charset="utf-8">

<title>AngularJS</title>

</head>

<body>

<p>

Przykładowa aplikacja {{'AngularJS' + '!'}}

</p>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>

</body>

</html>

 

Omówmy teraz za co odpowiadają poszczególne linijki kodu.

 

<html ng-app>

 

Atrybut ng-app reprezentuje dyrektywę która nazywa się ngApp. (AngularJS wykorzystuję konwencję kebab-case do zapisywania atrybutów, polega ona na rozdzielaniu wyrazów za pomocą myślnika. Zaś dyrektywa która jest z atrybutem związana nazwa jest już według camelCase, czyli kolejne wyrazy w zmiennej zapisane z dużej litery). Odpowiada za wskazanie znacznika w HTML który zostanie jako główny element aplikacji. Daje to możliwość ustalenia czy framework ma działać w obrębie całego dokumentu, lub konkretnego znacznika.

 

Przykładowa aplikacja {{'AngularJS' + ‚!'}}

 

Ta linijka pokazuje dwie cechy szablonowania:

  • {{ }} - wiązanie, zapisane pomiędzy dwoma nawiasami klamrowymi

  • 'AngularJS' + '!' - wyrażenie użyte w wiązaniu.

Wiązanie mówi AngularJS’owi że powinien wykonać wyrażenie oraz umieścić wynik do drzewka DOM w miejscu wiązania. Jak zobaczymy w następnym kroku, nie jest do jednorazowe umieszczenie, raczej umieszczenie nasłuchiwania na zmiany wartości umieszczone w wiązaniu i w zależności wykrycia zmian nastąpi zaktualizowanie treści która została dodana.

W momencie gdy uruchomimy stronę, powinna zawierać następujący wynik:

Widok i szablon

 

Widok w AngularJS to zaprezentowanie danych pochodzących z modelu w postaci kodu HTML. To znaczy że za każdym razem gdy dane w modelu się zmienią, framework odświeży również wiązania i zaktualizuje dane które które są w nich podpięte z modelu.

Przykład widoku:

 

<div ng-controller=„TestowyController”>

<ul>

<li ng-repeat="element in lista”>

<span>{{element.nazwa}}</span>

<p>{{element.opis}}</p>

</li>

</ul>

</div>

 

W tym widoku zawarliśmy konstrucje ng-repeat, która nawiązuje do modelu, konkretniej do wartości lista i iteruje przez te elementy. Następnie za pomocą wyrażeń w nawiasach klamrowych umieściliśmy poszczególne właściwości elementu.

Dodatkowo wykorzystaliśmy dyrektywę ng-controller, która dowiązuje do konkretnego znacznika odpowiedni kontroler.

 

Model i kontroler

 

Lista elementów obecnie umiejscowiona jest w kontrolerze o nazwie TestowyController. Jest to zwykła funkcja która przyjmuje jako argument wartość $scope.

 

.controller('TestowyController', function TestowyController($scope) {

$scope.lista = [

{

nazwa: 'Element 1',

opis: 'Lorem ipsum dolor sit amet.'

}, {

nazwa: 'Element 2',

opis: 'Lorem ipsum dolor sit amet.'

}, {

nazwa: 'Element 3',

opis: 'Lorem ipsum dolor sit amet.'

}

];

});

 

Mimo że kontroler nie wykonuje zbyt dużo, to i tak spełnia bardzo istotną rolę. Zapewniając kontekst dla naszego modelu danych, kontroler pozwala nam ustanowić powiązanie danych pomiędzy modelem a widokiem. Zrobiliśmy to w następujący sposób:

  • dyrektywa ngController umieszczona w znaczniku div, posiada referencję do kontrolera TestowyController

  • TestowyController dołącza listę do $scope który jest wstrzyknięta do kontrolera. Ten zakres jest prototypowym potomkiem zakresu głównego, który został utworzony po zdefiniowaniu aplikacji. Jest dostępny dla wszystkich powiązań znajdujących się w znaczniku div.

 

Scope

 

Koncept zakresu w AngularJS ma kluczowe znaczenie. Zakres może być postrzegany jako klej, który umożliwia współpracę szablonu, modelu i kontrolera. AngularJS używa zakresów, wraz z informacjami zawartymi w szablonie, modelu danych i kontrolerze, w celu oddzielenia modeli i widoków, ale również w synchronizacji. Wszelkie zmiany wprowadzone do modelu są odzwierciedlane w widoku, wszelkie zmiany, które występują w widoku, są odzwierciedlone w modelu.

 

Komponenty

 

Ponieważ ta kombinacja (szablon + kontroler) jest tak powszechnym i powtarzającym się wzorcem, AngularJS zapewnia łatwy i zwięzły sposób łączenia ich w jednostki wielokrotnego użytku i wyizolowane, zwane komponentami. Ponadto AngularJS utworzy zakres dla każdej instancji naszego komponentu, co oznacza brak prototypowego dziedziczenia i żadne ryzyko, że nasz składnik nie wpłynie na inne części aplikacji lub na odwrót.

Aby utworzyć komponent, używamy metody .component() modułu AngularJS. Musimy podać nazwę komponentu i obiektu definicji komponentu (w skrócie CDO).

Pamiętaj, że (ponieważ komponenty są również dyrektywami), nazwa komponentu jest w camelCase (np. mójNiesamowityKomponent), ale użyjemy kebab-case (np. mój-niesamowity-komponent), kiedy odnosimy się do niego w naszym HTML.

W najprostszej formie CDO będzie zawierał tylko szablon i kontroler. (Możemy faktycznie pominąć kontroler, a AngularJS utworzy dla nas kontrolkę, która jest przydatna dla prostych "prezentacji" komponentów, które nie przywiązują żadnego zachowania do szablonu).

Zobaczmy przykład:

 

angular.

module('app').

component('testowyKomponent', {

template: 'Testowy komponent {{$ctrl.wiadomosc}}!',

controller: function GreetUserController() {

this.wiadomosc = 'Cześć!';

}

});

 

Teraz za każdym razem, gdy uwzględnimy w naszym widoku <testowy-komponent> </testowy-komponent>, to AngularJS wstrzyknie nam kod pochodzący z komponentu, wyświetli wartość z template oraz uruchomi funkcjonalności kontrolera.

Zastanówmy się czym jest zmienna $ctrl i do czego się odnosi.

Dobrą praktyką jest unikanie bezpośredniego korzystania z $scope. Możemy (i powinniśmy) korzystać z naszej instancji kontrolera, czyli przypisywać wartości do this w funkcji a następnie za pomocą zmiennej $ctrl się do nich odwoływać.

Z szablonu możemy odwołać się do instancji kontrolera za pomocą aliasu. W ten sposób kontekst oceny naszych wyrażeń jest jeszcze bardziej wyraźny. Domyślnie komponenty używają $ctrl, ale możemy go zastąpić innym, którym sami zadeklarujemy (za pomocą controllerAs).