AngularJS #3 – Pierwsza metoda w naszym $scope

AngularJS



W poprzednim wpisie opisywałem zasadę działania dyrektywy ng-controller obejmującej zakres HTML, który otoczony jest przez element, na którym następuje wywołanie owej dyrektywy. Sama wartość dyrektywy wskazuje na kontroler w JavaScript, który odpowiada za jej działanie. W kontrolerze można tworzyć zmienne oraz metody, które dostępne są po stronie HTML.

Zmienna

Najprostszą formą wykorzystania kontrolera jest utworzenie zmiennej, która przypisana jest do $scope. Sam $scope wstrzykiwany jest do kontrolera poprzez argument funkcji. Jako, że jest to element obsługiwany bezpośrednio przez kompilator AngularJS wystarczy, że użyjemy nazwy $scope i tym samym Angular wie, że należy w tym miejscu posłużyć się serwisem $injector do utworzenia nowego $scope, który dziedziczy po $rootScope (dokładny opis znajduje się w oficjalnej dokumentacji AngularJS).

Posłużę się tutaj przykładem z poprzednich wpisów. Tworzymy kontroler APP.ApplicationCtrl (to pełna nazwa, którą używamy po stronie HTML), gdzie zdefiniowana zostaje zmienna name w $scope kontrolera. Następnie jest ona używa w postaci wywołania {{ name }} w HTML w ramach konkretnego div, gdzie zdefiniowany został kontroler ng-controller=”APP.ApplicationCtrl”. $scope jest w tym momencie jakby naszą przestrzenią globalną (dla div), w której widoczne są wszystkie zdefiniowane zmienne lub funkcje / metody. Zamiast więc pisać {{ $scope.name }} wystarczy po prostu {{ name }}.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/snL46/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Metoda

Kolejnym krokiem jest zdefiniowanie w naszym $scope kontrolera – konkretnej funkcjonalności w postaci metody. Metoda ta będzie niczym więcej niż funkcją … przypisaną do zmiennej w $scope. Stworzyłem tym samym w kontrolerze funkcję sayHelloWorld, która pod zmienną $scope.name podstawia nową wartość. W samym HTML dodałem button, w którym to użyłem dyrektywy ng-click i jako jej parametr przekazuję wywołanie funkcji sayHelloWorld(). W tym miejscu nie używam klamer {{ … }} ponieważ przekazują wywołanie funkcji bezpośrednio do dyrektywy ngClick. Tym oto prostym sposobem nasza mini aplikacja otrzymała pierwszą funkcjonalność.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/EGW5w/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dodajmy dwie kolejne funkcje, które zaktualizują wartość zmiennej name. Warto przy tym zauważyć, że nasz widok HTML aktualizuje się automatycznie. Nie wymaga to odświeżania strony, a ilość kodu JavaScript, który musimy napisać także ogranicza się do minimum.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/EGW5w/4/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Przykład tworzenia i użycia

Po bardziej rozbudowany przykład odsyłam (jak zawsze) do kolejnego filmu z http://egghead.io

[youtube_sc url=”https://www.youtube.com/watch?v=Powr9vzqMac”]

AngularJS #2 – ng-controller

AngularJS



Muszę przyznać, że AngularJS uczę się dopiero od dwóch miesięcy. Do tej pory używałem jedynie czystego JavaScript i jQuery. Używałem to dobre określenie, bo daleko mi do prawdziwego web dewelopera. Projekt, w którym mam szczęście uczestniczyć łączy Javowy backend z single app, która pisana jest właśnie w AngularJS. Stąd powstał pomysł na niniejszy “kurs” (to za dużo powiedziane). Dla Was (mam nadzieję) będzie to szansa na poznanie AngularJS, a dla mnie możliwość by nauczyć się go lepiej. Nic tak nie pomaga przyswajać wiedzy jak uczenie innych.

Przyznam się bez bicia, że rozkład jazdy konstruuję na bazie materiałów w sieci (polecam: http://egghead.io/). Poza dzieleniem się własnymi doświadczeniami, mam zamiar przemycać co nieco od dużo bardziej doświadczonych deweloperów, a czasami i samych twórców AngularJS.

Przeczytałem gdzieś, że “AngularJS, to w końcu JavaScript bez bólu”. Dwa miesiące wystarczyły mi by się o tym przekonać i mam nadzieję, że uda mi się Wam to pokazać.

ng-controller

Przepraszam za przydługi wstęp. Przechodzę czym prędzej do tematu dzisiejszego wpisu. W poprzednim była już mowa o $scope i pierwszy kontroler AngularJS.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/snL46/7/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Tworzenie widoku bez separacji HTML, CSS i JavaScript byłoby trudne. Wykorzystanie jedynie podstawowych elementów AngularJS także nie dawałoby nam wiele. Wplecenie w to wszystko własnej logiki biznesowej oraz dodatkowych funkcjonalności byłoby praktycznie niewykonalne bez kontrolerów, które pozwalają tworzyć odpowiednie warstwy ($scope) do zarządzania naszym widokiem.

Z pomocą przychodzi nam dyrektywa (o tym później) ngController, którą udostępnia nam sam AngularJS, a która to odpowiedzialna jest za budowę warstwy MVC (Model – View – Controller). W oficjalnej dokumentacji czytamy:

The ngController directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern.

MVC components in angular:
– Model — The Model is scope properties; scopes are attached to the DOM where scope properties are accessed through bindings.
– View — The template (HTML with data bindings) that is rendered into the View.
– Controller — The ngController directive specifies a Controller class; the class contains business logic behind the application to decorate the scope with functions and values.

Jeżeli czytacie o AngularJS, to z pewnością wiecie też czym jest MVC i nie wymaga to większego komentarza.

Twórcy piszą także o aspekcie wykorzystania kontrolerów w routingu ($route – o tym także będzie potem) i ostrzegają przed często popełnianym błędem, w którym to po zdefiniowaniu kontrolera w naszym configu $route nie ma już potrzeby definiowania kontrolera po stronie HTML w postaci dyrektywy ng-controller. Jeżeli ktoś popełni ową gafę, to jego kontroler zostanie wstrzyknięty dwukrotnie, co na pewno nie jest pożądane.

$scope

Jak większość (wszystkie?) dyrektyw w AngularJS, również ngController tworzy swój własny $scope, czyli przestrzeń, w której widoczne są wszystkie zmienne oraz metody zdefiniowane w kontrolerze, który podany został jako argument dyrektywy. Jest to kolejna warstwa naszej aplikacji. Definiując przykładowo nasz kontroler dla atrybutu <div> w HTML, $scope utworzony zostanie dla wszystkich elementów znajdujących się pomiędzy <div> … </div>. Tym samym wszystkie kontrolery utworzone wewnątrz tej struktury “widzieć” będą metody oraz zmienne utworzone w $scope nadrzędnego kontrolera. W drugą stronę to już tak nie działa. Kontroler nadrzędny nie będzie miał dostępu do logiki utworzonej w swoim kontrolerze-dziecku. Możemy sobie wyobrazić dziedziczenie w statycznie typowanych językach, jednak to nie to samo.

Przykłady

Świetnie oddane zostały przykłady tworzenia prostego kontrolera na oficjalnej stronie dyrektywy: ngController. Nie zrobiłbym tego lepiej, dlatego odsyłam Was właśnie tam (co będę pewnie robił częściej, bo dokumentacja jest naprawdę dobra i ciągle się rozwija / rozrasta). Jeżeli komuś mało, to jest kolejna lekcja poświęcona temu tematowi na http://egghead.io/:

[youtube_sc url=”https://www.youtube.com/watch?v=MEmC0QH8ATQ”]

AngularJS #1 – Wprowadzenie

AngularJS



AngularJS to framework JavaScript stworzony przez inżynierów z Google. Służy on do szybkiego i łatwego budowania aplikacji internetowych, tak zwanych – single app. Model oparty o MVW (Model – View – Whatever) pozwala pogodzić idee JavaScript i modelu MVC. Postaram się to Wam pokazać w kolejnych wpisach.

AngularJS – Superheroic JavaScript MVW Framework

HTML na sterydach

To co wyróżnia AngularJS spośród innych tego typu frameworków, to własny kompilator HTML. Pozwala nam on “nauczyć” naszego HTML nowych sztuczek, zachowań i dodać mu kilka funkcjonalności. W ten sposób jesteśmy w stanie zbudować dynamiczną web aplikację.

Two Way Data-Binding

Najlepszym sposobem na oddanie zasady działania będzie oficjalny schemat:

Two Way Data-Binding

Podwójne bindowanie pozwala na automatyczną synchronizację danych, które mamy po stronie widoku, a naszym kontrolerem / modelem danych po stronie JavaScript.

Ciężko opisać ten mechanizm słowami, dlatego zapraszam do pierwszej lekcji kursu na http://egghead.io/ (polecam!), która pokazuje ten element w działaniu.

[youtube_sc url=”https://www.youtube.com/watch?v=Lx7ycjC8qjE”]

AngularJS $scope

$scope to swego rodzaju obiekt, w którym przechowane są dane tworzone przez kontroler. Dane układane są hierarchicznie. Weźmy za przykład następujący kod HTML:

<div ng-controller="ParentController">
	<h1>{{ title }}<h1>

	<div ng-controller="ChildController">
		<h2>{{ heading }}<h2>
	</div>
</div>

Tym samym mamy dwa div-y. Jeden osadzony w środku drugiego. Za ten zewnętrzny odpowiada kontroler ParentController, który wyglądać może tak:

var ParentController = function ($scope) {
	$scope.title = 'Parent Controller';
};

ChildController w środku prezentuje się następująco:

var ChildController = function ($scope) {
	$scope.heading = 'Child Controller';
};

Oba jako argument funkcji przyjmują zmienną $scope, czyli specjalny obiekt AngularJS, który wstrzykiwany jest do funkcji na etapie kompilacji. O tyle, o ile ChildController w swoim $scope posiada zmienną title z kontrolera ParentController, o tyle ParentController nie ma dostępu do zmiennej heading z ChildControllera ponieważ jest jego kontrolerem nadrzędnym.

O samym $scope można pisać sporo. Jestem pewien, że kolejne wpisy przybliżą ten element frameworka znacznie lepiej.

Dyrektywa?!

Dyrektywa, to właśnie sposób na nauczenie HTML nowych sztuczek. Jedną już poznaliśmy. Mam tutaj na myśli ng-controller, który wygląda jak zwykły atrybut HTML. AngularJS podczas fazy interpretacji kodu HTML rozpoznaje takie elementy i buduje dla nich $scope, w który to wstrzykiwany jest kod odpowiedzialny za obsługę dyrektywy. Tym samym jesteśmy w stanie tworzyć dyrektywy, które mogą być atrybutami istniejących tagów HTML, nazwami klas CSS, nowymi tagami HTML, czy zwykłymi komentarzami. Na początku może to wyglądać na nieco skomplikowane i niepotrzebne, ale zapewniam, że po bliższym poznaniu zrobi się wręcz niezbędnym i ulubionym sposobem na tworzenie logiki biznesowej dla naszego HTML.

Hello {{ name }}!

Czas na pierwszy swoisty przykład działania. Posłużę się w tym celu JSFiddle, w którym to ładuję kod AngularJS, tworzę bardzo prosty HTML i dodaję kontroler ApplicationCtrl, gdzie ustawiam wartość dla zmiennej name. W samym HTML pobieram (binduję) wartość zmiennej {{ name }} ze $scope naszego kontrolera. Ot co, proste Hello World!

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/snL46/7/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Podsumowanie

Rosnąca popularność AngularJS nie jest przypadkiem. AngularJS daje nam możliwość modułowej budowy naszej aplikacji, która testowana może być w równie łatwy sposób, co samo pisanie kodu biznesowego. AngularJS nie trzeba się uczyć od razu w całości. Próg wejścia jest stosunkowo niski, a w miarę rozbudowy naszego projektu / aplikacji możemy poznawać kolejne funkcjonalności i elementy frameworka. Nasza aplikacja otrzymuje tchnienie życia, a my możemy się świetnie bawić pisząc kod JavaScript. Tak, JavaScript.

Zachęcam do nauki i do czytania kolejnych wpisów.

Zend Framework 2.0 w wersji stabilnej – nowa jakość?


Zend Framework 2.0 w wersji stabilnej - nowa jakość?

Dzień nowych wersji frameworków! Informowałem już o wydaniu kolejnej stabilnej wersji frameworka Symfony 2.1.0, a także dzisiaj wydany został jego główny konkurent, a mianowicie Zend Framework 2.0.

Zenda miałem okazję poznać już 3 lata temu. Były to moje pierwsze kroki z obiektowym programowaniem w PHP. Jak to początki, były niezwykle trudne. Wszystko było nowe. OOP, MVC i wiele innych technik, metodologii oraz koncepcji musiałem zrozumieć i dobrze sobie przyswoić. Do czasu pojawienia się Symfony2 był to mój ulubiony, a w zasadzie jedyny framework, który miałem okazję używać w swoich projektach. Na bazie Zenda napisałem nawet swój własny mini framework, który także posłużył mi do kilku projektów, które z powodzeniem działają do dnia dzisiejszego.

Po blisko 2 latach pracy, a 5 latach od wydania pierwszej wersji Zend Framework światło dzienne ujrzała właśnie jego druga wersja. Framework zaprojektowany i zbudowany został zupełnie od nowa. Całość miała być bardziej spójna, lepiej udokumentowana, zwiększająca produktywność i szybkość uruchamiania i działania aplikacji. Jeżeli rzeczywiście się to udało i moje testy to potwierdzą, to Symfony2 w końcu zyska godnego konkurenta.

Nowa wersja to konieczność napisania naszych aplikacji od zera. Nie ma możliwości migracji lub aktualizacji z pierwszej wersji do obecnej. Całości niestety trzeba nauczyć się od nowa.

Zend Framework 2.0 został podzielony na moduły, które są niezależnymi bytami, które tak samo jak w Symfony2 mogą być używane w wielu aplikacjach. Same moduły mogą być pakowane do archiwum phar, przez co jest to podobne rozwiązanie do użycia Composera. Moduł to także niezależna przestrzeń nazw, własne biblioteki, pliki szablonów, CSS, JavaScript, grafika. Budowanie z klocków staje się coraz bardziej powszechne i popularne.

Nowy Zend, to także nowa obsługa żądań (request). Opiera się ona teraz na zasadzie obsługi eventów, do których możemy się podpinać na różnych poziomach obsługi żądania.

PHP DI (dependency injection), czyli to co kocham w Symfony2. Pozwala na wstrzykiwanie zależności, które zastąpiły twarde odwołania.

Sporo zmienia się także w widokach. Akcje zwracać będą teraz obiekt ViewModel, który odpowiadać będzie za odwołanie się do konkretnego pliku szablonu, jego ustawienia oraz przekazanie zmiennych. Mamy tutaj także możliwość znaną z Twiga, który jest domyślnym systemem szablonów w Symfony2, a mianowicie dziedziczenia szablonów, która pozwala na osadzanie jednego szablonu w innym.

Całość jest rzeczywiście niezwykle spójna i dobrze przemyślana.

Pobieżnie przebrnąłem przez nową dokumentację, która opisuje jak korzystać z różnych standardowych komponentow, takich jak: Zend_Form, Zend_cache itd. Stworzony został także podręcznik, który demonstruje cały cykl tworzenia aplikacji w ZF2. Mamy tutaj do dyspozycji także przypadki użycia poszczególnych metod i zależności między komponentami. Ujednolicone zostały inferfejsy w całym obszarze Zend Framework 2.0, a także ustandaryzowane mechanizmy konfiguracji, za które odpowiada oddzielny komponent.

Zend Framework 2.0 to także praktyczny brak singletonów, które nie pozwalały, a w najmniejszym stopniu komplikowały rozszerzanie lub zmianę funkcjonalności. Komponenty możemy konfigurować pod względem tego, czy pozwalają one na rozszerzalność i współprace z innymi modułami.

Deweloperzy projektu postawili sobie za cel poprawę wydajności rzędu 200 do 300%. Czy im się to udało? Z pewnością będę się mógł przekonać już niedługo.

Nie miałem na razie czasu by poznać ZF2 lepiej, ale myślę, że zmieni się to już niedługo. Mam jednak nadzieję, że twórcy dobrze wykonali swoją pracę i odpowiednio wykorzystali czas poświęcony na budowę nowej wersji. Jeżeli macie już jakieś doświadczenia z ZF2, to oczywiście dajcie znać w komentarzach.


[1], [2]

Roundup #3 – WP-Flex, BrandColors, Derby MVC, trunk8, DbNinja

Roundup #3 - WP-Flex, BrandColors, Derby MVC, trunk8, DbNinja

WP-Flex

W ostatnim czasie pojawia się sporo tego typu szablonów do WordPressa. Mam tutaj na myśli możliwość dopasowywania się do aktualnego rozmiaru okna przeglądarki, poprzez wykorzystanie techniki “responsive design”. Jest to naprawdę bardzo przyjemna droga do prezentacji treści we właściwy sposób na urządzeniach mobilnych oraz desktopach.

WP-Flex – A blank and responsive boilerplate for WordPress


BrandColors

Jest to tak naprawdę katalog, który w swojej pracy docenią szczególnie osoby, które projektują grafikę. Kolekcja zawiera bowiem dokładne dane odnośnie kolorystyki używanej przez wiodące marki i serwisy na rynku.

BrandColors – A Gallery Of Major Brand Color Codes To Get Inspired


Derby MVC

Nie mylić z bazą danych o takiej samej nazwie! Derby MVC to lekki framework oparty o wzorzec MVC i Node.js, który pozwala na budowanie aplikacji działających w czasie rzeczywistym. Interakcja pomiędzy użytkownikami przebiega natychmiastowo, więc możliwe jest tworzenie na przykład narzędzi do pracy nad projektami bezpośrednio w przeglądarce. Myślę też, że tego typu frameworki to przyszłość jeśli chodzi o aplikacje w przeglądarce. Wszystko za sprawą mechanizmów push, które są w stanie wysyłać informacje od serwera do klienta i dynamiczne odświeżanie widoku.

Build Realtime & Collaborative Apps with Derby MVC


trunk8

Jest to rozszerzenie do biblioteki jQuery, a które pozwala – jak sama nazwa wskazuje – na manipulację długością wyświetlanego tekstu. Proste i wygodne w obsłudze narzędzie, które pozwoli zaoszczędzić nieco czasu podczas tworzenia podobnej funkcjonalności na naszej stronie.

trunk8 – A text truncation extension to jQuery


DbNinja

Jest to odpowiednik znanego pewnie wszystkim phpMyAdmin. DbNinja napisane zostało przy użyciu PHP i służy do administracji bazą danych MySQL bezpośrednio z okna przeglądarki. Całość prezentuje się bardzo dobrze i wygląda nieco na odświeżoną wersję wspomnianego phpMyAdmin. Przypomina trochę aplikację na PC, niżeli klienta webowego. Sam używam desktopowego narzędzia jakim jest HeidiSQL – polecam! Naprawdę bardzo ułatwia i przyspiesza pracę.

DbNinja – Web-Based MySQL Manager App With A Desktop-Like Interface


[1], [2], [3], [4], [5]