Krótki opis AngularJS

AngularJS powstał kilka lat temu jako biblioteka Javascript, chociaż sami twórcy używają w stosunku do niego określenia framework, a nawet superheroiczny framework. Zamiast rozwodzić się nad słówkami, podsumujmy po prostu kilka faktów o AngularJS.

czym-jest-angular-js-kurs

Czy AngularJS to framework?

AngularJS ma kilka cech, które rzeczywiście pozwalają nazywać go frameworkiem. Konkretnie frameworkiem Javascript. Jakie to cechy? Narzuca programistom pewne schematy, które muszą przyjąć przy organizowaniu struktury swoich aplikacji i generalnie przy kodowaniu. Aby to ułatwić, AngularJS oferuje gotowe, zdefiniowane już instrukcje, a także całe moduły, które możemy wykorzystywać w naszych aplikacjach. Dotyczą one np. tworzenia szablonów i layoutów, filtrowania danych, czy też ich dynamicznego ‚doczepiania’, znanego pod terminem ‚data binding’. Jeśli miałeś styczność z jakimiś frameworkami (niekoniecznie Javascript), z pewnością rozumiesz, że takie właściwości pozwalają określać tym terminem również Angulara. Jeśli przyjmiemy ten narzucony przez framework styl tworzenia kodu, będziemy korzystać z oferowanych przez niego w tej materii rozwiązań, najczęściej otrzymamy w zamian wygodę, komfort, upłynnienie procesu tworzenia aplikacji itp.

AngularJS i aplikacje SPA

Kolejnym znanym faktem o AngularJS jest jego wsparcie do tworzenia aplikacji działających w obrębie jednej, pojedynczej strony – z ang. Single Page Applications. Oznacza to, ze bez względu na to jak zaawansowaną aplikację napiszemy, wystarczy otworzyć ją w przeglądarce internetowej tylko raz, później nie musi się nic przeładowywać ani przekierowywać na inne strony – przez cały czas korzystania z aplikacji użytkownik pozostaje na tej jednej stronie. Oczywiście to nie oznacza, że aplikacje tworzone w AngularJS są jakoś ograniczone. Jak najbardziej w obrębie tej jednej strony, za pomocą routingu możemy wyświetlać zróżnicowaną zawartość tak, że odbiorca końcowy ma wrażenie, że przechodzą do różnych części aplikacji, ale technicznie będą cały czas pozostawać w obrębie jednej strony. Zaletą Single Page Applications jest niewątpliwie prędkość wczytywania danych i ogólna szybkość działania aplikacji, ponieważ nie musimy przeładowywać stron, a wyświetlamy tylko taką zawartość, jaka w danej chwili jest nam potrzebna.

AngularJS to javascript

I wreszcie trzecia cecha charakterystyczna AngularJS, o której wspomniałem już we wstępie – opiera się na Javascript. Jeśli masz doświadczenie z pisaniem skryptów w tym języku, opanowanie AngularjS powinno być dla Ciebie dużo łatwiejsze. Zanim weźmiemy się za AngularJS, warto poznać najpierw przynajmniej podstawy javascript.

Jak zainstalować AngularJS i odpalić pierwszy skrypt

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ć:

sciagnac-angularjs

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:

angularjs-moduly

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:

pobieranie-bibliotek--angularjs

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:

angularjs-kurs

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.

instalacja-angularjs

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-zainstalowac-angualrjs

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.

AngularJS: Kurs Podstawowy

Postaw pierwsze kroki w AngularJS – nowoczesnym frameworku prosto do Google, ukierunkowanym na budowanie szybkich aplikacji działających natychmiastowo – bez odświeżania strony. AngularJS: Kurs Podstawowy pozwala Ci stworzyć pierwszą aplikację z wykorzystaniem potężnej cechy tego frameworka – zmieniania zawartości strony bez konieczności jej przeładowywania.

Oglądając lekcje tego kursu poznajesz mechanizmy AngularJS, a autor przy okazji rozwijania aplikacji wyjaśnia teorię – schemat działania architektury MVC i jak AngularJS wykorzystuje podział model – views – controller, czym są pliki JSON i jak dynamicznie zaciągać z nich dane do aplikacji. Po ukończeniu kursu AngularJS: Kurs Podstawowy będziesz potrafił stworzyć aplikację wyświetlającą albumy muzyczne z wykorzystaniem dynamicznych filtrów, sortowania oraz wyszukiwarki.

  • Czym jest AngularJS i jak działa
  • Działanie architektury MVC w AngularJS
  • Odczytywanie danych z pliku JSON
  • Wykorzystanie usługi $http
  • Powiązywanie danych (data binding)
  • Dynamiczne wyszukiwanie obiektów w bazie bez odświeżania strony
  • Filtrowanie, sortowanie elementów listy bez odświeżania strony

Tutorial AngularJS: tworzymy pierwszą aplikację

Zaczynamy budowę naszej aplikacji w AngularJS zupełnie od zera. Na początek więc stwórzmy prostą stronę HTML, do której później dołączymy biblioteki AngularJS. Otwórz więc swój ulubiony edytor tekstowy i wpisz następujący kod, a następnie zapisz jako plik HTML:

<!DOCTYPE html>
  <head>
   <meta charset=”UTF-8”>
   <title>Kurs AngularJS</title>
  </head>
  <body>
  </body>
</html>

Jako, że mamy już pusty dokument HTML, który stanowi bazę dla naszej aplikacji, czas podłączyć pod niego framework AngularJS. Wchodzimy na stronę https://angularjs.org/ i klikamy DOWNLOAD. Kopiujemy link z okienka w polu CDN (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js) i dołączamy go jako zewnętrzny skrypt do naszej strony w części<head></head>.

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8”>
    <title>Kurs AngularJS</title>
    <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script>
</head>
<body>
</body>
</html>

Okej, teraz możemy już zacząć używać AngularJS na naszej stronie. Najpierw musimy jednak wyraźnie zaznaczyć, w którym miejscu będziemy używać tego frameworka. Robimy to poprzez dodanie zbiorczego bloku div i nadajemy mu atrybut ng-app. Ten atrybut jest tzw. dyrektywą AngularJS. W dalszej części naszej aplikacji zobaczysz inne atrybuty zaczynające się od ng-, one wszystkie są dyrektywami, czyli niejako poleceniami AngularJS. Dyrektywa ng-app mówi, że będziemy w tym miejscu korzystać z kodu AngularJS. Opcjonalnie możemy podać jej wartośc, która będzie nazwą aplikacji – jest to przydatne szczególnie w zaawansowanych projektach. Ja użyłem „PremierySeriali”. Od razu dodałem też klasę „container”, która przyda nam się później, gdy do naszej aplikacji podłączymy Bootstrapa.

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8”>
    <title>Kurs AngularJS</title>
    <script type=”text/javascript” src=” https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script>
</head>
<body>
    <div class="container" ng-app=’PremierySeriali’>
    </div>
</body>
</html>

No dobra, mamy już stronę przygotowaną pod naszą aplikację „PremierySeriali”. Ale gdzie właściwie znajduje się ta aplikacja? No właśnie, musimy ją stworzyć! Otwieramy ulubiony edytor tekstowy i tworzymy nowy plik aplikacja.js. W środku wpisujemy kod:

var apka = angular.module('PremierySeriali',[]);

I zapisujemy plik. Pamiętaj, aby plik aplikacja.js zapisać w tym samym folderze, co plik html. Powyzszy kod tworzy moduł angular, który będzie zawierał naszą aplikację. Ma taki sam tytuł, jak użylismy w pliku html (PremierySeriali) i przypisuje go do nowej zmiennej apka. Moduły, jak pewnie się domyślasz, pozwalają dzielić naszą aplikację na części, a każda część zajmuje się np. inną funkcjonalnością. Do potrzeb tego tutoriala wystarczy nam jeden moduł.

Zanim przystąpimy do kolejnego kroku, warto nadmienić, ze AngularJS jest frameworkiem działajacym w oparciu o architekturę MVC, czyli Model – View – Controller. Czym jest każda z tych części? Najłatwiej myśleć o Modelu jako o zestawie danych – większość dynamicznych aplikacji webowych opiera się właśnie na danych. W AngularJS możemy oczywiście sami rozpisać nasze dane w pliku, ale najczęściej wykorzystuje się połączenia z istniejącymi bazami danych lub plikami JSON. Dane wyświetlamy użytkownikom za pomocą kolejnej części architektury MVC, mianowicie View. Można porównać View (widok) do szablonu dla wyświetlanych danych. W AngularJS tworzymy widoki informacji (Views) poprzez umieszczanie podwójnych nawiasów klamrowych {{}} w kodzie HTML. Ostatnią częścią architektury są Kontrolery, które stanowią pomost między modelem a widokiem. Kontroler pozwala wzbogacić zestaw danych w modelu o jakieś funkcjonalności. Tworzymy więc kolejny plik, w którym umieścimy kontroler, którego będziemy używać do przeprowadzania operacji na danych:

apka.controller("MojController", function($scope,$http){
});

Nazwijmy ten plik kontroler.js I również umieśćmy w folderze z naszą aplikacją. Powyższy plik przypisuje kontroler MojController do aplikacji „apka”. Zamiast tworzyć oddzielny plik .js na kontroler, mogliśmy umieścić wszystko w jednym pliku, ale myślę, że powinniśmy pielęgnować troskę o czytelność kodu, bez względu czy to tutorial czy oficjalna aplikacja. Zatem połączmy dwa stworzone właśnie pliki, aplikacja.js oraz kontroler.js z plikiem html, a utworzony kontroler dodajmy do naszego elementu div#container za pomocą dyrektywyng-controller:

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8”>
    <title>Kurs AngularJS</title>
    <script type=”text/javascript” src=” https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script>
    <script src="aplikacja.js" type="text/javascript"></script> <!-- aplikacja angularJS -->
<script src="kontroler.js" type="text/javascript"></script> <!-- glowny controller przypisany do aplikacji AngularJS -->
</head>
<body>
    <div class="container" ng-app=’PremierySeriali’ ng-controller='MojController'>
    </div>
</body>
</html>

Teraz możemy już korzystać z kontrolera w naszej aplikacji, a konkretnie w elemencie div #container. Sprawdźmy, czy to działa. W pliku kontroler.js, być może zauważyłeś, gdy tworzyliśmy kontroler, od razy stworzyliśmy funkcję $scope. Utwórzmy przykładową zmienną w tej funkcji:

apka.controller("MojController", function($scope,$http){
    $scope.mojtekst = "Witaj w mojej aplikacji AngularJS!";
});

i spróbujmy się do niej odwołać w naszym pliku html przy pomocy nawiasów klamrowych:

...
<div class="container" ng-app=’PremierySeriali’ ng-controller='MojController'>
    {{mojtekst}}
</div>
...

Jeśli wszystko zrobiliśmy, jak trzeba, przeglądarka powinna wyrenderować tekst:

kurs-angularjs-tutorial Wszystko gra, a więc możemy przystąpić do kolejnego kroku.

Zaciągamy dane do aplikacji

Okej, jak wspomniałem na wstępie, nasza aplikacja będzie wyświetlała nowości serialowe. Potrzebujemy więc danych o tych serialach. Skorzystamy z API serwisu www.themoviedb.org. Aby korzystać z API, potrzebny nam jest klucz. Aby otrzymać klucz API, należy założyć (darmowe) konto na stronie themoviedb.org i wejść do zakładki API.

Klucz jest nam potrzebny, aby nie tracić czasu na ręczne tworzenie bazy danych po stronie naszego serwera, a także aby bazować na rzetelnych informacjach z serwisu, który na co dzień zajmuje się kinematografią. W ten sposób możemy założyć, że nasza aplikacja po ukończeniu będzie rzeczywiście użyteczna.

Po zdobyciu klucza do API, dodajemy go do naszego kontrolera. Wchodzimy do pliku kontroler.js i usuwamy poprzednią zadeklarowaną zmienną mojetekst, na jej miejsce tworzymy nową, która przechowywać będzie nasz klucz API:

apka.controller("MojController", function($scope,$http){
    $scope.kluczApi = "...";  // wstaw swój klucz api - np. d9eb45644e9.....
});

Lektura dokumentacji API serwisu themoviedb.org dostarcza nam informacji, jak stworzyć odwołanie, które prześle nam dane potrzebne do naszej aplikacji. Chodzi mianowicie o odwołanie ‘ first_air_date.gte‘, które pozwoli nam otrzymać seriale, które pierwszy raz pojawiły się w telewizji po wpisanej przez nas dacie. API oczekuje daty w formacie YYYY-MM-DD. Nasza aplikacja ma wyświetlać nowości, które pojawiły się w telewizji w tym miesiącu, musimy więc jeszcze określić, jaki dzisiaj jest miesiąc.

var dzisiaj = new Date();
var miesiac = dzisiaj.getFullYear() + “-“ + (“0” + (dzisiaj.getMonth() + 1)).slice(-2) + “-“ + (“0” + dzisiaj.getDate()).slice(-2);

W powyższym kodzie najpierw pobieramy dzisiejszą datę za pomocą JavaScriptowej funkcji ‘Date()‘, następnie wykorzystujemy ją w odpowiedni sposób w zmiennej ‘var miesiąc‘ aby uzyskać datę w wymaganym formacie.

Następnie wykorzystujemy tę zmienną do odwołania się do API za pomocą ‘$http.jsonp‘:

$http.jsonp("https://api.themoviedb.org/3/discover/tv?first_air_date.gte=" + miesiac + "&sort_by=popularity.desc&api_key=’+kluczApi+’&callback=JSON_CALLBACK").success(function(data) {

})

Ubieramy wszystko w funkcję ‘glowna‘ i w efekcie nasz plik ‘kontroler.js‘ powinien wyglądać tak:

apka.controller(„MojController”, function($scope,$http){
    $scope.kluczApi = „...”;  // wstaw swój klucz api - np. d9eb45644e9.....
    $scope.glowna = function() {
        var dzisiaj = new Date();
        var miesiac = dzisiaj.getFullYear() + “-“ + (“0” + (dzisiaj.getMonth() + 1)).slice(-2) + “-“ + (“0” + dzisiaj.getDate()).slice(-2);
        $http.jsonp("https://api.themoviedb.org/3/discover/tv?first_air_date.gte=" + miesiac + "&sort_by=popularity.desc&api_key=’+$scope.kluczApi+’&callback=JSON_CALLBACK").success(function(dane) {

        }).error(function(error) {
            alert(‘Houston, mamy problem z uzyskaniem danych.’);
        });
    };
});

Jak widzisz, wzbogaciłem adres odwołania do API o ciąg &sort_by=popularity.desc. Dzięki temu lista seriali, którą otrzymamy będzie posortowana pod kątem popularności serialów. Na koniec ciągu dodajemy jeszcze zmienną &callback=JSON_CALLBACK, aby upewnić się, że odpowiedź serwera będzie w formacie JSON.

Jeśli chcesz sprawdzić „na sucho” odwołanie do API, wstaw link prosto do przeglądarki, wpisując jakąś datę (na skrinie poniżej jest to 2014-09-01). Powinieneś otrzymać czystą odpowiedź w formacie JSON:

nauka-angularjs

Na jej podstawie możemy stwierdzić, jakie dane o każdym serialu otrzymamy w ramach odpowiedzi z serwera: "id" "original_name" "first_air_date" "origin_country" "poster_path" "popularity" "name" "vote_average" "vote_count"

Dodałem jeszcze alert na wypadek, gdyby nie udało się wykonać połączenia z API. Otrzymane z API dane musimy jeszcze gdzieś przechować. Zadeklarujmy tablicę w obrębie funkcji $scope:

$scope.wyniki = [];

Następnie wykorzystajmy tablicę do zgromadzenia danych z API:

$scope.wyniki = dane.results;

Po tych modyfikacjach plik kontroler.js przedstawia się następująco:

apka.controller(„MojController”, function($scope,$http){
    $scope.kluczApi = "...";  // wstaw swój klucz api - np. d9eb45644e9.....
    $scope.wyniki = [];
    $scope.glowna = function() {
        var dzisiaj = new Date();
        var miesiac = dzisiaj.getFullYear() + “-“ + (“0” + (dzisiaj.getMonth() + 1)).slice(-2) + “-“ + (“0” + dzisiaj.getDate()).slice(-2);
        $http.jsonp("https://api.themoviedb.org/3/discover/tv?first_air_date.gte=" + miesiac + "&sort_by=popularity.desc&api_key=’+$scope.kluczApi+’&callback=JSON_CALLBACK").success(function(dane) {
            $scope.wyniki = dane.results;
        }).error(function(error) {
            alert("Houston, mamy problem z uzyskaniem danych.");
        });
    };
});

Wyświetlamy pobrane dane

Czas wyświetlić informacje o serialach w naszej aplikacji. Wracamy do pliku html i dodajemy atrybut ng-init z nazwą naszej głównej funkcji do div.container. W ten sposób upewniamy się, że ta funkcja będzie wywołana jako pierwsza z naszej angularnej aplikacji po wyświetleniu strony. W elemenciediv.container’ powinieneś mieć odwołanie do naszej testowej zmiennej{{mojtekst}}`. Usuń więc je.

<div class="container" ng-app='PremierySeriali' ng-controller='MojController' ng-init='glowna()'>
    {{mojtekst}}  <!--- <-kasujemy -->
</div>

Teraz bierzemy się za wyświetlenie danych na naszej stronie. Skorzystamy z dyrektywy ng-repeat, która pozwoli nam dynamicznie wyświetlić zawartość danych w tablicy wyniki[] jako np. listę. Gotowy kod wygląda tak:

<div class="container" ng-app='PremierySeriali' ng-controller='MojController' ng-init='glowna()' >
    <div class="row">
        <div class="col-md-2" ng-repeat='serial in wyniki'>
        <h2>{{serial.original_name}}</h2>
        </div>
    </div>
</div>

Po uruchomieniu w przeglądarce, otrzymujemy listę serialowych premier miesiąca. W moim przypadku wygląda tak:

jak-stworzyc-projekt-w-angularjs

Zanim dodamy nowe funkcjonalności, ubierzmy naszą aplikację w estetyczne wdzianko. Najlepiej sprawdzi się Boostrap, popularny framework, umożliwiający szybkie tworzenie projektów stron, także responsywnych. Pobieramy Bootstrapa i dodajemy go do naszej strony, tworząc także prosty szablon za pomocą obecnych w Bootstrapie gotowych modułów. Nie będę się rozwodził nad nimi w szczegółach w tym tutorialu, wszak skupiamy się tu na AngularJS.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Kurs AngularJS</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="aplikacja.js" type="text/javascript"></script> <!-- aplikacja angularJS -->
    <script src="kontroler.js" type="text/javascript"></script> <!-- glowny controller przypisany do aplikacji AngularJS -->

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><!-- bootstrap -->
    <link rel="stylesheet" type="text/js" href="css/bootstrap.min.js"><!-- bootstrap -->

</head>
<body>

    <div class="navbar navbar-inverse" role="navigation">
        <div class="container">
            <div class="navbar-header">
              <a class="navbar-brand" href="#">Serialowe nowości</a>
            </div>
        </div>
    </div>

    <div class="container" ng-app='PremierySeriali' ng-controller='MojController' ng-init='glowna()' >
        <div class="row">
            <div class="col-md-2" ng-repeat='serial in wyniki'>
                <img ng-show="serial.poster_path != null" src="https://image.tmdb.org/t/p/w185{{serial.poster_path}}" style="height:272px" />
                <img ng-show="serial.poster_path == null" src="images/brak-postera.jpg" />
                <h2>{{serial.original_name}}</h2>
            </div>
        </div>
    </div>
</body>
</html>

Ponadto, posługując się zmienną serial.poster_path możemy wyświetlić plakat do każdego serialu. Jeśli plakatu nie ma w otrzymanym z API zestawie danych, wyświetlamy informującą o tym grafikę. Odpowiada za to dyrektywa ng-show, która sprawdza, czy serial.poster_path istnieje, a następnie wyświetla stosowny <img>. Drobnym kłopotem jest fakt, że plakaty niektórych seriali w bazie themoviedb.org mają większą wysokość od pozostałych, co czasem może powodować rozjeżdzanie się naszej aplikacji, która wyświetla seriale w formie siatki. Rozwiązaniem jest utrzymanie stałego rozmiaru plakatów za pomocą atrybutu style="height:272px dla tagu img.

Gotowa aplikacja powinna wyglądać mniej więcej w poniższy sposób. Wyświetlane są premierowe seriale w danym miesiącu, a zawartość zmienia się dynamicznie w zależności od tego, jaki aktualnie mamy miesiąc – bazując na danych z API serwisu themoviedb.org.

tutorial-angularjs-od-podstaw

Jestem ciekaw, jak rozwiniesz swoją aplikację – samo API daje jeszcze sporo możliwości rozbudowy naszej angularnej apki o nowe funkcjonalności. Zachęcam do eksperymentowania – wszyscy wiemy, że to najlepszy sposób na naukę.