AngularJS dla początkujących część 1 – „witaj świecie” w Angular

Artykuł ‚AngularJS dla początkujących’ wypadałoby zacząć napisaniem paru zdań o tym czym jest Angular. Następnie akapit albo dwa, dlaczego jest tak wspaniały i często wykorzystywany. Główną część wpisu powinienem poświęcić opisowi architektury MVW, tłumaczeniem czym są modele a czym kontrolery i jak dobrze ze sobą działają. Na koniec parę linijek kodu i wpis gotowy 🙂 Nie pójdę dziś tą drogą. Nie dlatego, że są to rzeczy nieważne. Są bardzo ważne, ale zostały już napisane wiele razy. Ja skupie się na tym co lubię najbardziej, czyli przejdę prosto do przykładów. To pierwszy wpis z serio dwóch lub trzech. Po ich lekturze, będziesz w stanie sam, ze zrozumieniem stworzyć prostą aplikację używając frameworka Angular JS.

Napiszę tylko odpowiedź na pytanie, „dlaczego Angular?” Jest to bardzo popularny framework. Tak popularny, że niezależnie od naszych odczuć względem niego, każdy front-endowiec powinien zapoznać się z obecną wersją. Nawet pomimo tego, że druga wersja angulara nadchodzi wielkimi krokami. W świecie jest po prostu bardzo dużo kodu napisanego w Angular 1.x i prędzej czy później trafimy na niego. Dobrze być na to przygotowanym.

Dziś zaprezentuje podstawowe opcje, oraz strukturę aplikacji AngularJS. Zrobię to na klasycznym przykładzie „Witaj Świecie”. Aby przykłady działały, wymagane jest uruchomienie ich na serwerze. Można stworzyć lokalny serwer instalując np. nodejs lub bardziej klasyczny stack WAMP (lub LAMP lub XAMP jeśli nie używasz windowsa :P). W googlu bardzo łatwo znaleźć informacje jak postawić taki serwer. Będzie również potrzebny kod Angulara, pobrać go można z oficjalnej strony. Zapisuję go w dokumencie lib, który z kolei umieszczam w katalogu projektowym. Kolejny krok to stworzenie pliku HTML. Oto jego treść:

Uruchomienie pliku przez serwer powinno dać taki efekt:

Jeżeli tak wygląda Twoja strona, to znaczy, że wszystko działa jak należy. Gdy wpisuję coś w okienko tekstowe, Angular automatycznie uzupełnia treść nagłówka poniżej! A wszystko to bez choćby jednej linijki kodu JS. Myślę, że to wystarczy aby zachęcić sceptyków 🙂 Czas przyjrzeć się bliżej treści pliku. Oprócz dodania Angulara w elemencie script, znajduje się tu jeszcze parę niestandardowych ciekawostek. Zacznę od dziwnego atrybutu przy elemencie HTML data-ng-app. Ten atrybut daje angularowi znać, że to jest miejsce, w którym nasza aplikacja będzie działała. ng-app można dodać do dowolnego elementu HTML, ale ja chcę aby aplikacja obejmowała całą stronę, dlatego przypisuje ten atrybut do atrybutu HTML. Wartość tego atrybutu to nazwa modułu, z którego ma korzystać Angular. O tym za moment.

Kolejny angularowy atrybut – data-ng-model dodałem do elementu input. Ten atrubut łączy wartość okienka tekstowego z wartością w modelu. Klucz tej wartość to identyfikator przypisany do ng-model czyli userName. Dodaję go do nagłówka, używając podwójnych nawiasów klamrowych, notacji typowej dla angulara, służącej do przypisywania wartości modelu. Gdy wartości są tak połączone, zawsze automatycznie są aktualizowane, jeśli któraś się zmieni. Zadziwiające 🙂

Mimo zachwytów, ciężko w obecnym stanie nazwać to aplikacją. Zmieniłem trochę treść dokumentu:

Teraz zaczyna to już przypominać zalążek aplikacji Angular :). Pojawił się kod JavaScript w nowym tagu script. Pierwsza rzecz, którą robię w tym skrypcie jest zadeklarowanie modułu aplikacji. Aby to zrobić używam metody obiektu angular o dość nazwie module. Metoda ta przyjmuje dwa parametry. Pierwszy z nich to łańcuch znaków, który będzie nazwą tego modułu (to ta nazwa będzie wykorzystywana w HTMLu przy atrybucie ng-app). Drugi parametr to tablica, która przechowuje zależności potrzebne w module. W tej chwili nie będę wykorzystywał żadnych dodatków, więc tablica jest pusta.

Następnie deklaruję drugą zmienną o wymownej nazwie model. Będzie ona zawierać dane aplikacji, w tej chwili jest to łańcuch znaków. W końcu przychodzi czas na kontroler do mojego modułu. Kontrolery to bardzo ważna część aplikacji Angular. Zawierają logikę łączącą dane z widokiem, czyli HTMLem. Najczęściej są to po prostu zwykłe javascriptowe funkcje. Kontroler przyjmuje dwa parametry, pierwszy to jego nazwa a drugi to funkcja zawierająca treść kontrolera. Ta funkcja sama przyjmuje parametr, bardzo ważną zmienną ‚angularową’ – $scope. Scope to tak jakby pomost pomiędzy widokiem a kontrolerem. Do scope’a będę przypisywał wszystkie elementy kontrolera Jego pola i metody że będą automatycznie dostępne w kodzie HTML.

W kontrolerze tworzę pole Scopea greeting do której przypisuję wartość zmiennej model Dodaję również oraz przywitaj, która po wywołaniu pokazuje alert, którego treścią jest wartość zmiennej greeting.

Przejdę do HTML. Aby controller działał, należy wskazać go w elemencie, na który ma wpływać. Robię to za pomocą atrybutu ng-controller. Wartośc tego atrybutu to nazwa kontrolera. Dzięki w tym elemencie mogę wykorzystywać pola i metody scope’a danego kontrolera 🙂 Widać to w nagłówku, zamiast wpisywania tekstu wstawiam wartość pola greeting wykorzystując notację podwójnych nawiasów klamrowych.

Dodaje też przycisk, który zawiera nowy atrubut ng-click. Jako wartość przyjmuje on nazwę metody scope’a. Metoda ta zostanie wywołana po kliknięciu w przycisk. W tym wypadku będzie to metoda przywitaj. Szybki test w przeglądarce i wszystko działa jak należy 🙂

Aplikacja ‚witaj świecie’ zaczyna nabierać rumieńców, ale jeszcze sporo można do niej dodać. Wprowadzam do kodu następujące zmiany:

Ok zacznę od kontrolera. Mam teraz dwa pola, pierwsze to tablica miasta zawierająca parę łańcuchów znaków reprezentujących wybrane miasta świata. Jak mam witać cały świat, to cały świat :). Drugie pole to newMiasto, obecnie jest puste, będzie służyć do dodania nowego miasta to listy, w razie jakbym kogoś ważnego nie uwzględnił, może dodać się sam 😛

W kontrolerze znajdują się też dwie metody dodaj oraz usuń. Obie jako argument, przyjmują łańcuch znaków, nazwę miasta. usuń znajduję odpowiednie miasto w tablicy miast i usuwa je, natomiast dodaj dodaje do tablicy nowe miasto.

W samym HTMLu, też jest parę nowości. Na początek wstawiam dwa elementy input. Pierwszy to pole tekstowe, połączone atrybutem ng-model ze zmienną scope’a newMiasto (w ten sposób łącząc te wartości, dzięki angularowej magii). Drugi to przycisk, który po kliknięciu wywołuje metodę dodaj. W ten sposób to co wpiszę do okienka tekstowego, pojawi się automatycznie (!) w tabelce poniżej po kliknięciu przycisku.

Własnie w tabelce dzieją się prawdziwe czary. Element table zawiera tylko jeden element tr. Przypisałem mu on atrybut ng-repeat. Ten atrybut powoduje przejście pętlą przez każdy element kolekcji podanej jako wartość, podobnie do pętli for in. Każde przejście tworzy nowy element tr i wypełnia go taką zawartością jaka została przyłączona ze scope’a. w tym wypadku podaje tekst ‚Witaj’ plus nazwa miasta w tablicy oraz przycisk który po kliknięciu usuwa dane miasto z listy. Co najlepsze wszystko jest aktualizowane automatycznie! To wszystko zaledwie w 40 linijkach kodu 🙂 A to dopiero początek.

Na dziś wystarczy. Jeżeli to Twoje pierwsze spotkanie z Angularem, nie wszystko pewnie jest jeszcze jasne, warto doczytać teorię w internecie, chociaż osobiście uważam, że nic nie da Ci tyle co zabawa z powyższymi przykładami. W kolejnych postach przedstawię więcej, bardziej życiowych przykładów.

Jeżeli podobał Ci się ten artykuł, wejdź na moją stronę Facebookową. Polubienie jej gwarantuje że będziesz na bieżąco ze wszystkimi nowościami z bloga 🙂