Tytuł oryginału: Pro AngularJS - Helionpdf.helion.pl › angupt › angupt.pdf · 2019-05-15 ·...

Tytuł oryginału: Pro AngularJS

Tłumaczenie: Robert Górczyński

ISBN: 978-83-283-0197-9

Original edition copyright © 2014 by Adam Freeman.All rights reserved.

Polish edition copyright © 2015 by HELION SA.All rights reserved.

No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher.

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.

Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.

Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie ponosi również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.

Wydawnictwo HELIONul. Kościuszki 1c, 44-100 GLIWICEtel. 32 231 22 19, 32 230 98 63e-mail: [email protected]: http://helion.pl (księgarnia internetowa, katalog książek)

Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/angupt.zip

Drogi Czytelniku!Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/anguptMożesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Printed in Poland.

• Kup książkę• Poleć książkę • Oceń książkę

• Księgarnia internetowa• Lubię to! » Nasza społeczność

http://helion.pl/rt/angupt

http://helion.pl/rf/angupt

http://helion.pl/ro/angupt

http://helion.pl

http://ebookpoint.pl/r/4CAKF

Spis tre ci

O autorze ...............................................................................................................15

O recenzencie technicznym ....................................................................................16

Cz I Zaczynamy ........................................................................17

Rozdzia 1. Zaczynamy .............................................................................................................19Wymagania ........................................................................................................................................... 19Jaka jest struktura niniejszej książki? ................................................................................................ 20

Część I. Zaczynamy ...................................................................................................................... 20Część II. Praca z AngularJS ......................................................................................................... 20Część III. Praca z modułami i usługami .................................................................................... 20

Czy w książce znajdę wiele przykładów? .......................................................................................... 20Gdzie znajdę przykładowe fragmenty kodu? ................................................................................... 23Jak skonfigurować środowisko programistyczne? .......................................................................... 23

Wybór przeglądarki internetowej .............................................................................................. 23Wybór edytora tekstów ................................................................................................................ 24Instalacja Node.js .......................................................................................................................... 24Instalacja serwera WWW ............................................................................................................ 25Instalacja systemu przeznaczonego do testowania .................................................................. 25Utworzenie katalogu AngularJS ................................................................................................. 26Przeprowadzenie prostego testu ................................................................................................. 28

Podsumowanie ..................................................................................................................................... 29

Rozdzia 2. Pierwsza aplikacja w AngularJS .............................................................................31Przygotowanie projektu ...................................................................................................................... 31Użycie AngularJS ................................................................................................................................. 33

Dodanie biblioteki AngularJS do pliku HTML ........................................................................ 33Utworzenie modelu danych ........................................................................................................ 35Utworzenie kontrolera ................................................................................................................. 37Utworzenie widoku ...................................................................................................................... 39

Wyjście poza podstawy ....................................................................................................................... 42Użycie dwukierunkowego dołączania modelu ......................................................................... 42Zdefiniowanie i stosowanie funkcji w kontrolerach ................................................................ 44

Kup książkę Poleć książkę



Spis tre ci

6

Użycie funkcji w zależności od innych zdefiniowanych funkcji ............................................ 46Reakcja na działania użytkownika .............................................................................................. 48Filtrowanie i zmiana kolejności danych modelu ...................................................................... 51Pobieranie danych z wykorzystaniem technologii Ajax ......................................................... 55

Podsumowanie ..................................................................................................................................... 57

Rozdzia 3. Umieszczenie AngularJS w kontek cie ...................................................................59Sytuacje, w których AngularJS sprawdza się doskonale ................................................................. 59

Poznanie aplikacji dwukierunkowych oraz w postaci pojedynczej strony .......................... 60Wzorzec MVC ...................................................................................................................................... 62

Model .............................................................................................................................................. 63Kontroler ........................................................................................................................................ 65Widok ............................................................................................................................................. 65

Usługi typu RESTful ............................................................................................................................ 66Najczęstsze pułapki podczas stosowania wzorca MVC ................................................................. 68

Umieszczenie logiki w nieodpowiednim miejscu .................................................................... 68Przyjęcie formatu danych stosowanego w magazynie danych ............................................... 68Kurczowe trzymanie się starych sposobów ............................................................................... 69

Podsumowanie ..................................................................................................................................... 69

Rozdzia 4. Wprowadzenie do HTML i Bootstrap CSS ..............................................................71Poznajemy HTML ............................................................................................................................... 72

Anatomia elementu HTML ......................................................................................................... 73Atrybuty ......................................................................................................................................... 74Zawartość elementu ...................................................................................................................... 74Elementy typu void ....................................................................................................................... 75Struktura dokumentu ................................................................................................................... 75

Poznajemy framework Bootstrap ...................................................................................................... 77Stosowanie podstawowych klas Bootstrap ................................................................................ 79Użycie frameworka Bootstrap do nadawania stylu tabeli ....................................................... 80Użycie frameworka Bootstrap do tworzenia formularzy sieciowych ................................... 83Użycie frameworka Bootstrap do utworzenia układu opartego na siatce ............................ 85

Podsumowanie ..................................................................................................................................... 89

Rozdzia 5. Wprowadzenie do JavaScript ................................................................................91Przygotowanie przykładowego projektu .......................................................................................... 92Element <script> .................................................................................................................................. 93Polecenia w JavaScript ........................................................................................................................ 94Definiowanie i użycie funkcji ............................................................................................................. 94

Definiowanie funkcji z parametrami ......................................................................................... 95Definiowanie funkcji zwracającej wartość ................................................................................ 96Wykrywanie funkcji ..................................................................................................................... 97

Użycie zmiennych i typów ................................................................................................................. 98Użycie typów podstawowych ...................................................................................................... 99Tworzenie obiektów ................................................................................................................... 101Praca z obiektami ........................................................................................................................ 104

Użycie operatorów JavaScript .......................................................................................................... 110Użycie konstrukcji warunkowych ............................................................................................ 110Operatory równości i identyczności ........................................................................................ 111Jawna konwersja typów ............................................................................................................. 114




Spis tre ci

7

Tablice ................................................................................................................................................. 116Użycie stylu dosłownej tablicy .................................................................................................. 117Wykrywanie tablicy .................................................................................................................... 117Odczyt i modyfikacja zawartości tablicy ................................................................................. 118Wyświetlenie zawartości tablicy ............................................................................................... 119Użycie wbudowanych metod przeznaczonych do pracy z tablicami .................................. 119

Porównywanie wartości undefined i null ....................................................................................... 120Sprawdzenie pod kątem wartości null lub undefined ........................................................... 122

Obietnice ............................................................................................................................................. 124Format JSON ...................................................................................................................................... 128Podsumowanie ................................................................................................................................... 129

Rozdzia 6. SportsStore — przyk adowa aplikacja .................................................................131Rozpoczęcie pracy .............................................................................................................................. 132

Przygotowanie danych ............................................................................................................... 132Przygotowanie aplikacji ............................................................................................................. 135

Wyświetlenie przykładowych danych produktu ........................................................................... 138Utworzenie kontrolera ............................................................................................................... 138Wyświetlanie informacji o produktach ................................................................................... 140

Wyświetlenie listy kategorii ............................................................................................................. 143Utworzenie listy kategorii .......................................................................................................... 143Generowanie łączy nawigacji po kategoriach ......................................................................... 144Wybór kategorii .......................................................................................................................... 148Podświetlenie wybranej kategorii ............................................................................................. 150Dodanie stronicowania .............................................................................................................. 152

Podsumowanie ................................................................................................................................... 156

Rozdzia 7. SportsStore — nawigacja i zakupy ......................................................................157Przygotowanie przykładowego projektu ........................................................................................ 157Użycie rzeczywistych danych produkcyjnych ............................................................................... 157

Obsługa błędów Ajax ................................................................................................................. 159Utworzenie widoków częściowych .................................................................................................. 161Utworzenie koszyka na zakupy ....................................................................................................... 163

Zdefiniowanie modułu koszyka i usługi .................................................................................. 163Utworzenie widżetu koszyka na zakupy .................................................................................. 165Dodanie przycisku wyboru produktu ...................................................................................... 168

Dodanie nawigacji na podstawie adresu URL ............................................................................... 170Definiowanie tras URL ............................................................................................................... 170Użycie routingu adresów URL do zapewnienia nawigacji ................................................... 173

Rozpoczęcie prac nad finalizacją zamówienia ............................................................................... 174Finalizacja zamówienia .............................................................................................................. 176

Podsumowanie ................................................................................................................................... 177

Rozdzia 8. SportsStore — zamówienia i administracja .........................................................179Przygotowanie przykładowego projektu ........................................................................................ 179Pobieranie danych adresowych ....................................................................................................... 179

Dodanie formularza weryfikacji danych ................................................................................. 181Dodanie pozostałych elementów formularza sieciowego ..................................................... 185




Spis tre ci

8

Składanie zamówień .......................................................................................................................... 187Rozbudowa serwera Deployd .................................................................................................... 187Zdefiniowanie funkcji kontrolera ............................................................................................. 189Wywołanie funkcji kontrolera .................................................................................................. 190Zdefiniowanie widoku ............................................................................................................... 190

Usprawnienia w aplikacji .................................................................................................................. 191Administrowanie katalogiem produktów ...................................................................................... 192

Przygotowanie serwera Deployd .............................................................................................. 192Utworzenie aplikacji administracyjnej .................................................................................... 194Implementacja uwierzytelniania .............................................................................................. 195Definiowanie widoku głównego i kontrolera ......................................................................... 198Implementacja funkcji przeglądania zamówień ..................................................................... 200Implementacja funkcji zmiany zawartości katalogu produktów ......................................... 203

Podsumowanie ................................................................................................................................... 207

Cz II Praca z AngularJS ............................................................209

Rozdzia 9. Anatomia aplikacji AngularJS ..............................................................................211Przygotowanie przykładowego projektu ........................................................................................ 212Praca z modułami .............................................................................................................................. 213

Określenie granic aplikacji AngularJS ..................................................................................... 213Użycie modułów do zdefiniowania komponentów AngularJS ................................................... 214

Definiowanie kontrolera ............................................................................................................ 215Definiowanie dyrektywy ............................................................................................................ 221Definiowanie filtru ..................................................................................................................... 223Definiowanie usługi .................................................................................................................... 226

Użycie modułów do organizacji kodu ............................................................................................ 229Cykl życiowy modułu ................................................................................................................. 232

Podsumowanie ................................................................................................................................... 233

Rozdzia 10. U ycie dyrektyw do czania i szablonów ............................................................235Kiedy i dlaczego należy używać dyrektyw? .................................................................................... 236Przygotowanie przykładowego projektu ........................................................................................ 236Użycie dyrektyw dołączania danych ............................................................................................... 237

Przeprowadzenie (lub uniknięcie) jednokierunkowego dołączenia danych ..................... 239Przeprowadzenie dwukierunkowego dołączania danych ..................................................... 241

Użycie szablonów dyrektyw ............................................................................................................. 243Generowanie powtarzających się elementów ......................................................................... 244Generowanie wielu elementów najwyższego poziomu ......................................................... 250Praca z widokami częściowymi ................................................................................................. 251Użycie dyrektywy ng-include jako atrybutu ........................................................................... 255Warunkowe zastępowanie elementów .................................................................................... 256Ukrycie nieprzetworzonych osadzonych szablonów wyrażeń dołączania danych ........... 259

Podsumowanie ................................................................................................................................... 261

Rozdzia 11. U ycie dyrektyw elementów i zdarze ................................................................263Przygotowanie przykładowego projektu ........................................................................................ 264Użycie dyrektyw elementu ............................................................................................................... 264

Wyświetlanie, ukrywanie i usuwanie elementów .................................................................. 265Zarządzanie klasami i stylami CSS ........................................................................................... 269




Spis tre ci

9

Obsługa zdarzeń ................................................................................................................................. 274Utworzenie własnej dyrektywy zdarzeń .................................................................................. 277

Zarządzanie atrybutami specjalnymi .............................................................................................. 279Zarządzanie atrybutami boolowskimi ..................................................................................... 279Zarządzanie innymi atrybutami ............................................................................................... 281

Podsumowanie ................................................................................................................................... 282

Rozdzia 12. Praca z formularzami sieciowymi ........................................................................283Przygotowanie przykładowego projektu ........................................................................................ 284Użycie dwukierunkowego dołączania danych w elementach formularza sieciowego ............ 285

Niejawne tworzenie właściwości modelu ................................................................................ 286Sprawdzenie, czy obiekt modelu danych został utworzony ................................................. 289

Weryfikacja formularzy sieciowych ................................................................................................ 290Przeprowadzenie podstawowej weryfikacji formularza sieciowego .................................... 292

Wyświetlanie komunikatów w trakcie weryfikacji formularza sieciowego .............................. 296Użycie CSS do nadania stylu komunikatom ........................................................................... 297Użycie zmiennych specjalnych w celu wyświetlania komunikatów .................................... 301Wstrzymanie wyświetlania komunikatów .............................................................................. 304

Użycie atrybutów dyrektywy formularza sieciowego ................................................................... 306Użycie elementów <input> ....................................................................................................... 306Użycie elementu <textarea> ...................................................................................................... 309Użycie elementów <select> ....................................................................................................... 310

Podsumowanie ................................................................................................................................... 314

Rozdzia 13. U ycie kontrolerów i zakresów ............................................................................315Kiedy i dlaczego używać kontrolerów i zakresów? ....................................................................... 316Przygotowanie przykładowego projektu ........................................................................................ 316Poznajemy podstawy ......................................................................................................................... 317

Utworzenie i zastosowanie kontrolera .................................................................................... 317Konfiguracja zakresu .................................................................................................................. 318Modyfikacja zakresu ................................................................................................................... 320

Organizowanie kontrolerów ............................................................................................................ 321Użycie kontrolera monolitycznego .......................................................................................... 322Ponowne użycie kontrolera ....................................................................................................... 324Dziedziczenie kontrolerów ........................................................................................................ 328Użycie wielu kontrolerów .......................................................................................................... 335

Kontroler bez zakresu ....................................................................................................................... 337Wyraźne uaktualnienie zakresu ....................................................................................................... 338

Konfiguracja jQuery UI ............................................................................................................. 338Kontrola stanu przycisku ........................................................................................................... 340Zliczanie kliknięć przycisku ...................................................................................................... 341

Podsumowanie ................................................................................................................................... 342

Rozdzia 14. U ycie filtrów ......................................................................................................343Kiedy i dlaczego używać filtrów? ..................................................................................................... 344Przygotowanie przykładowego projektu ........................................................................................ 344

Pobieranie pliku lokalizacji ....................................................................................................... 345Filtrowanie pojedynczych wartości danych ................................................................................... 346

Formatowanie wartości pieniężnych ....................................................................................... 347Formatowanie innych wartości pieniężnych .......................................................................... 348




Spis tre ci

10

Formatowanie dat ....................................................................................................................... 349Zmiana wielkości liter ciągu tekstowego ................................................................................. 352Generowanie danych w formacie JSON .................................................................................. 353Lokalizacja danych wyjściowych filtru .................................................................................... 354

Filtrowanie kolekcji ........................................................................................................................... 357Ograniczenie liczby elementów ................................................................................................ 357Wybór elementów ...................................................................................................................... 360Sortowanie elementów ............................................................................................................... 362

Łączenie filtrów .................................................................................................................................. 366Utworzenie własnego filtru .............................................................................................................. 367

Utworzenie filtru przeznaczonego do formatowania wartości daty ................................... 367Utworzenie filtru kolekcji .......................................................................................................... 369Budowa filtru na bazie istniejącego filtru ................................................................................ 371

Podsumowanie ................................................................................................................................... 372

Rozdzia 15. Tworzenie w asnych dyrektyw ............................................................................373Kiedy i dlaczego tworzyć własne dyrektywy? ................................................................................ 374Przygotowanie przykładowego projektu ........................................................................................ 374Utworzenie własnej dyrektywy ........................................................................................................ 375

Zdefiniowanie dyrektywy .......................................................................................................... 375Implementacja funkcji link ....................................................................................................... 376Zniesienie zależności właściwości danych .............................................................................. 379Obsługa zmiany danych ............................................................................................................. 382

Praca z jqLite ...................................................................................................................................... 387Nawigacja po obiektowym modelu dokumentu .................................................................... 387Modyfikacja elementów ............................................................................................................. 391Tworzenie i usuwanie elementów ............................................................................................ 393Obsługa zdarzeń .......................................................................................................................... 396Inne metody jqLite ..................................................................................................................... 397Uzyskanie dostępu do funkcji AngularJS z poziomu jqLite ................................................. 398

Zastąpienie jqLite przez jQuery ....................................................................................................... 399Podsumowanie ................................................................................................................................... 400

Rozdzia 16. Tworzenie skomplikowanych dyrektyw ...............................................................401Przygotowanie przykładowego projektu ........................................................................................ 402Definiowanie skomplikowanych dyrektyw .................................................................................... 402

Definiowanie sposobu zastosowania dyrektywy .................................................................... 403Użycie szablonu dyrektywy .............................................................................................................. 407

Użycie funkcji jako szablonu ..................................................................................................... 409Użycie zewnętrznego szablonu ................................................................................................. 410Wybór szablonu zewnętrznego za pomocą funkcji ............................................................... 411Zastępowanie elementu ............................................................................................................. 413

Zarządzanie zakresami dyrektywy .................................................................................................. 415Utworzenie wielu kontrolerów ................................................................................................. 417Zdefiniowanie oddzielnego zakresu dla każdego egzemplarza dyrektywy ........................ 418Utworzenie odizolowanych zakresów ..................................................................................... 421

Podsumowanie ................................................................................................................................... 430




Spis tre ci

11

Rozdzia 17. Zaawansowane funkcje dyrektyw .......................................................................431Przygotowanie przykładowego projektu ........................................................................................ 432Użycie transkluzji .............................................................................................................................. 432

Użycie funkcji compile ............................................................................................................... 435Użycie kontrolerów w dyrektywach ................................................................................................ 438

Dodanie innej dyrektywy ........................................................................................................... 441Utworzenie własnych elementów formularza sieciowego ........................................................... 443

Obsługa zmian zewnętrznych ................................................................................................... 445Obsługa zmian wewnętrznych .................................................................................................. 447Formatowanie wartości danych ................................................................................................ 448Weryfikacja własnych elementów formularza sieciowego ................................................... 449

Podsumowanie ................................................................................................................................... 452

Cz III Us ugi AngularJS ..............................................................453

Rozdzia 18. Praca z modu ami i us ugami ...............................................................................455Kiedy i dlaczego należy tworzyć usługi i moduły? ........................................................................ 455Przygotowanie przykładowego projektu ........................................................................................ 456Użycie modułów do nadania struktury aplikacji .......................................................................... 458

Obsługa pojedynczego modułu ................................................................................................ 458Utworzenie nowego modułu ..................................................................................................... 460

Utworzenie i użycie usługi ............................................................................................................... 461Użycie metody factory() ............................................................................................................ 461Użycie metody service() ............................................................................................................. 464Użycie metody provider() ......................................................................................................... 466

Użycie wbudowanych modułów i usług ......................................................................................... 468Podsumowanie ................................................................................................................................... 469

Rozdzia 19. Us ugi dla obiektów globalnych, b dów i wyra e ............................................471Przygotowanie przykładowego projektu ........................................................................................ 471Uzyskanie dostępu do obiektów globalnych API DOM .............................................................. 471

Kiedy i dlaczego używać usług obiektu globalnego? ............................................................. 472Uzyskanie dostępu do obiektu window ................................................................................... 472Uzyskanie dostępu do obiektu document ............................................................................... 473Użycie usług $interval i $timeout ............................................................................................. 474Uzyskanie dostępu do adresu URL .......................................................................................... 475Rejestracja danych ...................................................................................................................... 481

Wyjątki ................................................................................................................................................ 482Kiedy i dlaczego używać usługi $exceptionHandler? ............................................................ 482Praca z wyjątkami ....................................................................................................................... 483Bezpośrednia praca z usługą $exceptionHandler .................................................................. 483Implementacja własnej procedury obsługi wyjątków ........................................................... 484

Praca z niebezpiecznymi danymi .................................................................................................... 485Kiedy i dlaczego używać usług przeznaczonych do pracy z niebezpiecznymi danymi? .... 486Wyświetlanie niebezpiecznych danych ................................................................................... 486Użycie niebezpiecznego mechanizmu dołączania danych ................................................... 487Wyraźne zaufanie danym .......................................................................................................... 490




Spis tre ci

12

Praca z wyrażeniami i dyrektywami AngularJS ............................................................................ 491Kiedy i dlaczego używać usług wyrażeń i dyrektyw? ............................................................. 492Konwersja wyrażenia na funkcję .............................................................................................. 492Interpolacja ciągów tekstowych ................................................................................................ 495Kompilacja zawartości ............................................................................................................... 498

Podsumowanie ................................................................................................................................... 499

Rozdzia 20. Us ugi dla technologii Ajax i obietnic ..................................................................501Kiedy i dlaczego używać usług Ajax? .............................................................................................. 502Przygotowanie przykładowego projektu ........................................................................................ 502Żądania Ajax ....................................................................................................................................... 502

Wykonywanie żądania Ajax ...................................................................................................... 505Otrzymywanie odpowiedzi na żądanie Ajax .......................................................................... 506Konfiguracja żądań Ajax ............................................................................................................ 509Ustawienie wartości domyślnych żądania Ajax ..................................................................... 513Użycie interceptorów Ajax ........................................................................................................ 515

Obietnice ............................................................................................................................................. 516Pobieranie i użycie obiektu deferred ........................................................................................ 518Użycie obietnicy .......................................................................................................................... 519Dlaczego obietnice nie są zwykłymi zdarzeniami? ................................................................ 521Łączenie obietnic ze sobą ........................................................................................................... 522Grupowanie obietnic .................................................................................................................. 524

Podsumowanie ................................................................................................................................... 526

Rozdzia 21. Us ugi dla REST ....................................................................................................527Kiedy i dlaczego używać usług typu REST? ................................................................................... 528Przygotowanie przykładowego projektu ........................................................................................ 528

Utworzenie usługi typu RESTful .............................................................................................. 528Utworzenie aplikacji AngularJS ................................................................................................ 531

Użycie usługi $http ............................................................................................................................ 536Wyświetlenie danych produktu ................................................................................................ 536Usunięcie produktu .................................................................................................................... 538Utworzenie produktu ................................................................................................................. 538Uaktualnienie produktu ............................................................................................................ 539Przetestowanie implementacji Ajax ......................................................................................... 539

Ukrycie żądań Ajax ............................................................................................................................ 539Instalacja modułu ngResource .................................................................................................. 542Użycie usługi $resource ............................................................................................................. 543Konfiguracja akcji usługi $resource ......................................................................................... 548Utworzenie komponentu gotowego do użycia z usługą $resource ..................................... 549

Podsumowanie ................................................................................................................................... 551

Rozdzia 22. Us ugi dla widoków .............................................................................................553Kiedy i dlaczego używać usług widoku? ......................................................................................... 553Przygotowanie przykładowego projektu ........................................................................................ 554

Istota problemu ........................................................................................................................... 554Użycie routingu URL ........................................................................................................................ 556

Instalacja modułu ngRoute ....................................................................................................... 556Definiowanie adresów URL tras ............................................................................................... 557




Spis tre ci

13

Wyświetlanie wybranego widoku ............................................................................................. 558Połączenie kodu i znaczników HTML ..................................................................................... 559

Użycie parametrów trasy .................................................................................................................. 562Uzyskanie dostępu do tras i parametrów tras ........................................................................ 564

Konfiguracja tras ................................................................................................................................ 567Użycie kontrolerów z trasami ................................................................................................... 568Dodanie zależności do tras ........................................................................................................ 570

Podsumowanie ................................................................................................................................... 573

Rozdzia 23. Us ugi dla animacji i dotkni ..............................................................................575Przygotowanie przykładowego projektu ........................................................................................ 575Animacja elementów ......................................................................................................................... 575

Kiedy i dlaczego używać usługi animacji? ............................................................................... 576Instalacja modułu ngAnimation ............................................................................................... 576Definiowanie i stosowanie animacji ........................................................................................ 577Uniknięcie niebezpieczeństwa w postaci jednoczesnych animacji ..................................... 579

Obsługa zdarzeń dotknięć ................................................................................................................ 580Kiedy i dlaczego używać zdarzeń dotknięć? ........................................................................... 581Instalacja modułu ngTouch ...................................................................................................... 581Obsługa gestu machnięcia ......................................................................................................... 581Użycie zamiennika dla dyrektywy ng-click ............................................................................. 582

Podsumowanie ................................................................................................................................... 582

Rozdzia 24. Us ugi rejestracji komponentów i ich wstrzykiwania ...........................................583Kiedy i dlaczego używać usług rejestracji komponentów i ich wstrzykiwania? ....................... 583Przygotowanie przykładowego projektu ........................................................................................ 583Rejestracja komponentów AngularJS ............................................................................................. 584Zarządzanie wstrzykiwaniem zależności ........................................................................................ 586

Ustalenie zależności funkcji ...................................................................................................... 586Pobieranie egzemplarzy usługi ................................................................................................. 588Uproszczenie procesu wywołania ............................................................................................ 589Pobranie usługi $injector z elementu głównego .................................................................... 590

Podsumowanie ................................................................................................................................... 591

Rozdzia 25. Testy jednostkowe ...............................................................................................593Kiedy i dlaczego przeprowadzać testy jednostkowe? ................................................................... 594Przygotowanie przykładowego projektu ........................................................................................ 594

Instalacja modułu ngMock ........................................................................................................ 594Utworzenie konfiguracji testowej ............................................................................................. 594Utworzenie przykładowej aplikacji .......................................................................................... 596

Praca z Karma i Jasmine ................................................................................................................... 597Przeprowadzanie testów ............................................................................................................ 599

Poznajemy atrapę obiektu ................................................................................................................ 601API i obiekty testowe .................................................................................................................. 601

Testowanie kontrolera ...................................................................................................................... 602Przygotowanie testu ................................................................................................................... 603

Użycie atrap obiektów ....................................................................................................................... 604Symulacja odpowiedzi HTTP ................................................................................................... 604Symulacja czasu ........................................................................................................................... 608Testowanie rejestracji danych ................................................................................................... 610




Spis tre ci

14

Testowanie innych komponentów .................................................................................................. 612Testowanie filtru ......................................................................................................................... 612Testowanie dyrektywy ................................................................................................................ 614Testowanie usługi ....................................................................................................................... 615

Podsumowanie ................................................................................................................................... 617

Skorowidz ...........................................................................................................619




R O Z D Z I A 2

Pierwsza aplikacja w AngularJS

Najlepszym sposobem rozpoczęcia pracy z AngularJS jest po prostu utworzenie aplikacji sieciowej. W tymrozdziale zostanie zaprezentowany proces przygotowania prostej aplikacji. Na początku przygotujemystatyczną atrapę aplikacji docelowej, a następnie dodamy do niej funkcje AngularJS, tworząc w ten sposóbprostą, dynamiczną aplikację sieciową. W rozdziałach od 6. do 8. zobaczysz, jak utworzyć znacznie bardziejskomplikowaną i realistyczną aplikację AngularJS. Prosty przykład z tego rozdziału jest w zupełnościwystarczający do zademonstrowania najważniejszych komponentów aplikacji AngularJS i jednocześnieprzygotowuje grunt dla materiału znajdującego się w pozostałych rozdziałach.

Przygotowanie projektuW rozdziale 1. zobaczyłeś, jak przygotować i przetestować środowisko programistyczne, z którego korzystałempodczas pisania niniejszej książki. Jeżeli chcesz wypróbować zaprezentowane w niej przykłady, najwyższapora, aby wspomniane środowisko było w pełni skonfigurowane i działało.

Na początek utworzymy atrapę aplikacji w postaci statycznego dokumentu HTML pokazującegodocelową aplikację, nad którą będziemy pracować w tym rozdziale. Aplikacja to lista rzeczy do zrobienia.W katalogu angularjs utwórz nowy plik o nazwie todo.html i umieść w nim kod przedstawiony na listingu 2.1.

Listing 2.1. Początkowa zawartość pliku todo.html

<!DOCTYPE html><html data-ng-app><head> <title>Lista rzeczy do zrobienia</title> <link href="bootstrap.css" rel="stylesheet" /> <link href="bootstrap-theme.css" rel="stylesheet" /></head><body> <div class="page-header"> <h1>Lista rzeczy do zrobienia u ytkownika Adam</h1> </div> <div class="panel"> <div class="input-group"> <input class="form-control" /> <span class="input-group-btn"> <button class="btn btn-default">Dodaj</button> </span> </div>




AngularJS. Profesjonalne techniki

32

<table class="table table-striped"> <thead> <tr> <th>Opis</th> <th>Zrobione</th> </tr> </thead> <tbody> <tr><td>Kupi kwiaty</td><td>Nie</td></tr> <tr><td>Kupi buty</td><td>Nie</td></tr> <tr><td>Odebra bilety</td><td>Tak</td></tr> <tr><td>Zadzwoni do Janka</td><td>Nie</td></tr> </tbody> </table> </div></body></html>

Wskazówka Od tej chwili, o ile nie zostanie wskazane inaczej, wszystkie pliki umieszczaj w katalogu angularjs, któryutworzy e w poprzednim rozdziale. Przedstawionych w ksi ce przyk adowych fragmentów kodu nie musisz wpisywasamodzielnie. Wszystkie przyk ady mo na pobra bezp atnie ze strony po wi conej ksi ce (http://helion.pl/ksiazki/angupt.htm).Przygotowane do pobrania przyk ady s kompletne, pogrupowane rozdzia ami i zawieraj wszystkie pliki niezb dnedo utworzenia oraz przetestowania omawianych aplikacji.

Tak przygotowany plik nie używa AngularJS. W rzeczywistości nie zawiera nawet elementu <script>odpowiedzialnego za import pliku angular.js. Wkrótce dodamy plik JavaScript i zaczniemy stosować funkcjeoferowane przez AngularJS. Jednak na obecnym etapie plik todo.html zawiera statyczne elementy HTMLtworzące szkielet atrapy aplikacji — na górze znajduje się nagłówek, poniżej tabela zawierająca listę rzeczydo zrobienia. Aby zobaczyć efekt dotychczasowej pracy, wyświetl plik todo.html w przeglądarce internetowej(patrz rysunek 2.1).

Rysunek 2.1. Wygenerowana w przeglądarce internetowej zawartość początkowego pliku todo.html




Rozdzia 2. Pierwsza aplikacja w AngularJS

33

Uwaga Aby zachowa prostot przyk adu omawianego w tym rozdziale, ca y kod aplikacji b dzie umieszczony w plikutodo.html. W przypadku standardowych aplikacji AngularJS zwykle stosowana jest starannie wybrana struktura dlaplików. Poniewa tutaj nie tworzymy skomplikowanego przyk adu, umieszczenie wszystkiego w pojedynczym plikunie spowoduje adnych utrudnie . W rozdziale 6. rozpoczniemy proces tworzenia znacznie bardziej zaawansowanejaplikacji AngularJS i wtedy porusz temat struktury plików w kontek cie budowanej aplikacji.

U ycie AngularJSStatyczny kod HTML w pliku todo.html służy jako miejsce zarezerwowane dla podstawowej funkcjonalności,którą chcemy utworzyć. Użytkownik powinien mieć możliwość wyświetlenia listy rzeczy do zrobienia,zaznaczenia już wykonanych zadań oraz dodawania nowych do listy. W kolejnych punktach rozdziału doaplikacji dodamy bibliotekę AngularJS i pewne podstawowe funkcje, a tym samym ożywimy aplikację listyrzeczy do zrobienia. W celu zachowania prostoty przyjąłem założenie, że istnieje tylko jeden użytkowniki nie ma konieczności zachowywania stanu danych w aplikacji.

Dodanie biblioteki AngularJS do pliku HTMLDodanie biblioteki AngularJS do pliku HTML jest bardzo łatwe. W dokumencie HTML wystarczy jedynieumieścić element <script> odpowiedzialny za import pliku angular.js, utworzyć moduł AngularJS orazzastosować odpowiedni atrybut dla elementu <html>, jak przedstawiono na listingu 2.2.

Listing 2.2. Utworzenie i zastosowanie modułu AngularJS w pliku todo.html

<!DOCTYPE html><html ng-app="todoApp"><head> <title>Lista zada do zrobienia</title> <link href="bootstrap.css" rel="stylesheet" /> <link href="bootstrap-theme.css" rel="stylesheet" /> <script src="angular.js"></script> <script> var todoApp = angular.module("todoApp", []); </script></head><body> <div class="page-header"> <h1>Lista rzeczy do zrobienia u ytkownika Adam</h1> </div> <div class="panel"> <div class="input-group"> <input class="form-control" /> <span class="input-group-btn"> <button class="btn btn-default">Dodaj</button> </span> </div> <table class="table table-striped"> <thead> <tr> <th>Opis</th> <th>Zrobione</th> </tr> </thead> <tbody> <tr><td>Kupi kwiaty</td><td>No</td></tr>





34

<tr><td>Kupi buty</td><td>No</td></tr> <tr><td>Odebra bilety</td><td>Yes</td></tr> <tr><td>Zadzwoni do Janka</td><td>No</td></tr> </tbody> </table> </div></body></html>

Aplikacje AngularJS są tworzone na podstawie co najmniej jednego modułu. Z kolei moduł jest tworzonyza pośrednictwem wywołania angular.module(), jak pokazano w poniższym fragmencie kodu:

...var todoApp = angular.module("todoApp", []);...

Omówienie modułów znajdziesz w rozdziałach 9. i 18. Powyżej zobaczyłeś, jak utworzony został modułdla aplikacji przedstawionej na listingu 2.2. Argumentami metody angular.module() są nazwa modułuprzeznaczonego do utworzenia oraz tablica innych modułów, które będą niezbędne. W omawianym przykładzieutworzyłem moduł o nazwie todoApp, stosując tym samym nieco dezorientującą konwencję dodawaniaprzyrostka App do nazwy modułu aplikacji. Drugi argument wywołania angular.module() to pusta tablica,która wskazuje, że do działania tworzonego modułu nie są wymagane żadne inne moduły. (Pewne funkcjeAngularJS są dostępne w różnych modułach. Sposób tworzenia własnych modułów będzie przedstawionyw rozdziale 18.).

Ostrze enie Najcz ciej pope niany b d polega na pomini ciu argumentu wskazuj cego zale no ci, co prowadzido wygenerowania b du. Koniecznie musisz poda argument okre laj cy zale no ci. Je li zale no ci nie s wymagane,to wskazuj cy je argument powinien mie posta pustej tablicy. Temat u ywania zale no ci zostanie poruszonyw rozdziale 18.

Nakazanie bibliotece AngularJS zastosowania modułu odbywa się za pomocą atrybutu ng-app. Sposóbdziałania AngularJS polega na rozszerzeniu kodu znaczników HTML, co odbywa się przez dodawanie nowychelementów, atrybutów, klas i specjalnych komentarzy (te ostatnie są jednak rzadko stosowane). BibliotekaAngularJS dynamicznie kompiluje kod HTML w dokumencie w celu wyszukania i przetworzenia wymienionychdodatków, a następnie tworzy aplikację. Wbudowane funkcje AngularJS można uzupełniać kodem JavaScriptw celu dostosowania do własnych potrzeb sposobu działania aplikacji oraz zdefiniowania własnych rozszerzeńdla kodu znaczników HTML.

Uwaga Stosowana przez AngularJS kompilacja w niczym nie przypomina kompilacji znanej z projektów tworzonychw j zykach C# lub Java, w których kompilator przetwarza kod ród owy w celu wygenerowania danych wyj ciowychmo liwych do wykonania przez rodowisko uruchomieniowe. Lepszym okre leniem b dzie stwierdzenie, e bibliotekaAngularJS analizuje elementy HTML po wczytaniu zawarto ci dokumentu przez przegl dark internetow , a nast pnieu ywa standardowego API DOM i funkcji JavaScript w celu dodania i usuni cia elementów, konfiguracji procedurobs ugi zdarze itd. W trakcie tworzenia aplikacji AngularJS nie wyst puje wyra ny etap kompilacji. Wystarczyzmodyfikowa pliki HTML i JavaScript, a nast pnie wczyta je w przegl darce internetowej.

Najważniejszym dodatkiem AngularJS w kodzie znaczników HTML jest atrybut ng-app. Wymienionyatrybut wskazuje, że element <html> na listingu 2.2 zawiera moduł, który powinien być skompilowanyi przetworzony przez AngularJS. Kiedy AngularJS to jedyny używany framework JavaScript w aplikacji,przyjęło się dodawanie atrybutu ng-app do elementu <html>, jak to zrobiłem na listingu 2.2. W przypadkułączenia AngularJS z innymi technologiami, na przykład jQuery, można zawęzić zasięg działania aplikacjiAngularJS przez zastosowanie atrybutu ng-app dla wybranego elementu w dokumencie.





35

Zastosowanie AngularJS w kodzie znaczników HTML

Dodawanie niestandardowych atrybutów i elementów do dokumentu HTML mo e wydawa si dziwne, zw aszczadla osób od d u szego czasu zajmuj cych si tworzeniem aplikacji sieciowych i przyzwyczajonych do trzymania sistandardu HTML. Je eli nie jeste przekonany do idei atrybutów takich jak ng-app, to mo esz skorzysta z podej ciaalternatywnego. Polega ono na u yciu atrybutów data i poprzedzaniu dyrektyw AngularJS przedrostkiem data-.Dok adne omówienie dyrektyw znajdziesz w cz ci II. W tym miejscu wystarczy wiedzie , e ng-app jest dyrektyw ,któr mo na zastosowa w nast puj cy sposób:

...<html data-ng-app="todoApp">...

W ksi ce stosuj konwencj AngularJS polegaj c na u yciu atrybutu ng-app oraz wszystkich pozosta ychusprawnie dost pnych dla HTML. Zalecam Ci takie samo podej cie. Oczywi cie mo esz zastosowa inne,je li chcesz lub gdy u ywane narz dzia programistyczne nie pozwalaj na przetwarzanie niestandardowychelementów i atrybutów HTML.

Utworzenie modelu danychAngularJS obsługuje wzorzec MVC (ang. Model-View-Controller), którego omówienie znajdziesz w rozdziale 3.Ujmując rzecz najprościej, MVC wymaga podzielenia aplikacji na trzy odmienne obszary: dane aplikacji(model), logikę działającą na wspomnianych danych (kontrolery) oraz logikę odpowiedzialną za wyświetlaniedanych (widoki).

Dane w omawianej tutaj prostej aplikacji listy rzeczy do zrobienia są umieszczone w różnych elementachHTML. Nazwa użytkownika została podana w nagłówku:

...<h1>Lista rzeczy do zrobienia u ytkownika Adam</h1>...

Natomiast lista poszczególnych rzeczy do zrobienia znajduje się w elementach <td> tabeli:

...<tr><td>Kupi kwiaty</td><td>No</td></tr>...

Nasze pierwsze zadanie polega więc na wyodrębnieniu wszystkich danych i oddzieleniu ich od elementówHTML, aby w ten sposób utworzyć model. Separacja danych od sposobu ich wyświetlania użytkownikowito kluczowa koncepcja we wzorcu MVC, co zostanie wyjaśnione w rozdziale 3. Ponieważ aplikacje AngularJSistnieją w przeglądarce internetowej, w omawianym przykładzie model trzeba zdefiniować w języku JavaScriptw elemencie <script>, jak przedstawiono na listingu 2.3.

Listing 2.3. Utworzenie modelu danych w pliku todo.html

<!DOCTYPE html><html ng-app="todoApp"><head> <title>Lista rzeczy do zrobienia</title> <link href="bootstrap.css" rel="stylesheet" /> <link href="bootstrap-theme.css" rel="stylesheet" /> <script src="angular.js"></script> <script> var model = {





36

user: "Adam", items: [{ action: "Kupi kwiaty", done: false }, { action: "Kupi buty", done: false }, { action: "Odebra bilety", done: true }, { action: "Zadzwoni do Janka", done: false }] };

var todoApp = angular.module("todoApp", []); </script></head><body> <div class="page-header"> <h1>Lista rzeczy do zrobienia</h1> </div> <div class="panel"> <div class="input-group"> <input class="form-control" /> <span class="input-group-btn"> <button class="btn btn-default">Dodaj</button> </span> </div> <table class="table table-striped"> <thead> <tr> <th>Opis</th> <th>Zrobione</th> </tr> </thead> <tbody> </tbody> </table> </div></body></html>

Wskazówka Tutaj zastosowa em pewne uproszczenie. Model mo e zawiera tak e logik niezb dn do utworzenia,wczytania, przechowywania i modyfikowania obiektów danych. W aplikacji AngularJS logika cz sto znajduje sipo stronie serwera i jest wykonywana przez serwer WWW. Wi cej informacji na ten temat znajdziesz w rozdziale 3.

W kodzie został zdefiniowany obiekt JavaScript o nazwie model wraz z właściwościami odpowiadającymidanym, które wcześniej znajdowały się w różnych elementach HTML. Właściwość user definiuje nazwęużytkownika, natomiast właściwość items określa tablicę obiektów tworzących listę rzeczy do zrobienia.

Najczęściej nie będziesz definiować modelu bez jednoczesnego określenia pozostałych komponentówwzorca MVC. W tym miejscu chcę jednak zaprezentować sposób tworzenia prostej aplikacji AngularJS.Efekt wprowadzonych dotąd zmian pokazano na rysunku 2.2.

Wskazówka W praktycznie ka dym projekcie aplikacji AngularJS zachodzi konieczno zdefiniowania podstawowychkomponentów wzorca MVC, a nast pnie po czenia ich ze sob . Wówczas mo na odnie wra enie, e wykonywanyjest krok wstecz, zw aszcza gdy punktem wyj cia jest statyczna atrapa aplikacji, czyli podej cie zastosowane w tymrozdziale. Czas po wi cony na przygotowanie wspomnianych komponentów na pewno si zwróci. Przyk ad wi kszegoprojektu realizowanego w taki sposób poznasz w rozdziale 6., w którym zaczniemy budowa znacznie bardziejskomplikowan i realistyczn aplikacj AngularJS. Na pocz tku wymagane b dzie w o enie znacznej ilo ci pracyw przygotowanie wst pnej konfiguracji aplikacji, ale pó niej dodawanie kolejnych funkcji oka e si niezwykleatwe i szybkie.





37

Rysunek 2.2. Nasza aplikacja po utworzeniu modelu danych

Utworzenie kontroleraKontroler definiuje logikę biznesową niezbędną do obsługi widoku, choć użyte tutaj wyrażenie logikabiznesowa nie jest zbyt trafne. Najlepszym sposobem opisania kontrolera jest wyjaśnienie, jakiego rodzajulogiki nie zawiera — pozostałe rodzaje znajdują więc zastosowanie w kontrolerze.

Logika odpowiedzialna za przechowywanie lub pobieranie danych stanowi część modelu. Z kolei logikapomagająca w formatowaniu danych i wyświetlaniu ich użytkownikowi jest częścią widoku. Kontroler jestumieszczony między modelem i widokiem i łączy je ze sobą. Do zadań kontrolera należy reakcja na działaniaużytkownika, uaktualnianie danych w modelu oraz dostarczanie widokowi wymaganych danych.

W tym momencie naprawdę nie ma znaczenia, czy to jest jasne dla Ciebie. Zanim zakończysz lekturęksiążki, będziesz swobodnie posługiwał się wzorcem MVC i potrafisz stosować go w aplikacjach AngularJS.Informacje szczegółowe dotyczące wzorca MVC znajdziesz w rozdziale 3., natomiast wyraźną separacjęmiędzy poszczególnymi komponentami MVC zaczniesz dostrzegać w rozdziale 6., w którym będziemybudować znacznie bardziej realistyczną aplikację sieciową w technologii AngularJS.

Wskazówka Nie przejmuj si , je li nie masz g owy do wzorców. Wielokrotnie wspomniany tutaj wzorzec MVC w du ejmierze opiera si na zdrowym rozs dku i jak si przekonasz, do lu no stosuj go w tej ksi ce. Wzorce to po prostunarz dzia, które maj pomaga programistom. Masz wi c woln r k i mo esz dostosowa je do w asnych potrzeb.Po przyswojeniu terminologii zwi zanej z MVC mo esz wybra elementy najprzydatniejsze do Twoich potrzeb, a tymsamym zaadaptowa MVC i AngularJS do opracowywanych projektów i preferowanego stylu programowania.

Utworzenie kontrolera następuje przez wywołanie metody controller() obiektu Module zwróconegoprzez metodę angular.module(), jak pokazano w poprzednim punkcie. Argumentami metody controller()są nazwa nowego kontrolera oraz funkcja, która będzie wywołana w celu zdefiniowania funkcjonalnościkontrolera (patrz listing 2.4).

Listing 2.4. Przykład utworzenia kontrolera w pliku todo.html

<!DOCTYPE html><html ng-app="todoApp"><head> <title>Lista rzeczy do zrobienia</title> <link href="bootstrap.css" rel="stylesheet" /> <link href="bootstrap-theme.css" rel="stylesheet" /> <script src="angular.js"></script> <script> var model = { user: "Adam",





38

items: [{ action: "Kupi kwiaty", done: false }, { action: "Kupi buty", done: false }, { action: "Odebra bilety", done: true }, { action: "Zadzwoni do Janka", done: false }] };

var todoApp = angular.module("todoApp", []);

todoApp.controller("ToDoCtrl", function ($scope) { $scope.todo = model; }); </script></head><body ng-controller="ToDoCtrl"> <div class="page-header"> <h1>Lista rzeczy do zrobienia</h1> </div> <div class="panel"> <div class="input-group"> <input class="form-control" /> <span class="input-group-btn"> <button class="btn btn-default">Dodaj</button> </span> </div> <table class="table table-striped"> <thead> <tr> <th>Opis</th> <th>Zrobione</th> </tr> </thead> <tbody></tbody> </table> </div></body></html>

Wedle konwencji nazwa kontrolera powinna mieć postać <Nazwa>Ctrl, gdzie człon <Nazwa> pomożew określeniu roli kontrolera w aplikacji. W rzeczywistych aplikacjach najczęściej znajduje się wiele kontrolerów.W prezentowanej tutaj wystarczy tylko jeden, któremu nadałem nazwę ToDoCtrl.

Wskazówka Nazwy kontrolerów to tylko konwencja i mo esz stosowa dowolne. Idea powszechnie stosowanychkonwencji polega na tym, e dzi ki nim programi ci znaj cy AngularJS b d mogli bardzo szybko ustali struktur projektu.

Przyznaję, że przedstawiony kontroler może być rozczarowujący, ponieważ jest możliwie najprostszy.Jednym z podstawowych zadań kontrolera jest dostarczenie widokom niezbędnych danych. Nie zawszezachodzi potrzeba, aby widoki miały dostęp do pełnego modelu. Dlatego też kontroler można wykorzystaćdo wyraźnego określenia zbioru danych dostępnych dla widoku. Wspomniany zbiór nosi nazwę zakresu(ang. scope).

Argumentem dla funkcji kontrolera utworzonego w omawianym przykładzie jest $scope, czyli znak $i słowo scope. W aplikacji AngularJS rozpoczynające się od znaku $ nazwy zmiennych oznaczają wbudowanefunkcjonalności AngularJS. Kiedy widzisz znak $, to zwykle odwołuje się on do wbudowanej usługi, którazazwyczaj jest samodzielnym komponentem dostarczającym funkcjonalności wielu komponentom. Jednak$scope ma znaczenie specjalne — służy do udostępnienia danych i funkcji widokom. Więcej informacjio zakresie znajdziesz w rozdziale 13., natomiast wbudowane usługi będą omówione w rozdziałach od 18. do 25.





39

Chcemy, aby w tworzonej tutaj aplikacji widoki miały dostęp do całego modelu. Dlatego też zdefiniowałemwłaściwość todo w obiekcie usługi $scope i przypisałem jej cały model w następujący sposób:

...$scope.todo = model;...

Takie podejście stanowi rodzaj wstępu do możliwości wykorzystania w widokach danych pochodzącychz modelu, co zostanie wkrótce zademonstrowane. Za pomocą atrybutu ng-controller wskazałem takżew dokumencie HTML obszar, za który będzie odpowiedzialny dany kontroler. Ponieważ tworzymy prostąaplikację zawierającą tylko jeden kontroler, atrybut ng-controller został umieszczony w elemencie <body>:

...<body ng-controller="ToDoCtrl">...

Wartością atrybutu ng-controller jest nazwa kontrolera, czyli w omawianym przykładzie ToDoCtrl.Do tematu kontrolerów jeszcze powrócimy w rozdziale 13.

Utworzenie widokuWygenerowanie widoku następuje przez połączenie danych dostarczanych przez kontroler z elementamiHTML tworzącymi zawartość wyświetlaną przez przeglądarkę internetową. Na listingu 2.5 przedstawionoużycie jednego z rodzajów adnotacji nazywanego dołączaniem danych (ang. data binding), co powodujeumieszczenie w dokumencie HTML danych pochodzących z modelu.

Listing 2.5. Wyświetlenie w pliku todo.html danych modelu za pomocą widoku

...<body ng-controller="ToDoCtrl"> <div class="page-header"> <h1> Lista rzeczy do zrobienia u ytkownika {{todo.user}} <span class="label label-default">{{todo.items.length}}</span> </h1> </div> <div class="panel"> <div class="input-group"> <input class="form-control" /> <span class="input-group-btn"> <button class="btn btn-default">Dodaj</button> </span> </div> <table class="table table-striped"> <thead> <tr> <th>Opis</th> <th>Zrobione</th> </tr> </thead> <tbody> <tr ng-repeat="item in todo.items"> <td>{{item.action}}</td> <td>{{item.done}}</td> </tr> </tbody>





40

</table> </div></body>...

Efekt połączenia modelu, kontrolera i widoku możesz zobaczyć w przeglądarce internetowej po wyświetleniupliku todo.html (patrz rysunek 2.3). Wygenerowany kod HTML zostanie omówiony w kolejnych punktach.

Rysunek 2.3. Efekt zdefiniowania widoku w pliku todo.html

Wstawianie warto ci modeluAngularJS używa notacji podwójnych nawiasów klamrowych ({{ i }}) w celu wskazania wyrażenia dołączaniadanych. Zawartość wyrażenia jest obliczana przez JavaScript, dane i funkcje są ograniczone do zakresudefiniowanego przez kontroler. W omawianym przykładzie można uzyskać dostęp do jedynie tych częścimodelu, które zostały przypisane obiektowi $scope podczas definiowania kontrolera. Używane są nazwywłaściwości utworzone w obiekcie $scope.

Oznacza to, że jeśli chcesz uzyskać dostęp do właściwości model.user, to należy zdefiniować wyrażeniedołączania odwołujące się do todo.user. Wynika to z faktu przypisania obiektu modelu do właściwości$scope.todo.

AngularJS kompiluje kod znaczników HTML w dokumencie, wyszukuje atrybut ng-controller,a następnie wywołuje funkcję kontrolera ToDoCtrl w celu zdefiniowania zakresu używanego do utworzeniawidoku. Po napotkaniu wyrażenia dołączania danych AngularJS wyszukuje w obiekcie $scope wskazanąwartość i umieszcza ją w dokumencie HTML. Na przykład wyrażenie

...Lista rzeczy do zrobienia u ytkownika {{todo.user}}...

jest przetwarzane i przekształcane na postać poniższego ciągu tekstowego:

Lista rzeczy do zrobienia u ytkownika Adam

Powyższa technika nosi nazwę dołączania danych lub dołączania modelu — wartość pochodząca z modelujest dołączana do zawartości elementu HTML. Istnieje kilka różnych sposobów dołączania danych; zostanąone przedstawione w rozdziale 10.





41

Obliczanie warto ci wyra eniaZawartością wyrażenia dołączania danych może być dowolne, prawidłowe polecenie języka JavaScript.Oznacza to możliwość przeprowadzenia operacji w celu utworzenia nowych danych na podstawie modelu.Na listingu 2.5 wykorzystano tę możliwość do wyświetlenia liczby elementów znajdujących się na liście rzeczydo zrobienia:

...<div class="page-header"> Lista rzeczy do zrobienia u ytkownika {{todo.user}}<span class="label label-default">{{todo.items.length}}</span></div>...

AngularJS oblicza wartość wyrażenia i wyświetla liczbę elementów znajdujących się w tablicy. Dzięki temuużytkownik wie, ile elementów znajduje się na liście rzeczy do zrobienia. Wspomniana liczba jest wyświetlanaw nagłówku dokumentu HTML (i sformatowana za pomocą klasy label zdefiniowanej przez Bootstrap CSS).

Wskazówka Wyra enia nale y wykorzystywa jedynie do przeprowadzania prostych operacji niezb dnych doprzygotowania danych do wy wietlenia. Nie u ywaj polece do czania danych w celu wykonywania skomplikowanejlogiki lub operacji na modelu, poniewa s to zadania przeznaczone dla kontrolera. Bardzo cz sto mo na spotka siz logik , któr trudno zaklasyfikowa jako odpowiedni dla widoku lub kontrolera, a podj cie decyzji, co zrobi z tegorodzaju kodem, równie mo e by trudne. Moja rada brzmi: nie przejmuj si . Dokonaj wyboru i nie spowalniaj prac,logik zawsze mo na pó niej przenie w inne miejsce, je li zajdzie potrzeba. Je eli naprawd nie wiesz, co zrobi ,najlepiej umie logik w kontrolerze. W 60% przypadków takie rozwi zanie okazuje si w a ciw decyzj .

U ycie dyrektywWyrażenia są używane także z dyrektywami, które wskazują AngularJS sposób przetwarzania wyświetlanejtreści. Na listingu 2.5 użyłem atrybutu ng-repeat stosującego dyrektywę nakazującą AngularJS wygenerowaniedla każdego obiektu w zbiorze elementu zawierającego wspomnianą dyrektywę i odpowiedniej zawartości:

...<tr ng-repeat="item in todo.items"> <td>{{item.action}}</td><td>{{item.done}}</td></tr>...

Wartość atrybutu ng-repeat jest podawana w formacie <nazwa> in <zbiór>. W omawianym listinguwyrażenie ma postać item in todo.items i oznacza wygenerowanie elementów <tr> i <td> dla każdegoobiektu w tablicy todo.items oraz przypisanie każdego obiektu tablicy do zmiennej o nazwie item.

Za pomocą zmiennej item można zdefiniować wyrażenie dołączania danych dla właściwości każdegoobiektu w tablicy i tym samym otrzymać przedstawiony poniżej kod HTML:...<tr ng-repeat="item in todo.items" class="ng-scope"> <td class="ng-binding">Kupi kwiaty</td> <td class="ng-binding">false</td></tr><tr ng-repeat="item in todo.items" class="ng-scope"> <td class="ng-binding">Kupi buty</td> <td class="ng-binding">false</td></tr><tr ng-repeat="item in todo.items" class="ng-scope"> <td class="ng-binding">Odebra bilety</td> <td class="ng-binding">true</td></tr>





42

<tr ng-repeat="item in todo.items" class="ng-scope"> <td class="ng-binding">Zadzwoni do Janka</td> <td class="ng-binding">false</td></tr>...

Jak zobaczysz w dalszych rozdziałach książki, dyrektywy stanowią podstawę sposobu działania AngularJS,a ng-repeat to jedna z najczęściej używanych dyrektyw.

Wyj cie poza podstawyNa tym etapie zdefiniowaliśmy podstawowe komponenty wzorca MVC. W ten sposób powstała dynamicznawersja aplikacji, której statyczną atrapę przygotowaliśmy na początku rozdziału. Mając już opanowane solidnepodstawy, możemy przystąpić do użycia pewnych znacznie bardziej zaawansowanych technik w celu dodanianowych funkcji i zbudowania nieco bardziej rozbudowanej aplikacji. W kolejnych punktach w tworzonejaplikacji listy rzeczy do zrobienia wykorzystamy różne funkcje AngularJS. Wskażę też rozdziały książki,w których dowiesz się nieco więcej o wspomnianych funkcjach.

Użycie dwukierunkowego dołączania modeluZastosowane w omawianym przykładzie dołączanie nosi nazwę dołączania jednokierunkowego — wartości sąpobierane z modelu, a następnie wstawiane w elementach szablonu. Ta technika jest całkiem standardowai dość powszechnie stosowana w programowaniu sieciowym. Na przykład podczas pracy z biblioteką jQuerybardzo często używam pakietu szablonu Handlebars, który zapewnia wspomniany rodzaj dołączania danychi jest użyteczny do generowania kodu znaczników HTML na podstawie obiektów danych.

AngularJS idzie o krok dalej i zapewnia dołączanie dwukierunkowe — model jest używany w celuwygenerowania elementów, a zmiany elementu powodują wprowadzenie odpowiednich modyfikacji w modelu.Aby zademonstrować implementację dołączania dwukierunkowego, zmodyfikujemy plik todo.html (patrzlisting 2.6). Po wprowadzonej zmianie stan każdego zadania do wykonania będzie wskazywany przez polewyboru.

Listing 2.6. Dodanie pól wyboru do pliku todo.html

...<tr ng-repeat="item in todo.items"> <td>{{item.action}}</td> <td><input type="checkbox" ng-model="item.done" /></td> <td>{{item.done}}</td></tr>...

W tabeli umieściliśmy nowy element <td> przeznaczony do przechowywania elementu <input> w postacipola wyboru. Najważniejszym dodatkiem jest tutaj atrybut ng-model nakazujący AngularJS utworzeniedwukierunkowego wiązania między wartością elementu <input> i właściwością done odpowiadającego muobiektu danych (to będzie obiekt przypisany przez dyrektywę ng-repeat zmiennej item podczas generowaniaelementów).

Po pierwszej kompilacji kodu HTML biblioteka AngularJS wykorzysta wartość właściwości done w celuustawienia wartości elementu <input>. Ponieważ używane jest pole wyboru, więc wartość true powodujezaznaczenie pola, natomiast false usunięcie zaznaczenia pola. Efekt wprowadzonej zmiany możesz zobaczyćw przeglądarce internetowej po wyświetleniu w niej dokumentu todo.html (patrz rysunek 2.4). Jak możeszdostrzec, stan pól wyboru odpowiada wartościom true i false, które pozostawiono w tabeli, aby tym samymułatwić demonstrację sposobu działania funkcji dołączania danych.





43

Rysunek 2.4. Dodanie pól wyboru do tworzonej aplikacji

Działanie dwukierunkowego dołączania danych stanie się oczywiste, jeśli zaznaczysz pierwszy elementlisty i później usuniesz jego zaznaczenie — powinieneś zauważyć, że zaznaczenie lub usunięcie zaznaczeniapola wyboru powoduje również zmianę wartości tekstowej w kolumnie znajdującej się po prawej stronie pola.AngularJS stosuje dynamiczne dołączanie wartości. Dwukierunkowe dołączanie danych (takie jak zastosowanetutaj dla elementu <input>) powoduje uaktualnienie modelu, co z kolei prowadzi do uaktualnienia innychelementów opartych na dołączaniu danych. W omawianym przykładzie wartości elementu <input> i prawejkolumny są ze sobą zsynchronizowane, jak pokazano na rysunku 2.5.

Rysunek 2.5. Użycie dwukierunkowego dołączania danych





44

Dwukierunkowe dołączanie danych może być stosowane dla elementów pobierających dane wejścioweod użytkownika, co w praktyce oznacza elementy formularzy sieciowych HTML. Temat formularzy sieciowychbędzie dokładnie omówiony w rozdziale 12. Dzięki dynamicznemu i „żywemu” modelowi tworzenieskomplikowanych aplikacji z użyciem AngularJS stało się bardzo łatwe. W książce zobaczysz wieleprzykładów dynamicznego zachowania AngularJS.

Wskazówka Warto ci true i false w prawej kolumnie s wy wietlane, aby u atwi Ci dostrze enie efektuzastosowania dwukierunkowego do czania danych. W rzeczywistych projektach zwykle nie nale y wy wietla tychwarto ci. Na szcz cie rozszerzenie Batarang dla przegl darki internetowej Google Chrome znacznie u atwia przegl daniei monitorowanie modelu (a tak e innych funkcji AngularJS). Wi cej informacji o rozszerzeniu Batarang znajdzieszw rozdziale 1.

Zdefiniowanie i stosowanie funkcji w kontrolerachKontrolery definiują funkcje w zdefiniowanym zakresie. Wspomniane funkcje operują na danych w modelui są odpowiedzialne za implementację logiki biznesowej w aplikacji. Funkcje zdefiniowane przez kontrolerpozwalają na wyświetlenie danych użytkownikowi oraz na uaktualnienie modelu na podstawie działańpodejmowanych przez użytkownika.

W celu zademonstrowania prostej funkcji zmienimy etykietę wyświetlaną po prawej stronie nagłówkanaszej aplikacji. Po wprowadzeniu zmiany etykieta będzie wyświetlała jedynie liczbę niewykonanych jeszczezadań. Zmiany konieczne do wprowadzenia przedstawiono na listingu 2.7. Przy okazji usuwamy prawąkolumnę wyświetlającą wartości true i false, ponieważ była nam potrzebna jedynie do pokazania efektuzmian w modelu danych zachodzących na skutek działania dwukierunkowego dołączania danych.

Listing 2.7. Zdefiniowanie i zastosowanie funkcji kontrolera w pliku todo.html

<!DOCTYPE html><html ng-app="todoApp"><head> <title>Lista rzeczy do zrobienia</title> <link href="bootstrap.css" rel="stylesheet" /> <link href="bootstrap-theme.css" rel="stylesheet" /> <script src="angular.js"></script> <script> var model = { user: "Adam", items: [{ action: "Kupi kwiaty", done: false }, { action: "Kupi buty", done: false }, { action: "Odebra bilety", done: true }, { action: "Zadzwoni do Janka", done: false }] };


todoApp.controller("ToDoCtrl", function ($scope) { $scope.todo = model;

$scope.incompleteCount = function () { var count = 0; angular.forEach($scope.todo.items, function (item) { if (!item.done) { count++ } }); return count; }





45

}); </script></head><body ng-controller="ToDoCtrl"> <div class="page-header"> <h1> Lista rzeczy do zrobienia u ytkownika {{todo.user}} <span class="label label-default" ng-hide="incompleteCount() == 0"> {{incompleteCount()}} </span> </h1> </div> <div class="panel"> <div class="input-group"> <input class="form-control" /> <span class="input-group-btn"> <button class="btn btn-default">Dodaj</button> </span> </div> <table class="table table-striped"> <thead> <tr> <th>Opis</th> <th>Zrobione</th> </tr> </thead> <tbody> <tr ng-repeat="item in todo.items"> <td>{{item.action}}</td> <td><input type="checkbox" ng-model="item.done" /></td> </tr> </tbody> </table> </div></body></html>

Funkcja jest definiowana przez dodanie jej do obiektu $scope przekazywanego funkcji kontrolera. Nalistingu 2.7 zdefiniowano funkcję zwracającą liczbę jeszcze niewykonanych zadań. Wspomniana liczba jestokreślana przez zliczenie obiektów tablicy $scope.todo.items, których wartością właściwości done jest false.

Wskazówka Do zliczenia liczby elementów tablicy wykorzystali my metod angular.forEach(). Biblioteka AngularJSzawiera wiele u ytecznych metod pomocniczych uzupe niaj cych mo liwo ci j zyka JavaScript. Wspomniane metodypomocnicze zostan omówione w rozdziale 5.

Nazwa właściwości użytej w celu dołączenia funkcji do obiektu $scope jest nazwą danej funkcji.W omawianym przykładzie funkcja nosi nazwę incompleteCount() i może być wywołana w zakresieatrybutu ng-controller, który powoduje dołączenie kontrolera do elementów HTML tworzących widok.

Na listingu 2.7 funkcja incompleteCount() została użyta dwukrotnie. Po raz pierwszy w celu prostegodołączenia wartości wskazującej na liczbę elementów:

...<span class="label label-default" ng-hide="incompleteCount() == 0"> {{incompleteCount()}}</span>...





46

Zwróć uwagę na wywołanie funkcji z wykorzystaniem nawiasów klamrowych. Ponieważ argumentamifunkcji mogą być obiekty, to możliwe jest zdefiniowanie ogólnego przeznaczenia funkcji gotowej do użyciaz różnymi obiektami danych. Budowana przez nas aplikacja jest na tyle prosta, że nie przekazujemy żadnychargumentów funkcji. Zamiast tego pobieramy wymagane dane bezpośrednio z obiektu $scope w kontrolerze.

Po raz drugi funkcja została użyta w połączeniu z dyrektywą:

...<span class="label default" ng-hide="incompleteCount() == 0"> {{incompleteCount()}}</span>...

Dyrektywa ng-hide powoduje ukrycie elementu i jego zawartości, jeżeli wartością wyrażenia przypisanegojako atrybut dyrektywy będzie true. W omawianym przykładzie następuje wywołanie funkcji incompleteCount()i sprawdzenie, czy liczba zadań do wykonania wynosi 0. Jeżeli nie ma żadnych rzeczy do wykonania, to etykietawyświetlająca liczbę zadań pozostałych do wykonania zostanie ukryta.

Wskazówka Dyrektywa ng-hide to tylko jedna z wielu przeznaczonych do przeprowadzania operacji na obiektowymmodelu dokumentu (ang. Document Object Model) automatycznie na podstawie stanu modelu AngularJS. Szczegó oweomówienie dyrektyw znajdziesz w rozdziale 11., natomiast temat tworzenia w asnych dyrektyw b dzie poruszonyw rozdzia ach od 15. do 17.

Efekt działania zdefiniowanej funkcji możesz zobaczyć w przeglądarce internetowej po wyświetleniu w niejdokumentu todo.html (patrz rysunek 2.6). Jak możesz dostrzec, zaznaczenie lub usunięcie zaznaczenia polawyboru powoduje zmianę liczby wyświetlanej przez etykietę w nagłówku. Zaznaczenie wszystkich elementówpowoduje ukrycie etykiety.

Rysunek 2.6. Efekt użycia funkcji zdefiniowanej w kontrolerze

Użycie funkcji w zależności od innych zdefiniowanych funkcjiJednym z tematów nieustannie przewijających się przez społeczność AngularJS jest możliwość wykorzystanianaturalnych cech charakterystycznych HTML, CSS i JavaScript do tworzenia aplikacji sieciowych. Na przykładfunkcje kontrolera są definiowane za pomocą funkcji JavaScript. Istnieje więc możliwość przygotowaniafunkcji opartych na możliwościach oferowanych przez inne funkcje zdefiniowane w tym samym kontrolerze.Na listingu 2.8 przedstawiono przykład funkcji pobierającej klasę CSS na podstawie liczby niewykonanychzadań na liście rzeczy do zrobienia.




47

Listing 2.8. Utworzenie funkcji, której działanie jest oparte na innej funkcji zdefiniowanej w kontrolerze

<!DOCTYPE html><html ng-app="todoApp"><head> <title>Lista rzeczy do zrobienia</title> <link href="bootstrap.css" rel="stylesheet" /> <link href="bootstrap-theme.css" rel="stylesheet" /> <script src="angular.js"></script> <script> var model = { user: "Adam", items: [{ action: "Kupi kwiaty", done: false }, { action: "Kupi buty", done: false }, { action: "Odebra bilety", done: true }, { action: "Zadzwoni do Janka", done: false }] };




$scope.warningLevel = function () { return $scope.incompleteCount() < 3 ? "label-success" : "label-warning"; } }); </script></head><body ng-controller="ToDoCtrl"> <div class="page-header"> <h1> Lista rzeczy do zrobienia u ytkownika {{todo.user}} <span class="label label-default" ng-class="warningLevel()" ng-hide="incompleteCount() == 0"> {{incompleteCount()}} </span> </h1> </div> </body></html>

Na listingu zdefiniowaliśmy nową funkcję o nazwie warningLevel, która zwraca nazwę klasy BootstrapCSS na podstawie liczby pozostałych do wykonania zadań na liście rzeczy do zrobienia określonej przezwywołanie funkcji incompleteCount(). Tego rodzaju podejście zmniejsza ilość powielonego kodu w kontrolerzei jak się przekonasz w rozdziale 25., może znacznie ułatwić proces przeprowadzania testów jednostkowych.

Możliwość użycia funkcji warningLevel() została wskazana dyrektywą ng-class w następujący sposób:


48

...<span class="label" ng-class="warningLevel()" ng-hide="incompleteCount() == 0">...

Dyrektywa powoduje użycie klasy CSS wskazanej przez funkcję. Efektem jest zmiana koloru etykietyw dokumencie HTML, jak pokazano na rysunku 2.7. Pełne omówienie dyrektyw AngularJS znajdzieszw części II książki, natomiast temat tworzenia własnych dyrektyw będzie poruszony w rozdziałach od 15. do 17.

Rysunek 2.7. Użycie dyrektywy w celu zastosowania klasy dla elementów

Wskazówka Zwró uwag na istnienie w elemencie <span> dwóch dyrektyw, z których ka da opiera si na innejfunkcji. Mo esz dowolnie czy funkcje i dyrektywy, aby w ten sposób uzyska efekt wymagany w aplikacji. By mo e trudno to dostrzec w drukowanej wersji ksi ki, ale etykieta jest wy wietlana w kolorze zielonym,gdy do wykonania zosta y trzy zadania lub mniej. W przeciwnym razie kolor etykiety jest pomara czowy.

Reakcja na działania użytkownikaZobaczyłeś, jak funkcje i dyrektywy mogą być ze sobą łączone w celu przygotowania funkcjonalności oferowanychprzez aplikację. Wspomniane połączenie zapewnia bardzo dużą funkcjonalność w aplikacji AngularJS. Jedenz najlepszych efektów połączeń uzyskujemy, gdy dyrektywy i funkcje są używane do reakcji na działaniapodejmowane przez użytkownika. Na listingu 2.9 przedstawiono wprowadzone w pliku todo.html modyfikacje,które pozwalają użytkownikowi na tworzenie nowych zadań do wykonania.

Listing 2.9. Dodanie kodu pozwalającego aplikacji reagować na działania użytkownika

<!DOCTYPE html><html ng-app="todoApp"><head> <title>Lista rzeczy do zrobienia</title> <link href="bootstrap.css" rel="stylesheet" /> <link href="bootstrap-theme.css" rel="stylesheet" /> <script src="angular.js"></script>





49

<script> var model = { user: "Adam", items: [{ action: "Kupi kwiaty", done: false }, { action: "Kupi buty", done: false }, { action: "Odebra bilety", done: true }, { action: "Zadzwoni do Janka", done: false }] };


todoApp.controller("ToDoCtrl", function ($scope) { $scope.todo = model; $scope.incompleteCount = function () { var count = 0; angular.forEach($scope.todo.items, function (item) { if (!item.done) { count++ } }); return count; }

$scope.warningLevel = function () { return $scope.incompleteCount() < 3 ? "label-success" : "label-warning"; }

$scope.addNewItem = function (actionText) { $scope.todo.items.push({ action: actionText, done: false }); } }); </script></head><body ng-controller="ToDoCtrl"> <div class="page-header"> <h1> Lista rzeczy do zrobienia u ytkownika {{todo.user}} <span class="label label-default" ng-class="warningLevel()" ng-hide="incompleteCount() == 0"> {{incompleteCount()}} </span> </h1> </div> <div class="panel"> <div class="input-group"> <input class="form-control" ng-model="actionText" /> <span class="input-group-btn"> <button class="btn btn-default" ng-click="addNewItem(actionText)">Dodaj</button> </span> </div> <table class="table table-striped"> <thead> <tr> <th>Opis</th> <th>Zrobione</th> </tr> </thead> <tbody> <tr ng-repeat="item in todo.items">





50

<td>{{item.action}}</td> <td><input type="checkbox" ng-model="item.done" /></td> </tr> </tbody> </table> </div></body></html>

W aplikacji zdefiniowaliśmy funkcję o nazwie addNewItem(), która pobiera tekst nowego zadania dowykonania, a następnie dodaje obiekt do modelu danych. Wspomniany tekst jest używany jako wartośćwłaściwości action, natomiast wartością właściwości done jest false:

...$scope.addNewItem = function(actionText) { $scope.todo.items.push({ action: actionText, done: false});}...

To jest pierwsza przedstawiona funkcja modyfikująca model. W projektach rzeczywistych aplikacji zwykleistnieje mniej więcej równy podział między funkcjami pobierającymi i przygotowującymi dane dla widokua reagującymi na działania użytkownika i odpowiednio uaktualniającymi model. Zwróć uwagę, że przedstawionafunkcja została zdefiniowana jako standardowa funkcja JavaScript, a uaktualnienie modelu jest możliwez wykorzystaniem metody push() używanej przez JavaScript do obsługi tablic.

Zaleta omawianego przykładu kryje się w zastosowaniu dwóch dyrektyw. Oto pierwsza z nich:

...<input class="form-control" ng-model="actionText" />...

To jest dokładnie ta sama dyrektywa ng-model, którą wykorzystaliśmy wcześniej do konfiguracji pólwyboru. Wielokrotnie spotkasz tę dyrektywę podczas pracy z elementami formularza. Warto zwrócić uwagę napodanie nazwy właściwości uaktualnianej przez dyrektywę — nie jest ona częścią modelu. Dyrektywa ng-modeldynamicznie utworzy właściwość w zakresie kontrolera. W ten sposób umożliwia dynamiczne tworzeniewłaściwości modelu przeznaczonych do obsługi danych wejściowych dostarczanych przez użytkownika.Właściwość dynamiczna została użyta w drugiej dyrektywie omawianego przykładu:

...<button class="btn btn-default" ng-click="addNewItem(actionText)">Dodaj</button>...

Dyrektywa ng-click konfiguruje procedurę obsługi odpowiedzialną za obliczenie wyrażenia po wywołaniuzdarzenia click. W omawianym przykładzie wyrażenie wywołuje funkcję addNewItem() i przekazuje argumentw postaci właściwości dynamicznej actionText. Efektem jest dodanie do listy nowego zadania do wykonaniawraz z tekstem podanym przez użytkownika w polu danych wejściowych (patrz rysunek 2.8).

Wskazówka Prawdopodobnie przyj e zasad , aby nie dodawa adnego kodu obs ugi zdarze do poszczególnychelementów. Dlatego te zastosowanie dyrektywy ng-click w elemencie <button> mo e wydawa si dziwne. Nieprzejmuj si tym. Kiedy biblioteka AngularJS kompiluje plik HTML i napotyka wymienion dyrektyw , to konfigurujeprocedur obs ugi, stosuj c podej cie dyskretnego kodu JavaScript — kod procedury obs ugi zdarze b dzie oddzielonyod elementu. Bardzo wa ne jest odró nianie dyrektyw AngularJS od generowanego w trakcie kompilacji na ich podstawiekodu HTML i JavaScript. Zwró uwag , e etykieta wy wietlaj ca liczb zada do wykonania jest automatycznie uaktualniana po dodaniunowego elementu do listy. Jedn z zalet stosowanego przez AngularJS modelu aplikacji jest to, e wspó dzia aniepolece do czania danych i zdefiniowanych funkcji tworzy podstaw dla funkcjonalno ci aplikacji.





51

Rysunek 2.8. Użycie funkcji i dyrektyw w celu utworzenia nowych elementów listy rzeczy do zrobienia

Filtrowanie i zmiana kolejności danych modeluW rozdziale 14. zostanie omówiona funkcja filtrowania w AngularJS, która zapewnia elegancki sposóbprzygotowania danych w modelu do wyświetlania w widoku bez konieczności definiowania własnych funkcji.Wprawdzie nie ma nic złego w definiowaniu funkcji, ale filtry są z reguły rozwiązaniami ogólnego przeznaczeniai dlatego można wielokrotnie korzystać z nich w aplikacji. Na listingu 2.10 przedstawiono zmiany wprowadzonew pliku todo.html mające na celu zademonstrowanie operacji filtrowania.

Listing 2.10. Dodanie funkcji filtrowania do pliku todo.html

...<tbody> <tr ng-repeat="item in todo.items | filter:{done: false} | orderBy:'action'"> <td>{{item.action}}</td> <td><input type="checkbox" ng-model="item.done" /></td> </tr></tbody>...

Filtrowanie można przeprowadzić na dowolnej części danych modelu. Jak możesz zobaczyć, w omawianejaplikacji filtry wykorzystaliśmy do wskazania danych używanych przez dyrektywę ng-repeat, a następnieumieszczanych na liście rzeczy do zrobienia. Tutaj zastosowaliśmy dwa filtry: filter (irytująca nazwa dla takużytecznego komponentu) i orderBy.

Filtr filter wybiera obiekty na podstawie zdefiniowanych w nim kryteriów. Zdecydowaliśmy się nawybór elementów, dla których wartością właściwości done jest false. Oznacza to, że wykonane zadania niebędą wyświetlane na liście rzeczy do zrobienia. Z kolei filtr orderBy sortuje elementy danych i został użytydo posortowania listy względem wartości właściwości action. Szczegółowe omówienie filtrów znajdzieszw rozdziale 14. Efekt zastosowania wymienionych filtrów możesz zobaczyć w przeglądarce internetowejpo wyświetleniu w niej dokumentu todo.html (patrz rysunek 2.9). Dodaj nowe zadanie do wykonania,a następnie kliknij pole wyboru w kolumnie Zrobione.





52

Rysunek 2.9. Użycie filtrowania i zmiany kolejności elementów

Wskazówka Zwró uwag , e podczas u ycia filtru orderBy w a ciwo , wed ug której nast puje sortowanie, jestpodawana w postaci dos ownego ci gu tekstowego uj tego w apostrofy. Domy lnie w bibliotece AngularJS przyj toza o enie, e wszystko jest w a ciwo ci zdefiniowan w danym zakresie. W przypadku braku znaków cytowaniab dzie wyszukiwana w a ciwo o nazwie action. Tego rodzaju rozwi zanie jest u yteczne w trakcie programowegodefiniowania warto ci, ale jednocze nie wymaga pami tania o u yciu dos ownych ci gów tekstowych, je li zachodzipotrzeba wskazania sta ej.

Gdy do listy zostanie dodany nowy element, będzie wstawiony z zachowaniem kolejności alfabetycznej.Natomiast po zaznaczeniu pola wyboru dany element zostanie ukryty. (Dane w modelu nie są sortowane.Operacja sortowania jest przeprowadzana podczas przetwarzania dyrektywy ng-repeat w celu przygotowaniawierszy tabeli).

Usprawnienie filtruW poprzednim przykładzie zademonstrowano działanie operacji filtrowania. Otrzymany wynik jest jednakpraktycznie bezużyteczny, ponieważ zaznaczone zadania na zawsze pozostają ukryte przed użytkownikiem.Na szczęście bardzo łatwo można utworzyć własny filtr, jak przedstawiono na listingu 2.11.

Listing 2.11. Utworzenie własnego filtru w pliku todo.html

...<script> var model = { user: "Adam", items: [{ action: "Kupi kwiaty", done: false }, { action: "Kupi buty", done: false }, { action: "Odebra bilety", done: true }, { action: "Zadzwoni do Janka", done: false }], };





53


todoApp.filter("checkedItems", function () { return function (items, showComplete) { var resultArr = []; angular.forEach(items, function (item) { if (item.done == false || showComplete == true) { resultArr.push(item); } }); return resultArr; } });

todoApp.controller("ToDoCtrl", function ($scope) { $scope.todo = model; // ... pominięto w celu zachowania zwięzłości ... });</script>...

Metoda filter() definiowana przez moduł AngularJS jest używana w celu utworzenia fabryki filtrów,która zwraca funkcję stosowaną do filtrowania zbioru obiektów danych. W tym momencie nie przejmuj sięużyciem wyrażenia fabryka. Wystarczy wiedzieć, że użycie metody filter() wymaga przekazania funkcji,której wartością zwrotną jest inna funkcja odpowiedzialna za dostarczenie przefiltrowanych danych.W omawianym przykładzie filtr otrzymał nazwę checkedItems, natomiast funkcja rzeczywiście przeprowadzającafiltrowanie ma dwa argumenty:

...return function (items, showComplete) {...

Argument items będzie dostarczony przez AngularJS; to zbiór obiektów przeznaczonych do filtrowania.Zapewnia wartość dla argumentu showComplete po zastosowaniu filtru i jest używany do określenia, czyzadania oznaczone jako wykonane mają być uwzględnione w filtrowanych danych. Sposób zastosowaniawłasnego filtru przedstawiono na listingu 2.12.

Listing 2.12. Przykład zastosowania własnego filtru w pliku todo.html

...<div class="panel"> <div class="input-group"> <input class="form-control" ng-model="actionText" /> <span class="input-group-btn"> <button class="btn btn-default" ng-click="addNewItem(actionText)">Dodaj</button> </span> </div>

<table class="table table-striped"> <thead> <tr> <th>Opis</th> <th>Zrobione</th> </tr> </thead> <tbody>





54

<tr ng-repeat= "item in todo.items | checkedItems:showComplete | orderBy:'action'"> <td>{{item.action}}</td> <td><input type="checkbox" ng-model="item.done" /></td> </tr> </tbody> </table>

<div class="checkbox-inline"> <label><input type="checkbox" ng_model="showComplete"> Poka zako czone</label> </div></div>...

Do aplikacji dodaliśmy pole wyboru używające dyrektywy ng-model w celu ustawienia wartości modeluo nazwie showComplete; wartość ta jest przekazywana zdefiniowanemu wcześniej własnemu filtrowiw dyrektywie ng-repeat w tabeli.

...<tr ng-repeat="item in todo.items | checkedItems:showComplete | orderBy:'action'">...

Składnia własnych filtrów jest dokładnie taka sama jak dla filtrów wbudowanych. W omawianymprzykładzie podaliśmy nazwę filtru tworzonego z wykorzystaniem metody filter(), następnie dwukropek,a dalej nazwę właściwości modelu, która ma być przekazana funkcji filtru. Użyliśmy właściwości modelushowComplete, co oznacza, że stan pola wyboru będzie wykorzystany do kontrolowania wyświetlania na liściezakończonych zadań. Efekt wprowadzonych zmian pokazano na rysunku 2.10.

Rysunek 2.10. Skutek użycia własnego filtru





55

Pobieranie danych z wykorzystaniem technologii AjaxOstatnią zmianą wprowadzoną w aplikacji będzie pobieranie danych jako danych w formacie JSONz wykorzystaniem żądań Ajax. (Dokładne omówienie formatu JSON znajdziesz w rozdziale 5.). W kataloguangularjs tworzymy plik o nazwie todo.json i umieszczamy w nim dane przedstawione na listingu 2.13.

Listing 2.13. Zawartość pliku todo.json

[{ "action": "Kupi kwiaty", "done": false }, { "action": "Kupi buty", "done": false }, { "action": "Odebra bilety", "done": true }, { "action": "Zadzwoni do Janka", "done": false }]

Jak możesz zobaczyć, dane w formacie JSON są podobne do dosłownych obiektów JavaScript. To jestgłówny powód, dla którego JSON jest formatem dominującym w aplikacjach sieciowych. Na listingu 2.14przedstawiono zmiany, jakie trzeba wprowadzić w dokumencie todo.html, aby móc wczytywać dane z plikutodo.json, zamiast używać lokalnie zdefiniowanej tablicy.

Listing 2.14. Wykonywanie żądań Ajax w celu pobierania danych w formacie JSON

...<script> var model = { user: "Adam" };


todoApp.run(function ($http) { $http.get("todo.json").success(function (data) { model.items = data; }); });

todoApp.filter("checkedItems", function () { return function (items, showComplete) { var resultArr = []; angular.forEach(items, function (item) { if (item.done == false || showComplete == true) { resultArr.push(item); } }); return resultArr; } });







56

$scope.warningLevel = function () { return $scope.incompleteCount() < 3 ? "label-success" : "label-warning"; }

$scope.addNewItem = function(actionText) { $scope.todo.items.push({ action: actionText, done: false}); } });</script>...

Usunęliśmy tablicę items ze statycznie zdefiniowanego modelu dodanych oraz dodaliśmy wywołanie metodyrun() zdefiniowanej przez moduł AngularJS. Wymieniona metoda run() pobiera funkcję wywoływanąpo przeprowadzeniu przez AngularJS początkowej konfiguracji i używaną do jednorazowych zadań.

Argumentem funkcji przekazywanej metodzie run() jest $http, który nakazuje AngularJS użycie obiektuusługi zapewniającego obsługę żądań Ajax. Zastosowanie argumentów wskazujących bibliotece AngularJSwymagane funkcje jest częścią podejścia nazywanego wstrzykiwaniem zależności, które będzie tematemrozdziału 9.

Usługa $http zapewnia dostęp do niskiego poziomu żądań Ajax. W omawianym przykładzie wyrażenie„niski poziom” wcale nie oznacza zbyt niskiego poziomu, przynajmniej w porównaniu z usługą $resourcesużywaną do pracy z usługami sieciowymi RESTful. (Usługi sieciowe RESTful i obiekt usługi $resourceszostaną omówione w rozdziale 21.). W przedstawionym przykładzie zastosowaliśmy metodę $http.get()w celu wykonania żądania HTTP GET do serwera i pobrania pliku todo.json:

...$http.get("todo.json").success(function (data) { model.items = data;});...

Wynikiem zwróconym przez metodę get() jest tak zwana obietnica, czyli obiekt używany do przedstawieniazadania, którego wykonywanie zakończy się w przyszłości. Sposób działania obietnic będzie przedstawionyw rozdziale 5., natomiast ich szczegółowe omówienie znajdziesz w rozdziale 20. Teraz wystarczy wiedzieć,że wywołanie metody success() obiektu obietnicy pozwala na wskazanie funkcji, która będzie wywołana pozakończeniu żądania Ajax do serwera. Dane pobrane z serwera zostaną przetworzone w celu utworzeniaobiektu JavaScript i przekazane funkcji success() jako argument data. W omawianym przykładziewspomniane dane wykorzystujemy do uaktualnienia modelu:

...$http.get("todo.json").success(function (data) { model.items = data;});...

Jeżeli w przeglądarce internetowej wyświetlisz plik todo.html, to nie zobaczysz żadnej różnicy w sposobiedziałania aplikacji. Jednak dane zostały pobrane z serwera za pomocą drugiego żądania HTTP. Możesz się o tymprzekonać, używając narzędzi F12 i przeglądając informacje o połączeniach sieciowych (patrz rysunek 2.11).

Konieczność potwierdzenia z wykorzystaniem przeglądarki internetowej faktu użycia żądań Ajax pokazuje,jak biblioteka AngularJS ułatwia pracę z zewnętrznymi plikami i danymi. Do tego będziemy jeszcze powracaćw książce, ponieważ stanowi to fundament dla wielu funkcji, które AngularJS udostępnia w celu utworzeniaznacznie bardziej złożonych aplikacji sieciowych.





57

Rysunek 2.11. Potwierdzenie otrzymania danych za pomocą żądania Ajax

PodsumowanieW tym rozdziale zobaczyłeś, jak utworzyć pierwszą, prostą aplikację AngularJS. Pracę rozpoczęliśmyod statycznej atrapy HTML, a następnie opracowaliśmy aplikację dynamiczną opartą na wzorcu MVCi pobierającą z serwera WWW dane w formacie JSON. W trakcie pracy zetknęliśmy się z wszystkiminajważniejszymi komponentami i funkcjami udostępnianymi programistom przez AngularJS. Ponadtodowiedziałeś się, w których rozdziałach książki szukać dokładniejszych informacji o poszczególnychkomponentach.

Skoro zobaczyłeś, jak używać biblioteki AngularJS, teraz możemy wykonać krok wstecz i poznać pewneszczegóły dotyczące kontekstu, w którym istnieje AngularJS. Rozpoczniemy od wzorca MVC, który dokładniezostanie omówiony w kolejnym rozdziale.





58




Skorowidz

Aadres URL, 475, 478Ajax, 55, 502akcje, 548akcje obiektu dostępu, 545AngularJS w kontekście, 59animacje, 215

CSS3, 575jednoczesne, 579

animowanieelementów, 575przejść, 577

API, 601DOM, 471Fluent, 220History, 478RESTful, 203, 531

aplikacjaadministracyjna, 194Deployd, 132SportsStore, 131, 157

aplikacjeAngularJS, 211dwukierunkowe, 60

atrapa usługi$httpBackend, 607$interval, 608$log, 611$timeout, 608

atrapy obiektów, 601, 604atrybut, 74

highlight, 223ng-app, 214

ng-controller, 40, 219ng-repeat, 41required, 295

atrybutyboolowskie, 279, 281dla pola wyboru, 308elementów <input>, 307niestandardowe, 35weryfikacji, 294

Bbiblioteka

AngularJS, 26, 33jqLite, 165jQuery, 387

błędy Ajax, 159Bootstrap CSS, 91

CCRUD, 66CSS, Cascading Style Sheets, 77cykl życiowy modułu, 232

Ddane

adresowe, 179asynchroniczne, 549JSON, 508produkcyjne, 157REST, 545widoku, 65




Skorowidz

620

definiowanieadresów URL tras, 557animacji, 577dyrektywy, 221, 375filtru, 223funkcji JavaScript, 95funkcji kontrolera, 189funkcji z parametrami, 95funkcji zwracającej wartość, 96komponentów AngularJS, 214kontrolera, 148, 215kontrolera RESTful, 203restrykcyjnych opcji, 403skomplikowanych dyrektyw, 402tras, 170, 563usługi, 226wartości, 228widoku, 190, 205widoku głównego, 198widoku uwierzytelnienia, 197

dekrementacja wartości, 600dodawanie

atrybutów konfiguracji, 550atrybutów niestandardowych, 35biblioteki AngularJS, 33danych, 134, 529dyrektywy, 165, 375, 441, 614dziedziczonych danych, 331dziedziczonych funkcji, 331elementów, 389elementu <form>, 293elementu <script>, 460, 540filtru, 224, 612formularza, 181funkcji filtrowania, 51funkcji monitorującej, 383kontrolera, 199, 217, 219nawigacji, 170obsługi tras, 561obsługiwanego atrybutu, 379odniesień, 206pól wyboru, 42, 43produktu do koszyka, 170przycisku, 168, 169rejestracji danych, 610stronicowania, 152testów, 609usługi, 616widoku, 218

zależności do tras, 570zależności modułu, 577żądania Ajax, 605

dodatki AngularJS, 26dokument HTML, 72dołączanie danych, data binding, 39, 43, 235, 239,

286, 487dwukierunkowe, 42, 241, 285, 426jednokierunkowe, 239, 423osadzone, 241

DOM, Document Object Model, 75, 263domknięcie, 385dosłowna tablica, 117dosłowny obiekt, 102dostarczanie danych lokalnych, 494, 495dostawca $httpProvider, 514dostęp do

adresu URL, 475API RESTful, 203, 204funkcji AngularJS, 398kolekcji, 192obiektów globalnych, 471obiektu document, 473obiektu window, 472parametrów tras, 564tras, 564

dwukierunkowe dołączaniedanych, 42, 241, 285, 426modelu, 42

dwukropek, 103dyrektywa, 41, 165, 236, 374

cartSummary, 166disabled, 281increment, 541ng-app, 138ng-bind-html, 487, 488ng-class, 249, 270, 276ng-class-even, 273ng-class-odd, 273ng-click, 50, 288, 581ng-cloak, 260ng-controller, 318ng-disabled, 185, 281ng-hide, 46, 161, 266, 268ng-href, 281ng-if, 267, 268ng-include, 162, 200, 251–256ng-model, 54, 286–290, 445ng-repeat, 141, 244–248




Skorowidz

621

ng-repeat-end, 250ng-repeat-start, 250ng-show, 266ng-src, 281ng-srcset, 281ng-style, 270, 272ng-switch, 256–258ng-transclude, 433ng-view, 172, 579promiseObserver, 525

dyrektywyatrybutu boolowskiego, 280dołączania danych, 238elementów, 265jako atrybut, 405jako element, 405jako komentarz, 406jako wartości atrybutu klasy, 406obsługujące animacje, 578skomplikowane, 401szablonów, 243zdarzeń, 274, 277

działania użytkownika, 48działanie koszyka na zakupy, 163dziedziczenie

funkcjonalności, 102kontrolerów, 319, 328, 330, 332

Eedycja danych, 207edytor tekstów, 24elastyczny układ, 88element, 73, 76

<a>, 146, 562<button>, 185<div>, 160<form>, 182, 293, 294<html>, 33, 76<input>, 184, 286, 302, 306–308<li>, 378, 499<meta>, 88<ol>, 390, 395<optgroup>, 313, 314<option>, 311, 312<panel>, 434<script>, 33, 93, 460, 540<select>, 310, 312<span>, 284

<style>, 183, 578<table>, 80, 86<tbody>, 436<textarea>, 309<thead>, 82<tr>, 271, 436<ul>, 498

elementyformularza sieciowego, 84, 185najwyższego poziomu, 250nawigacyjne, 146obiektu Module, 215, 459potomne, 389typu void, 75własne formularza, 443wyświetlające treść, 141

Ffabryka, 53, 222filtr, 223, 343–372

currency, 142, 346date, 346filter, 360json, 346, 353limitTo, 357, 366, 370lowercase, 346, 352number, 346orderBy, 51, 146, 362, 366pageCount, 154, 156range, 154skip, 370take, 371, 372unique, 144, 147uppercase, 346, 352

filtrowanie, 51kolekcji, 357produktów, 149

finalizacja zamówienia, 174, 176format

dosłownego obiektu, 102JSON, 55, 128

formatowaniedaty, 349, 351, 356wartości danych, 448wartości pieniężnych, 347, 348zlokalizowanych danych, 354

formaty danych, 68formularz, 83, 181–185, 283




Skorowidz

622

frameworkAngularJS, 19Bootstrap CSS, 27, 71, 77

funkcjaaddNetItem(), 288addUser(), 305beforeEach(), 600changeData(), 437cityFn(), 429compile, 435, 437createProduct(), 547editOrCreateProduct(), 535, 560editProduct(), 560fabryki, 317getCategoryClass(), 151getCity(), 429getCountry(), 319handleClick(), 341, 585incompleteCount(), 46incrementCounter(), 597inject(), 617it(), 617link, 376listProduct(), 537logClick(), 587printMessage(), 98reverseText(), 334setAddress(), 323shiftFour(), 331worker, 222

funkcjeAPI DOM, 472domknięć, 229dyrektyw, 431fabryki, 222filtrowania, 51Jasmine, 598JavaScript, 91konstruktora, 465kontrolera, 44, 189, 190monitorujące, 383operujące na danych, 533

Ggenerowanie

danych, 353elementów, 141, 245, 378elementów nawigacyjnych, 146

listy, 394łączy, 144wielu elementów, 250XML, 513

gest machnięcia, 581gesty, 581grupowanie obietnic, 524, 525

Hhierarchia zakresów, 336HTML, 71, 91HTML5, 477

IIIFE, 386implementacja

filtrów, 153uwierzytelniania, 195wzorca MVC, 62

informacje o produkcie, 140, 572instalacja

AngularJS, 136Bootstrap CSS, 136modułu ngAnimation, 576modułu ngMock, 594modułu ngResource, 542modułu ngRoute, 556modułu ngTouch, 581Node.js, 24serwera WWW, 25systemu przeznaczonego do testowania, 25

interceptor żądania, 515interpolacja ciągów tekstowych, 495

JJasmine, 597JavaScript, 91

definiowanie funkcji, 94funkcje z parametrami, 95funkcje zwracającej wartość, 96obiekty, 101obietnice, 124operatory, 110polecenia, 94tablice, 116typy, 99




Skorowidz

623

wartości specjalne, 120wykrywanie funkcji, 97wykrywanie obiektów, 104zmienne, 98

jawna konwersja typów, 114jednokierunkowe dołączanie danych, 239, 423jqLite, 387, 399jQuery, 61, 399jQuery UI, 338JSON, JavaScript Object Notation, 128

KKarma, 597katalog

AngularJS, 26produktów, 192, 203

klasagrid-row, 87ngFade.ng-enter, 578

klasyBootstrap, 79, 80, 87weryfikacji, 297

klucze obiektów danych, 246kolejność sortowania, 363kolekcja, 133, 529kolekcja użytkowników, 193kompilacja zawartości, 498komunikacja

dwukierunkowa, round-trip, 60między zakresami, 325

komunikat o błędzie, 161, 229konfiguracja

akcji usługi $resource, 548interpolacji, 496jQuery UI, 338oprogramowania Karma, 595routingu, 171, 174serwera Deployd, 187środowiska programistycznego, 23tras, 567usługi $resource, 544zakresu, 318żądań Ajax, 509

konstrukcje warunkowe, 110konstruktor, 317kontrola stanu przycisku, 340kontroler, 37, 62, 65, 315–342

ngModel, 446, 451

productListCtrl, 150tableCtrl, 572tomorrowCtrl, 220

kontrolerybez zakresu, 337monolityczne, 322najwyższego poziomu, 138w dyrektywach, 438

konwersjaciągów tekstowych, 115liczb, 114wyrażenia, 492

koszyk na zakupy, 163

Lliczba kliknięć, 457lista kategorii, 143logika

domeny, 68domeny biznesowej, 65, 68magazynu danych, 68modelu, 63

lokalizacja, 356lokalizacja danych, 354

łącza, 144łączenie

filtrów, 366kodu i znaczników, 559metod, 378obietnic, 126, 522

Mmagazyn danych, 68metoda

$apply(), 341$broadcast(), 327$get(), 547$http.get(), 158$injector.invoke(), 589$location.path(), 556, 560$log.log(), 612$q.defer(), 519$render, 446$route.reload(), 572




Skorowidz

624

metoda$routeProvider.when(), 558$sce.trustAsHtml(), 491$setViewValue(), 447$watch(), 341addProduct(), 165, 169angular.forEach(), 45angular.fromJson(), 129angular.isArray(), 377angular.isDefined(), 123angular.isFunction(), 98angular.isObject(), 104angular.isString(), 100angular.isUndefined(), 123angular.module(), 34, 137, 213, 230annotate(), 586appendTo(), 400assertEmpty(), 612children(), 388, 389concat(), 120config(), 232, 233constant(), 233controller(), 37, 148, 317css(), 223, 392decorator(), 585delete(), 67, 544directive(), 166, 222error(), 126, 482, 506expect(), 606, 607factory(), 461, 482, 572, 617filter(), 53, 143find(), 390flush(), 607, 609get(), 56, 127getProducts(), 165has(), 588html5Mode(), 478invoke(), 589join(), 120listProduct(), 537log(), 585Module.config(), 232Module.directive(), 278, 375Module.factory(), 164Module.run(), 232Module.service(), 464Module.value(), 228, 229on(), 278otherwise(), 195, 558

pop(), 120POST, 67provider(), 461, 466push(), 50, 120PUT, 67query(), 545removeProduct(), 165reset(), 612respond(), 606reverse(), 120run(), 232, 233scope.$apply(), 447service(), 228, 461, 464shift(), 120slice(), 120sort(), 120splice(), 120, 154success(), 125, 506then(), 126, 127, 507trustAsHtml(), 490unshift(), 120

metodydo obsługi tablic, 120HTTP, 67integracji zakresu, 338jqLite, 387, 391, 398konwersji, 116obiektu angular.mock, 602obiektu obietnicy, 521obiektu Resource, 546usługi $http, 505, 506usługi $httpBackend, 606usługi $injector, 586usługi $location, 475usługi $log, 481usługi $provide, 584usługi $q, 518usługi $route, 566weryfikacji, 451zakresu, 326

model, 37, 62, 63danych, 35domeny, 63widoku, 63

moduł, 213, 455customFilters, 145koszyka, 163ngAnimation, 576ngMock, 594, 601




Skorowidz

625

modułngResource, 542ngRoute, 556, 557ngTouch, 580, 581

modyfikacjadyrektywy, 226elementów, 391kontekstu stylu, 79obiektów danych, 546wielkości elementu, 79właściwości obiektu, 105zakresu, 320zawartości tablicy, 118

monitorowanie poprawności formularza, 295MVC, Model-View-Controller, 19, 35, 62

Nnadawanie stylu

komunikatom, 297tabeli, 267

nadpisywaniedanych, 332funkcji, 332

narzędzieLiveReload, 27Yeoman, 23

nawiasyklamrowe, 40kwadratowe, 106

nawigacja, 170, 562nazwa, name, 74

atrybutu, 74kontrolera, 38

niebezpieczne dane, 485niejawne tworzenie właściwości, 286niejawnie zdefiniowane właściwości modelu, 289

Oobiekt

$scope, 125angular.mock, 602deferred, 518definicji, 403document, 473dostępu, 545modelu danych, 289Module, 214, 226

newTodo, 289Resource, 546typu singleton, 226usługi, 462window, 472

obiektowy model dokumentu, 75obiekty

bez wartości, 229dodawanie metod, 108dodawanie właściwości, 107modyfikacja właściwości, 105rozbudowa, 103sprawdzanie identyczności, 112sprawdzanie równości, 112sprawdzenie właściwości, 109testowe, 601usuwanie właściwości, 107wykrywanie, 104wyświetlenie właściwości, 106

obietnice, 124, 516, 521obliczanie wartości wyrażeń, 41, 380–382, 428obsługa

akcji, 548błędów Ajax, 159finalizacji zamówienia, 170funkcji animacji, 215gestu machnięcia, 581kontrolera dyrektywy, 439koszyka, 168modułu, 458routingu, 561stronicowania, 155tablic, 120wyjątków, 484wyświetlania danych produktu, 138zdarzeń, 274, 396, 582zdarzeń click, 147zdarzeń dotknięć, 580zmian wewnętrznych, 447zmian zewnętrznych, 445zmiany danych, 382

oczekiwane odpowiedzi, 606odblokowanie przycisku, 184odczyt

tablicy, 118wartości właściwości, 105właściwości obiektu, 105

odizolowany zakres, 424ograniczenie liczby elementów, 357




Skorowidz

626

opcje konfiguracji tras, 568operator

identyczności, 111konkatenacji, 114równości, 111

operatory JavaScript, 110optymalizacja, 191organizacja kodu, 229organizowanie kontrolerów, 321

Pparametr zachłanny, 563parametry trasy, 562pierwsza aplikacja, 31plik

adminControllers.js, 199adminMain.html, 195, 199adminOrders.html, 201adminProduct.html, 205adminProducts.html, 198ajax.html, 514angular.js, 136angular-animate.js, 576angular-resource.js, 136angular-route.js, 136app.html, 137app.js, 616bootstrap.css, 136bootstrap.html, 77, 82bootstrap-theme.css, 136cart.js, 164cartSummary.html, 166checkoutSummary.html, 170, 175compileFunction.html, 435components.html, 584, 586controllers.html, 316, 335controllers.js, 230, 330, 332controllers/productListControllers.js, 148controllerTest.js, 602, 609customFilters.js, 143, 367, 369directiveControllers.html, 438directives.html, 239, 260, 275, 376, 402, 425directives.js, 458directiveScopes.html, 428directiveTest.js, 615domApi.html, 472, 476, 478editorView.html, 534exceptions.html, 483

expressions.html, 492filters.html, 344, 350, 360filters.js, 230filterTest.js, 613firstTest.js, 597, 599, 600forms.html, 284, 292htmlData.html, 486increment.js, 540, 549jqlite.html, 392, 395list.html, 253placeOrder.html, 183, 185products.html, 532products.js, 536, 568promises.html, 517, 522, 524serviceTest.js, 617sportsStore.js, 139, 189swipe.html, 581table.html, 251, 253tableView.html, 533, 550thankYou.html, 190todo.html, 31

pliki testowe, 597pobieranie

danych, 55, 159danych adresowych, 179danych z zakresu, 377egzemplarzy usługi, 588klucza, 246parametrów trasy, 567pliku lokalizacji, 345usługi $injector, 590

podświetleniekategorii, 150przycisku, 152

podział odpowiedzialności, 62pole wyboru, 308polecenia w JavaScript, 94ponowne użycie kontrolera, 324poprawiona zmienna, 385potwierdzenie otrzymania danych, 57problem leksykalny, 385programowanie asynchroniczne, 125przecinek, 103przeglądanie

produktów, 203zamówień, 200, 202

przeglądarka, 23przekazywanie argumentów, 319przetwarzanie danych, 508




Skorowidz

627

przewijanieelementów, 480okna przeglądarki, 479

przyciskwyboru produktu, 168nawigacyjny, 146

przygotowanieaplikacji, 135testu, 603

przypisywanie właściwości, 106

Rrejestracja

danych, 481, 610komponentów, 584

REST, Representational State Transfer, 527RIA, Rich Internet Applications, 19routing, 171, 172, 556rozbudowa obiektów, 103rozszerzanie modułu, 145rozszerzenie Batarang, 44rozwiązywanie zależności, 145, 603

Ssanityzacja, 489, 490serwer Deployd, 28, 187, 192siatka, 85–87składanie zamówień, 187składnia własnych filtrów, 54sortowanie, 51

elementów, 362obiektów, 362według funkcji, 363z użyciem predykatów, 364

SportsStore, 131administracja, 192dane produkcyjne, 157koszyk, 163nawigacja, 170usprawnienia, 191widok częściowy, 161wyświetlenie danych produktu, 138wyświetlenie listy kategorii, 143zamówienia, 174, 187

sprawdzanieobiektu modelu danych, 289równości i identyczności obiektów, 112

równości i identyczności typów, 113testów, 604wyników, 608

stanelementu <input>, 299przycisku, 340

stronicowanie, 152, 155, 156struktura

aplikacji, 458danych, 132, 528dokumentu, 75katalogu, 135projektu, 212tabeli, 82

styldosłownej tablicy, 117tabeli, 80

styleBootstrap, 79CSS, 77, 182, 269, 298

sygnalizacja wyniku, 522symbol waluty, 348symulacja

czasu, 608odpowiedzi HTTP, 604

szablonydyrektyw, 243, 407wyrażeń, 259

Ttabele, 81, 86, 271tablice, 116technologia Ajax, 55test, 28test jednostkowy, 131, 593, 594testowanie, 599

API, 530aplikacji, 534dyrektywy, 614filtru, 612implementacji Ajax, 539kontrolera, 602rejestracji danych, 610usługi, 615usługi danych, 134

transformacjaciągu tekstowego, 487odpowiedzi, 510żądania, 511




Skorowidz

628

transkluzja, 269, 432, 434trasa, 557trasy URL, 170, 172tworzenie

aplikacji administracyjnej, 194aplikacji AngularJS, 31, 132, 213, 531aplikacji sieciowej, 31dwukierunkowego dołączania danych, 426dyrektywy, 166, 221dyrektywy zdarzeń, 277elementów, 393elementów <optgroup>, 313elementów listy, 51filtru, 52, 371filtru kolekcji, 369formularzy sieciowych, 83jednokierunkowego dołączania danych, 423kolekcji użytkowników, 193konfiguracji testowej, 594kontrolera, 37, 138, 215, 317kontrolera monolitycznego, 322koszyka, 163listy kategorii, 143modelu danych, 35modułu, 213, 456, 460obiektów, 101, 547odizolowanych zakresów, 421produktu, 535, 538struktury danych, 132, 528struktury katalogu, 135testów jednostkowych, 598układu opartego na siatce, 85układu strony, 136usługi, 227, 456, 461usługi typu RESTful, 528widoków częściowych, 161widoku, 39widżetu koszyka, 165wielu kontrolerów, 219, 417wielu widoków, 218własnego filtru, 367własnych dyrektyw, 373, 375własnych elementów, 443właściwości modelu, 286

typ, 99boolean, 99number, 101string, 99

typy wartości atrybutów, 295

Uuaktualnianie

zakresu, 338kontrolera, 152produktu, 539widoku, 155

układoparty na siatce, 85, 87strony, 136

ukrywanieelementów, 260, 265żądań Ajax, 539

umieszczanie logikibiznesowej, 68domeny, 68magazynu danych, 68

uproszczenie procesu wywołania, 589usługa, 226

$anchorScroll, 479$animation, 576$compile, 498$errorHandler, 484$exceptionHandler, 482, 483$http, 125, 203, 504, 536$httpBackend, 606, 607$injector, 586, 590$interpolate, 496$interval, 474, 609$location, 475, 559$log, 481, 585, 611$parse, 493$provide, 584$q, 518$resource, 542–544, 549$rootElement, 590$route, 171, 557, 566$sce, 490$scope, 218, 228$swipe, 580$timeout, 474, 609$window, 473cart, 165days, 228

usługidla animacji, 575dla błędów, 471dla dotknięć, 575dla obiektów globalnych, 471




Skorowidz

629

dla REST, 527dla technologii Ajax, 501dla widoków, 553dla wyrażeń, 471oferujące wyrażenia, 491rejestracji komponentów, 583sieciowe RESTful, 56, 64–67, 528wbudowane, 468, 469

usprawnienie filtru, 52usuwanie

elementów, 265, 267, 393obiektu danych, 547produktu, 538

uwierzytelnianie, 195, 197, 198używanie

adresów URL, 477AngularJS, 33API Fluent, 220atrap, 601, 604atrapy usługi $log, 611atrybutów weryfikacji, 294CSS, 297danych odizolowanego zakresu, 430dosłownych obiektów, 102dwukierunkowego dołączania modelu, 42dyrektyw, 41, 48, 236, 238dyrektyw dołączania danych, 237dyrektyw elementu, 264dyrektywy ng-bind-html, 488dyrektywy ng-class-odd, 273dyrektywy ng-disabled, 281dyrektywy ng-if, 268dyrektywy ng-include, 251, 255, 256dyrektywy ng-repeat, 244dyrektywy ng-switch, 256, 258elementu <input>, 286, 306, 308elementu <select>, 310elementu <textarea>, 309filtrów, 52, 225, 269, 343filtru limitTo, 357, 359filtru orderBy, 362formatowania danych, 448frameworka Bootstrap, 80, 83, 85funkcji, 46funkcji compile, 435funkcji do sortowania, 365funkcji jako metod, 103funkcji jako szablonu, 409

funkcji JavaScript, 94interceptorów Ajax, 515jednokierunkowego dołączania danych, 425jqLite, 513konstrukcji warunkowych, 110kontrolera monolitycznego, 322, 323kontrolerów, 316kontrolerów w dyrektywach, 438kontrolerów z trasami, 568metody factory(), 461metody provider(), 466metody service(), 464metody then(), 507modułów, 214, 229, 458obiektu deferred, 518, 521obietnicy, 519operatorów JavaScript, 110parametrów trasy, 562pól wyboru, 308routingu, 173, 556, 564stylu dosłownej tablicy, 117symbolu waluty, 348szablonu dyrektywy, 243, 407ścieżki adresu URL, 173transkluzji, 432, 434typów podstawowych, 99usług rejestracji komponentów, 583usług widoku, 553usługi, 327, 461, 463usługi $anchorScroll, 479usługi $http, 504, 536usługi $interval, 474usługi $location, 476, 559usługi $log, 481usługi $parse, 493usługi $resource, 543, 549usługi animacji, 576wartości, 229wbudowanych zmiennych, 247, 248widżetu koszyka, 167wielu kontrolerów, 335własnego filtru, 54, 368własnej akcji, 548zewnętrznego szablonu, 410zmiennych, 98, 99zmiennych specjalnych, 301




Skorowidz

630

Wwartości domyślne żądania, 513wartość, value, 74

null, 120, 122undefined, 120, 122

warunkowe zastępowanie elementów, 256wbudowane zmienne ng-repeat, 248wczytywanie

danych JSON, 507kontrolera, 196

weryfikacjaadresów, 295danych, 181formularza, 290–293, 296, 301, 449własnych elementów, 449zmiennych, 296

widoczność elementu, 265widok, 37, 39, 62, 65widok uwierzytelnienia, 197widoki częściowe, 161, 251widżet koszyka, 165, 167własne dyrektywy, 374własny filtr, 52właściwości

interceptora, 516modelu, 286, 289weryfikacji, 451

właściwość$httpProvider.interceptor, 516city, 319controller, 440, 571require, 441resolve, 570

worker, 222, 317wstawianie wartości modelu, 40wstrzykiwanie zależności, 216, 586wstrzymanie wyświetlania komunikatów, 304, 306wybór

elementów, 360kategorii, 150szablonu zewnętrznego, 411widoków częściowych, 252

wyjątki, 482wykonywanie żądania Ajax, 505wykrywanie

funkcji, 97gestów, 582obiektów, 104

wypełniony element <input>, 299, 300wyrażenia, 491wyrażenie typu IIFE, 386wyszukiwanie

elementów potomnych, 389modułu, 214

wyświetlaniebłędów, 159danych, 536danych produktu, 138danych REST, 545elementów, 265, 267informacji o produktach, 140komunikatów, 296–303listy kategorii, 143niebezpiecznych danych, 486treści, 141widoku, 172właściwości obiektu, 106wybranego widoku, 558zaufanych danych, 487zawartości tablicy, 119

wywołanie funkcji kontrolera, 190wzorzec, 63wzorzec MVC, 35, 62

Zzabezpieczenie kolekcji, 193zakres, scope, 38, 159, 315–342zakresy odizolowane, 421zakupy, 163zależności

funkcji, 586właściwości danych, 379

zarządzanieatrybutami boolowskimi, 280zakresami dyrektywy, 415

zastępowanie elementów, 256, 413zastosowanie

dyrektyw, 223kontrolera, 44, 149, 317zlokalizowanego formatowania, 356

zawartość elementu, 74zdarzenia, 274, 277, 396, 521

usługi $location, 476zakresu, 327

zdarzenieclick, 50, 147ngTouch, 581




Skorowidz

631

zdefiniowane trasy, 558zliczanie kliknięć, 341zmiana

danych, 382elementu <option>, 311trasy, 566wartości danych, 445wartości w zakresie, 321wielkości liter, 352właściwości dataValue, 446wybranej wartości, 312

zmianywewnętrzne, 447zewnętrzne, 445

zmienna$dirty, 296$error, 296$index, 247$invalid, 296$odd, 249$pristine, 296$valid, 296displayMode, 554ng-dirty, 297ng-invalid, 297ng-pristine, 297ng-valid, 297

zmienneglobalne, 98lokalne, 98specjalne, 301wbudowane, 247

znacznik, 73znak @, 423

żądaniaAjax, 55, 125, 158, 502, 506oczekiwane, 606

żądanieGET, 56, 505POST, 67, 505




Skorowidz

632




http://program-partnerski.helion.pl

Tytuł oryginału: Pro AngularJS - Helionpdf.helion.pl › angupt › angupt.pdf · 2019-05-15 ·...

Documents

Transcript of Tytuł oryginału: Pro AngularJS - Helionpdf.helion.pl › angupt › angupt.pdf · 2019-05-15 ·...