AngularJS – czyli JS i HTML na dopalaczach

Pamiętam swoje pierwsze spotkanie z jQuery – nie wiem kiedy to było, ale wyglądało to tak: zobaczyłem, a po chwili już używałem. Tak samo było z Angularem.

Co dało nam jQuery? Przede wszystkim wygodę, bo w kilku liniach można wykonać coś, co w czystym JavaScripcie wymaga już odrobinę więcej wysiłku. Podobnie dzięki AngularJS można podejść do aplikacji webowych nieco inaczej – tworząc je szybciej i wygodniej. Dodatkowo taką aplikację webową można stworzyć po prostu dobrze dzięki łatwiejszej organizacji kodu.

Pomiędzy akapitami...

Większość z Was korzysta z Google Readera, który już w poniedziałek przestanie działać - najwyższa pora aby znaleźć inne rozwiązanie dla siebie i zasubskrybować bloga raz jeszcze - ja używam teraz Feedly, serwis ten jest OK, polecam :)

Czym jest AngularJS?

AngularJS to JavaScriptowy framework stworzony przez Google, przeznaczony do szybkiego i łatwego budowania aplikacji internetowych. Całość oparta o MVW (Model View Whatever). Pojęcia takie jak JS i MVC (oraz podobne) nie muszą odstraszać, co za chwilę zobaczymy.

Dlaczego AngularJS a nie Backbone.js, Knockout, … ?

AngularJS jest łatwy do przyswojenia. Moim zdaniem jest on najlepszym rozwiązaniem na start, dla osoby dla której coś zbliżonego do MVC w JS to jeszcze abstrakcja. Angulara nie trzeba rozumieć w całości, aby zacząć coś w nim tworzyć – można go poznawać stopniowo, bezboleśnie.

HTML i JS – to zaczyna żyć, czyli "Two Way Data-Binding"

Zacznijmy od konkretnego, prostego przykładu. Mamy zmienną myVar – pojawia się ona zarówno w widoku HTML jak i w przykładowym kontrolerze.
Zmieniamy zawartość pola tekstowego – automatycznie mamy nową wartość zmiennej dostępną po 'obu stronach'. To samo dzieje się, gdy zmienimy wartość zmiennej z poziomu JavaScriptu – to jest właśnie "Two Way Data-Binding", który odgrywa w Angularze ważną rolę.

Ten obrazek podsumowuje całość.

Teraz popatrzmy na ten przykład - tu mamy coś nieco bardziej złożonego.Widok "sam reaguje" na to, co dzieje się z danymi w modelu. W drugą stronę działa to tak samo prosto.

Kodu tutaj nie ma dużo. Pomyślmy teraz nad czymś 10, lub 100 razy większym – w AngularJS skalowanie nie jest problemem.

HTML na dopalaczach

Zestaw dyrektyw, które możemy sami rozszerzać pozwala na sporo. W łatwy sposób stworzymy pętlę która odwzoruje nam dowolny obiekt w widoku (co widzieliśmy już wyżej). Do tego bez ani jednej dodatkowej linii kodu JS dodamy możliwość sortowania i filtrowania.

NgSwitch, ngShow, ngHide ułatwią nam sterowanie fragmentami widoków. NgClass zadba o to, aby dany obiekt DOM posiadał odpowiednią klasę – oczywiście automatycznie reagując na zmiany w modelu.Do tego dochodzą jeszcze filtry, które też potrafią się przydać (format daty, itd).

Więcej ciekawostek w dokumentacji, także o formularzach przy których walidacja z AngularJS jest zwyczajnie prosta.

JS na dopalaczach

Zabawa nie kończy się na dyrektywach. W AngularJS w prosty sposób opanujemy routing – czytamy adres URL w przeglądarce i na jego podstawie uruchamiamy odpowiedni fragment naszej aplikacji, przekazując przy tym oczywiście parametry.

Services, promises, dependency injection,... - w AngularJS jest co odkrywać, więcej już za chwilę.

Testowanie, testowanie, testowanie...

W AngularJs łatwo jest rozbudowywać aplikację o kolejne moduły, kod nie zapadnie się w pewnym momencie pod własnym ciężarem. Rozwój całości będzie jeszcze łatwiejszy, gdy dodamy do całości testowanie – cały framework powstał z myślą o ciągłych testach.

Teraz konkrety

Ten jeden link wystarczy: https://github.com/jmcunningham/AngularJS-Learning – kompletna baza wiedzy o AngularJS.

Jeśli ktoś potrafił opanować jQuery, to opanuje także Angulara, dzięki podejściu: "JavaScript nie musi być trudny". Problemem na początku może być to, że "myślenie w stylu jQuery" trzeba odstawić na bok, co jednak wadą nie jest po kilku chwilach.

Zachęcam do testów i zbudowania swojej pierwszej aplikacji – może być to i zwykła lista zadań wzorowana przykładem który wcześniej się pojawił. A jak to już się uda, to wiadomo: webserwisy, routing i cała reszta – wtedy zabawa z Angularem dopiero się rozkręca... :)