Wstęp do AngularJS – Hello World!

AngularJSAngularJS to rozwijana od roku 2009 przez Google biblioteka javascript wdrażająca wzorzec MVC w aplikacjach internetowych. W ostatnim czasie stała się bardzo popularna, dlatego dziś szybki ‚Hello World’ i porównanie z jQuery.

Pobierz dane i wyświetl

Żeby najszybciej zrozumieć ideę biblioteki AngularJS porównajmy ją ze zwykłym HTML, a następnie z jQuery.
Weźmy sobie za cel pobranie wpisanego przez użytkownika imienia i wyświetlenie go.

  1. HTML

    Z wykorzystaniem czystego HTMLa możemy tylko wyświetlić statyczne dane:

    Wynik:

  2. jQuery

    Wykorzystując Javascript możemy dodać obsługę zdarzenia zwolnienia klawisza klawiatury w polu tekstowym i zaktualizować zawartość wybranego elementu.

    Wynik:

  3. AngularJS

    Natomiast w AngularJS tworzymy model dla naszego pola tekstowego; w przykładzie poniżej o nazwie: ‚userName’.

    Wynik:

Angular wyłapuje zmiany w modelach przez porównanie wartości z wartościami zgromadzonymi we wcześniejszym procesie dirty-checking; w przeciwieństwie do Ember.js i Backbone.js, które czekają na zdarzenia zmiany wartości modelu.

Warto sprawdzić spisy treści i przykładowe rozdziały poniższych pozycji:

  1. Angular JS. Profesjonalne techniki

  2. I nowość polskich autorów: AngularJS. Pierwsze kroki

To tylko tyle tytułem wstępu do AngularJS, bo czas wyjeżdżać do pracy 🙂

To również może Cię zainteresować:

  • AngularJS – czysty kod, recenzja kursu wideoAngularJS – czysty kod, recenzja kursu wideo Od czasu gdy poznałem AngularaJS, znacznie bardziej polubiłem rzadko wykonywaną pracę nad frontendem web aplikacji. Mało tego, zaczęło mi to sprawiać przyjemność 🙂 To świetny framework […]
  • JS, ProcessingJS, kurs symulacji, trochę fizyki i matematykiJS, ProcessingJS, kurs symulacji, trochę fizyki i matematyki Dla chcących spróbowania sił w animacji JavaScript i symulacji natury z wykorzystaniem grawitacji czy przyspieszenia, polecam przerobienie darmowego kursu na khanacademy.org. Nie obejdzie […]
  • DayZ – jak pobrać GUID? Generowanie BattlEye GUID.DayZ – jak pobrać GUID? Generowanie BattlEye GUID. Jak pobrać GUID? Na wielu serwerach pracujących pod kontrolą BattlEye w takich grach jak np. cała seria Arma, czy DayZ Standalone stosuje się tzw. white-listy. Czyli aby dołączyć do […]
  • Dwa darmowe źródła wiedzy o JavascriptDwa darmowe źródła wiedzy o Javascript Jeśli nie wiesz jaka jest różnica między: //tym: var myFunction = (function () { console.log('OK'); }); //a tym: var myFunction = (function () […]
  • Game of life w javascriptGame of life w javascript Game of life to jeden z najbardziej znanych przykładów automatu komórkowego wymyślony blisko pół wieku temu. Dzięki kilku prostym regułom, struktury potrafią ewaluować w zaskakujący […]
  • Interaktywne środowisko do poznawania języków programowaniaInteraktywne środowisko do poznawania języków programowania Całkiem przyjemne narzędzie do testowania składni różnych języków programowania w interaktywnym środowisku. Uruchamiasz i piszesz kod bezpośrednio w przeglądarce. W różnych językach. […]

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *