Ta lekcja kursu AngularJS: Kurs Podstawowy. dostępna jest również w wersji video. Możesz obejrzeć ją tutaj:
W tym artykule dowiesz się jak wykonać pierwsze kroki w AngularJS – głównie jak zainstalować ten framework w swoim serwisie WWW, aby móc korzystać z jego zalet. Stworzymy także prostą aplikację, która sprawdzi, czy poprawnie zainstalowaliśmy bibliotekę AngularJS. Finalny projekt możesz zobaczyć pod przyciskiem Demo z prawej strony lub pod tym linkiem. Gotowy? Zaczynamy!
Zaciąganie AngularJS lokalnie lub z sieci CDN
Dodawanie frejmworku AngularJS do projektu jest proste. Przebiega w taki sam sposób, jak dodawanie każdej innej biblioteki. Wchodzimy na stronę angularjs.org i mamy na niej kilka możliwości pobrania bibliotek. Najszybciej będzie kliknąć na przycisk Download. Wyświetli się okienko gdzie możemy doprecyzować, jaką wersję AngluarJS chcemy pobrać:
Możemy wybrać, czy ma być wersja stabilna (stable) czy nowsza, ale niekoniecznie stabilna (unstable).
Tak samo możemy wybrać wersję skompresowaną (minified) lub nieskompresowaną. Skompresowana to znaczy skrócona, głównie w celu zmniejszenia rozmiaru pliku. W tej wersji wszystkie zmienne maja krótsze nazwy, nie ma w niej komentarzy itd. Natomiast wersja nieskompresowana posiada to wszystko, a więc pozwala zajrzeć do kodu angulara napisanego przez jego twórców. Możemy także pobrać całą paczkę spakowaną w formacie zip. Mamy także dostępny link do CDN, czyli content delivery network, inaczej „sieci dostarczania treści”. Sieć CDN poprawia szybkość wczytywania strony dla użytkowników – istnieją rozproszone po całym świecie tak zwane punkty dostępowe, a plik ładowany jest użytkownikowi z takiego punktu dostępowego, który jest najbliżej jego lokalizacji. Także zasadniczo CDN ma same zalety, ale jest tez jedna wada. Jeśli planujesz pracować nad projektem lokalnie, bez dostępu do Internetu, wtedy AngularJS nie będzie działał, ponieważ nie bedziesz miał go pobranego lokalnie na swój komputer. Z tego względu ja ściągnę bibliotekę i będę ładował ją do pliku z lokalnego komputera.
Pod sekcją Extras kryją się przeróżne dodatki:
Czasem do swojej aplikacji możesz potrzebować dodatkowych modułów AngularJS, które wzbogacą go o jakieś funkcjonalności. Wtedy znajdziesz je tutaj. Ale wracamy do naszej instalacji. Klikamy Download:
Tworzenie struktury katalogów projektu
Pobrałem bibliotekę na dysk, otwieram wiec mój folder, gdzie zapisuje pobrane pliki z Internetu, a na pulpicie utworzę nowy folder i dam mu nazwę Projekt. Kopiuje pobraną bibliotekę do mojego folderu. Wewnątrz stworzę kolejny folder na moje biblioteki, dam mu nazwę biblioteki. Wchodzę do tego folderu i wewnątrz tworze kolejny folder o nazwie angular. To będzie miejsce na wszystkie pliki angularjs naszego projektu. Wypakowujemy więc tutaj plik angular.min.js który przed chwila pobraliśmy. Tak wygląda struktura folderów aplikacji po powyższych operacjach:
Tworzenie pierwszego kodu aplikacji
Możemy teraz przystąpić do ‚mięsa’ – czyli kodowania. Otwieramy edytor tekstowy – ja akurat używam programu Brackets, ale możesz to robić np. w NotepPad++ lub nawet notatniku – jak komu wygodniej. Przenosimy folder projektu na obszar roboczy na belkę po lewej stronie Brackets, aby mieć całe drzewo katalogów projektu w programie. Następnie tworzymy plik html w glównym folderze Projekt. W Brackets robimy to poprzez kliknięcie prawym przyciskiem i wybranie opcji do tworzenia nowego pliku.
Wpisujemy nazwę index.html. Wpiszmy teraz podstawowy, naprawde podstawowy schemat strony html:
<!doctype html>
<html lang='pl'>
<head>
<meta charset="UTF-8">
<title>Projekt AngularJS</title>
</head>
<body>
</body>
</html>
W tagach tytuł wpisujemy np. Projekt AngularJS.
Dodawanie biblioteki AngularJS
Okej, mamy więc prostą stronę HTML. Aby zmienić ją w aplikację angularJS, musimy najpierw zaciągnąć tę bibliotekę. Zwykle wszelkie biblioteki Javascript dodaje się na dole strony, jednak w przypadku AngularJS warto zrobić to na górze. Dlaczego? Ponieważ angularJS można „miesza” dużo przy tagach html i szablonie layoutu, więc lepiej dodać go na górze, aby załadował się przed tagami html. Wpisuje tag script pod tytulem, następnie atrybut src i tutaj dodaję sciezkę do pliku angularj.min.js:
<script src="biblioteki/angular/angular.min.js"></script>
Jak pamiętamy, skopiowaliśmy go do folderu biblioteki, następnie angular. Ale to nie wszystko, musimy jeszcze wskazać bibliotece angularJS, że ten kod html w tym pliku index.html będzie naszą aplikacją. Robimy to poprzez dodanie atrybutu ngAPP w tagu html, który mamy na początku aplikacji:
<html lang='pl' ng-app>
Z punktu widzenia angularJS ten atrybut nazywa się dyrektywą. AngularJS rozumie dyrektywy jako komendy, które mu wydajemy. Także za każdym razem gdy widzisz słowa „dyrektywa AngularJS”, chodzi o jedno z takich specjalnych poleceń, które wydajemy bibliotece. Dyrektyw jest wiele, wszystkie opisane są w dokumentacji, np. więcej na temat tej dyrektywy ng-app dowiesz się na tej stronie. Wszystkie dyrektywy AngularJS zaczynają się od liter ng oraz myślnika, po którym następuje nazwa danej dyrektywy. Dyrektyw nie musimy używać na całym dokumencie w tagu html, ale możemy ich uzywać również w poszczególnych sekcjach, divach, elementach strony. Dzięki temu łatwo stosuje się AngularJS razem z innymi frameworkami, jak Jquery.
Pierwszy skrypt AngularJS
Teraz sprawdzmy, czy w ogóle zrobiliśmy wszystko poprawnie, czy AngularJS działa jak należy. Dodajmy gdzieś w sekcji body pole input. Dajemy type ‘text’ i teraz najważniejsze – dajemy atrybut ng-model o wartości IMIĘ. Cały kod wygląda w ten sposób:
<!doctype html>
<html lang='pl' ng-app>
<head>
<meta charset="UTF-8">
<title>Projekt AngularJS</title>
<script src="biblioteki/angular/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="Imie"/>
</body>
</html>
Czyli ten atrybut jest dyrektywą AngularJS, za jej pomocą wysyłamy żądanie o znalezienie modelu o nazwie ‘imie’. Teraz poniżej dodajemy nagłówek h2 i wpisujemy w nim tekst: Witaj,, następnie otwieramy i zamykamy podwójne nawiasy klamrowe, w którym wpisujemy słowo imie.
<input type="text" ng-model="Imie"/>
<h2>Witaj {{Imie}}</h2>
W ten sposób dyrektywa ng-model spowoduje połączenie pola input z tym nagłówkiem. Gdy zapiszesz teraz plik index.html i otworzysz go w przeglądarce, następnie wpiszesz swoje imię w pole input, od razu pokaże się ono również w nagłówku poniżej.
Jak działa dyrektywa ng-model
Dyrektywa ng model łączy elementy formularza, takie jak pole tekstowe, pole select czy obszar tekstu textarea z właściwością $scope. Czym jest scope dowiesz się dokładnie w kolejnych lekcjach, ale jak widzisz ta dyrektywa świetnie pokazuje magię angularJS – szybko możemy połączyć jeden element formularza z innym miejscem w szablonie strony czy aplikacji i wyświetlać jego wartości DYNAMICZNIE bez odświeżania strony. Te podwójne kwadratowe nawiasy w nagłówku {{}} w AngularJS określa się elementami szablonu. Głównie służą one do wyświetlania informacji użytkownikom końcowym – w naszym przypadku wyświetlana jest aktualna wartość pola tekstowego powyżej nagłówka – dzięki połączeniu tych dwóch elementów przez dyrektywę ng-model. Podwójne klamry mogą być też wyrażeniami – czyli skomplikowanymi działaniami arytmetycznymi, wyświetlającymi ich wynik. W tym wypadku nasze wyrażenie jest proste – wyświetlenie wartości zmiennej imie.
Łączenie danych w AngularJS czyli data binding
Jeśli znasz Javascript, wiesz ze uzyskanie takiego efektu jaki mamy teraz w naszej aplikacji, (że cokolwiek wpiszę w pole wyświetla się od razu w tagu ‚h2’ poniżej) zajęło by dużo czasu i sporo linijek kodu. Tymczasem AngularJS czyni to szybko i jak widzisz dość efektownie. Takie łączenie elementów szablonu html ze sobą przez dyrektywy i wyrażenia AngularJS nazywa się z angielskiego data bajnding. Czyli łączenie danych. Oznacza że dane w naszym modelu są bezpośrednio połączone z wyrażeniem. I jeśli zmienimy jedno, natychmiast spowoduje to zmianę drugiego.
Mam nadzieję że ten artykuł pomógł Ci „liznąć” AngularJS i pokazał Ci, jak duży drzemie w nim potencjał. Zapewniam Cię, że w miarę zgłębiania tego języka skryptowego, poznasz kolejne nie mniej pasjonujące elementy.