AngularJS – czyli JS i HTML na dopalaczach

AngularJS

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... :)

Komentarze 1676:

  • » Marek: 29.06.2013 o 22:12

    Zbyt rzadko nowe wpisy tutaj się pojawiają :)

    Czym różni się data-ng-click od ng-click? Różnie to w przykładach występuje.

  • » procek: 30.06.2013 o 15:42

    Taka mała uwaga do wstępu:
    jQuery pozwala na robienie większości rzeczy OGROMNIE łatwiej niż czysty JS :)

    Nie polecam Angulara do prostych zastosowań -> jakieś galerie na stronach internetowych czy nawet proste formularze lepiej powierzyć jQuery. Ale wszędzie tam gdzie zaczynamy tworzyć APLIKACJĘ webową, wówczas Angular jest nieodzowny - dzięki swojej architekturze nie da się w nim napisać brzydkiego kodu, łatwo robi się refactoring i ogólnie jest słodko :)
    @Marek -> niczym :) data-* daje się dlatego, aby np. NetBeans nie zaznaczał Ci błędów :)

  • » Michał L: 11.07.2013 o 23:41

    O AngularJS już słyszałem, bardzo ciekawy framework, chociaż jeszcze nie miałem projektu, który by do Angulara pasował. Jak zauważył procek, do Angular jest świetny do aplikacji JS. Do prostych rzeczy wystarczy JQuery, którego zawsze można wzbogacić o routing (np. Sammy.js) albo templatki (np. Handlebars) i od razu robi się trochę kulturalniej. :)

  • » Paweł: 02.07.2014 o 04:36

    Bardzo fajnie to wygląda, wszystko bez odświeżania, coś jak Ajax.

    Wiadomo skrypt od Google wiec lipy nie ma.

  • » Motoman: 14.08.2014 o 14:35

    Dyrektywy możemy deklarować na kilka sposobów:
    <div ng-controller="Controller">
    Hello <input ng-model='name'> <hr/>
    <span ng-bind="name"></span> <br/>
    <span ng:bind="name"></span> <br/>
    <span ng_bind="name"></span> <br/>
    <span data-ng-bind="name"></span> <br/>
    <span x-ng-bind="name"></span> <br/>
    </div>

    Jeśli chcesz aby twoja aplikacja byłą zgodna z walidatorami HTML dodaj prefiks "data-".

  • » rade: 27.05.2015 o 23:46

    Asdfda a d

  • » versso: 16.06.2015 o 09:36

    Bardzo fajny wstęp do AngularJS dla początkującyhc

  • » Bartek: 16.09.2016 o 11:25

    Dziękuję, bardzo przydało mi się!

  • » Natalia: 19.10.2016 o 14:49

    Dzięki za świetny wpis, rozjaśnił mi spojrzenie na parę spraw :)

Dodaj komentarz:

Dostępne tagi: [link]http://adres-www[/link] [quote]cytat[/quote] [code]kod[/code] [pre]tekst preformowany[/pre] [b]bold[/b]