AngularJS. Praktyczne przykłady - ebook

Praktyczne wprowadzenie do AngularJS!

• zaznajomisz się ze wzorcem MVC
• zastosujesz gotowe dyrektywy, a następnie przygotujesz własne
• wykorzystasz dostępne usługi
• przetestujesz swoją aplikację
• poznasz dobre rady na temat wydajności
• wykorzystasz szkielet AngularJS w praktyce

Najszybszy sposób na naukę AngularJS!

• O autorze
  • Zespół
    • Autor
    • Reviewers
    • Commissioning Editor
    • Acquisition Editor
    • Content Development Editor
    • Technical Editors
    • Copy Editors
    • Project Coordinator
    • Proofreaders
    • Indexer
    • Graphics
    • Production Coordinator
    • Cover Work
• O recenzentach
• Przedmowa
  • Zawartość książki
  • Co jest potrzebne?
  • Adresaci książki
  • Konwencje
    • Kod do pobrania
    • Errata
    • Piractwo
• Rozdział 1. Pierwsze kroki
  • Podstawy wzorca model widok kontroler
  • Zwyczajowa aplikacja Witaj Angular (Odgadnij liczbę!)
  • Przygotowywanie roboczego serwera WWW
  • Tworzenie aplikacji Odgadnij liczbę!
  • Model aplikacji
  • Kontroler
  • Widok aplikacji
    • Wstawki
    • Dyrektywy
    • Wyrażenia
    • Dowiązywanie danych
  • Kontroler po raz wtóry
  • Zasięg
  • Inicjalizacja aplikacji
  • Narzędzia
  • Zasoby
  • Podsumowanie
• Rozdział 2. Piszemy pierwszą aplikację: 7-minutowy trening
  • Czym jest 7-minutowy trening?
    • Pobieranie kodu aplikacji
  • Organizacja kodu
    • Organizacja kodu JavaScriptu
  • Model aplikacji 7-minutowy trening
  • Dodawanie modułów aplikacji
  • Kontroler aplikacji
    • Wstrzykiwanie zależności
      • Podstawowe informacje o wstrzykiwaniu zależności
      • Wstrzykiwanie zależności w AngularJS
        • Rozwiązanie problemu minimalizacji kodu
        • Adnotacje zależności
    • Implementacja kontrolera
      • Śledzenie czasu wykonywania ćwiczenia przy użyciu usługi $interval
    • Weryfikacja implementacji
    • Implementacja zmiany ćwiczenia
    • Stosowanie $watch do obserwowania zmian w modelu
      • Prezentacja $watch
      • Implementacja zmiany ćwiczenia przy użyciu funkcji $watch
    • Zmiana ćwiczeń przy użyciu API obietnic
      • Podstawowe informacje o obietnicach
  • Widok aplikacji 7-minutowy trening
    • Stosowanie ng-show do określania ścieżki do obrazka
    • Stosowanie dyrektywy ng-style i paska postępu frameworku Bootstrap
  • Dodawanie strony początkowej i końcowej
    • Wprowadzenie od aplikacji jednostronicowych
      • Tworzenie widoków z użyciem dyrektywy ng-view
      • Trasy w aplikacji 7-minutowy trening
      • Faza konfiguracji/uruchamiania i inicjalizacja modułu
      • Przechodzenie do widoku w kontrolerze przy użyciu usługi $location
      • Stosowanie usługi $location
  • Dostarczanie dodatkowych informacji o ćwiczeniach
    • Dodawanie paneli opisu i wideo
      • Stosowanie dyrektywy ng-include
      • Stosowanie dyrektywy ng-repeat
  • Wyświetlanie pozostałego czasu treningu przy użyciu filtrów
    • Tworzenie filtra konwertującego sekundy na format godzinowy
      • Wprowadzenie do filtrów AngularJS
      • Implementacja filtru secondsToTime
  • Dodawanie informacji o następnym ćwiczeniu przy użyciu ng-if
  • Podsumowanie
• Rozdział 3. Stosowanie kolejnych dobrodziejstw AngularJS
  • Formatowanie instrukcji wykonywania ćwiczenia
    • Przedstawienie dyrektywy ng-bind-html
    • Użycie ng-bind-html do wyświetlania instrukcji wykonywania ćwiczeń
  • Śledzenie postępu wykonywania ćwiczeń za pomocą klipów audio
    • Implementacja obsługi audio
      • Implementacja kontrolera WorkoutAudioController
      • Badanie problemu synchronizacji klipów audio
      • Sprawdzanie zmian i cykle przeglądu AngularJS
        • Podsumowanie zdobytej wiedzy
      • Rozwiązanie problemu synchronizacji odtwarzanego klipu audio
  • Wstrzymywanie treningu
    • Implementacja wstrzymywania treningu w kontrolerze WorkoutController
    • Dodawanie fragmentu widoku do wstrzymywania i wznawiania treningu
      • Implementacja warstw z przyciskami do wstrzymywania i wznawiania treningu z użyciem zdarzeń myszy
      • Implementacja warstw z użyciem samych stylów CSS
      • Operacje na stylach CSS przy użyciu dyrektywy ng-class
    • Zatrzymywanie klipów po wstrzymaniu treningu
    • Wstrzymywanie i wznawianie treningu przy użyciu klawiatury
  • Rozbudowa panelu wideo
    • Refaktoryzacja panelu wideo i kontrolera
    • Odtwarzanie wideo w oknie dialogowym
      • Integracja modalnego okna dialogowego ui.bootstrap
  • Animacje w aplikacjach AngularJS
    • Animacje CSS w AngularJS
    • Animacje JavaScriptu w AngularJS
    • Dodawanie animacji do aplikacji 7-minutowy trening
  • Zapis historii treningu przy użyciu usług AngularJS
    • Podstawowe informacje o usługach AngularJS
      • Tworzenie usług AnagularJS
        • Tworzenie usług przy użyciu usług typu constant i value
        • Tworzenie usług typu service
        • Tworzenie usług przy użyciu usługi factory
        • Tworzenie usług typu provider
    • Implementacja zapisu historii treningów
      • Usługa WorkoutHistoryTracker
        • Usługi i zasięgi
        • Ciąg dalszy implementacji usługi
      • Integracja usługi WorkoutHistoryTracker z kontrolerem
    • Dodawanie widoku historii treningów
    • Zdarzenia w AngularJS
    • Wzbogacanie śledzenia historii przy użyciu zdarzeń
    • Trwałe przechowywanie danych przy użyciu magazynu przeglądarki
    • Filtrowanie historii treningów
    • Filtrowanie i sortowanie z użyciem dyrektywy ng-repeat
      • Filtr filter
      • Filtr orderBy
      • Specjalne właściwości dyrektywy ng-repeat
  • Podsumowanie
• Rozdział 4. Tworzenie aplikacji Mój trening
  • Aplikacja Mój trening zakres problemu
    • Wymagania aplikacji Mój trening
  • Model aplikacji Mój trening
    • Współużytkowanie modelu treningu
    • Model jako usługa
  • Układ aplikacji Mój trening
    • System nawigacyjny aplikacji Mój trening i jej trasy
      • Integracja górnego i dodatkowego paska nawigacyjnego
  • Implementacja list treningów i ćwiczeń
    • WorkoutService jako repozytorium danych treningów i ćwiczeń
    • Kontrolery list ćwiczeń i treningów
  • Widoki list ćwiczeń i treningów
  • Tworzenie treningu
    • Tworzenie lewego paska nawigacyjnego
    • Dodawanie usługi WorkoutBuilderService
    • Dodawanie ćwiczeń z poziomu paska nawigacyjnego
    • Implementacja kontrolera WorkoutDetailController
      • Wyznaczanie tras
      • Wyznaczanie nieodnalezionych tras
      • Ciąg dalszy implementacji kontrolera WorkoutDetailController
    • Implementacja widoku do tworzenia treningów
    • Obsługa formularzy w AngularJS
      • Konstrukcje formularzy w AngularJS
      • Dyrektywa ng-model
        • Stosowanie dyrektywy ng-model w elementach input i textarea
        • Stosowanie dyrektywy ng-model w elementach select
      • Kontrola aktualizacji modelu przy użyciu dyrektywy ng-model-options (AngularJS 1.3)
      • Dyrektywa ng-model nie tylko dowiązywanie danych
      • Poznawanie kontrolera NgModelController
      • Implementacja funkcji formatującej i funkcji analizującej, które umożliwiają konwertowanie liczb rzeczywistych na całkowite
      • Sprawdzanie poprawności danych w AngularJS
      • Stan modelu w AngularJS
      • Weryfikacja formularza edycji treningów
        • Jak działa sprawdzanie poprawności danych w AngularJS (wersje wcześniejsze niż 1.3)
        • Jak działa sprawdzanie poprawności danych w AngularJS (wersja 1.3)
        • Zarządzanie komunikatami o błędach walidacji przy użyciu dyrektywy ng-messages (AngularJS 1.3)
      • Niestandardowy walidator sprawdzający liczbę ćwiczeń
      • Zapisywanie treningu
    • Dyrektywa form i sprawdzanie poprawności formularzy
      • Interfejs API kontrolera FormController
      • Poprawianie komunikatów o zapisie formularza i błędach walidacji
      • Eliminowanie niepożądanych aktualizacji modelu
      • Przywracanie stanu początkowego formularza
      • Usługa $routeParams
      • Dynamicznie generowane formularze i ich elementy
        • Sprawdzanie czasu wykonywania ćwiczenia przy użyciu dyrektywy ng-form
    • Obiekty zasięgu po raz wtóry
  • Podsumowanie
• Rozdział 5. Dodawanie warstwy trwałości danych
  • AngularJS i interakcje z serwerem
    • Przygotowanie trwałego magazynu danych
      • Utworzenie początkowej zawartości bazy danych
  • Podstawowe informacje o usłudze $http
  • Aplikacja Mój trening i jej integracja z serwerem
    • Wczytywanie danych ćwiczeń i treningów
      • Wczytywanie list ćwiczeń i treningów z serwera
        • Implementacja dostawcy usługi WorkoutService
      • Odwzorowywanie danych z serwera na modele aplikacji
      • Wyjaśnienie łańcuchów obietnic
      • Wczytywanie danych ćwiczeń i treningów z serwera
      • Poprawianie stron ze szczegółowymi informacjami o treningach i ćwiczeniach
      • Tworzenie i wyznaczanie własnych obietnic
        • Funkcja when usługi $q
      • Ciąg dalszy poprawiania stron ze szczegółowymi informacjami o treningach i ćwiczeniach
        • Wyznaczanie tras a obietnice
    • Wykonywanie podstawowych operacji na ćwiczeniach i treningach
      • Poprawianie i tworzenie nowych treningów
      • Odwołania do innych domen a AngularJS
      • Stosowanie JSONP do wykonywania żądań do innych domen
      • CORS Cross-Origin Resource Sharing
  • Usługa $resource
    • Usługi typu RESTful i ich API
    • Podstawowe informacje o usłudze $resource
    • Wyjaśnienie akcji usługi $resource
    • Wywoływanie akcji zasobów
  • Dostęp do danych ćwiczeń przy użyciu usługi $resource
    • Ukryty koszt ukrywania asynchronicznego charakteru kodu
  • Podstawowe operacje z użyciem usługi $resource
    • Stosowanie usługi $resource do obsługi innych rodzajów punktów końcowych
  • Funkcje przechwytujące żądania i odpowiedzi
    • Zastosowanie funkcji przechwytującej do przekazania klucza API
  • Funkcje przekształcające żądania i odpowiedzi
  • Obsługa błędów wyznaczania tras w przypadku odrzucenia obietnicy
    • Obsługa nieodnalezionych treningów
  • Poprawianie aplikacji 7-minutowy trening
  • Podsumowanie
• Rozdział 6. Tworzenie i stosowanie dyrektyw
  • Dyrektywy wprowadzenie
  • Anatomia dyrektyw
    • Tworzenie dyrektywy workout-tile
    • Prezentacja dyrektywy ng-click
  • Tworzenie dyrektywy do zdalnej walidacji nazwy treningu
    • Dyrektywa remote-validator (dla AngularJS 1.3 i starszych)
      • Właściwość require definicji dyrektyw
      • Funkcja konsolidująca
    • Dyrektywa remote-validator dla Angular 1.3
  • Aktualizacje modelu z użyciem zdarzenia blur
    • Zastosowanie właściwości priority do zmiany kolejności wykonywania funkcji compile i link
    • Cykl życia dyrektywy
    • Priorytet a wiele dyrektyw użytych w tym samym elemencie
  • Implementacja dyrektywy wizualnego wskaźnika zdalnej walidacji
    • Usługa $compile
    • Funkcja kontrolera dyrektywy
    • Komunikacja między dyrektywami integracja wskaźnika zdalnych operacji i dyrektywy walidacyjnej
      • Poprawianie dyrektywy remote-validator (AngularJS 1.3 i starsze)
      • Poprawianie dyrektywy remote-validator (AngularJS 1.3 i nowsze)
    • Wstrzykiwanie kodu HTML w funkcji kompilującej dyrektywy
    • Prezentacja szablonów dyrektyw i transkluzji
  • Wyjaśnienie izolowanego zasięgu dyrektyw
    • Tworzenie dyrektywy przycisku wykonującego zdalną operację
  • Integracja AngularJS i jQuery
    • Integracja wtyczki jQuery Owl Carousel z aplikacją Treningomat
    • Tunelowanie zdarzeń jQuery przy użyciu dyrektyw
  • Podsumowanie
• Rozdział 7. Testowanie aplikacji AngularJS
  • Potrzeba automatyzacji
  • Testowanie w AngularJS
    • Rodzaje testów
    • Kto i kiedy ma testować?
    • Ekosystem testowy AngularJS
  • Wprowadzenie do tworzenia testów jednostkowych
    • Konfiguracja środowiska Karma do wykonywania testów jednostkowych
    • Zarządzanie zależnościami przy użyciu menedżera zależności Bower
    • Testy jednostkowe komponentów AngularJS
      • Testy jednostkowe filtrów
      • Testy jednostkowe z użyciem modułu ngMock
      • Testy jednostkowe kontrolerów
        • Konfigurowanie zależności kontrolera
      • Testy jednostkowe kontrolera WorkoutController
        • Debugowanie testów jednostkowych w środowisku Karma
        • Ciąg dalszy testów jednostkowych kontrolera WorkoutController
        • Stosowanie szpiegów Jasmine do sprawdzania zależności
        • Testowanie implementacji $interval i $timeout
        • Testowanie zatrzymywania i wznawiania treningu
      • Testy jednostkowe usług
        • Symulowanie żądań i odpowiedzi HTTP przy użyciu usługi $httpBackend
        • Testowanie usługi WorkoutService
      • Testy jednostkowe dyrektyw
        • Testy dyrektywy remote-validator
        • Jednoczesne testowanie dyrektyw remote-validator i busy-indicator
        • Testowanie dyrektyw używających właściwości konfiguracyjnej templateUrl
      • Testy jednostkowe tras i ich właściwości konfiguracyjnej resolve
  • Wprowadzenie do tworzenia testów typu E2E
    • Prezentacja narzędzia Protractor
    • Przygotowywanie środowiska Protractor do testów E2E
    • Pisanie testów E2E dla naszej aplikacji
    • Przygotowywanie danych na serwerze pod kątem testów E2E
      • Tworzenie atrapy serwera na potrzeby testów E2E
    • Więcej testów E2E
      • Testowanie aplikacji Treningomat
      • Stosowanie obiektów stron do zarządzania testami E2E
  • Podsumowanie
• Rozdział 8. Obsługa często występujących scenariuszy
  • Tworzenie nowych aplikacji
    • Projekty startowe
    • Yeoman
  • Tworzenie aplikacji wielojęzycznych (umiędzynarodawianie)
    • Wsparcie dla aplikacji wielojęzycznych w AngularJS
      • Zmiana ustawień regionalnych dzięki możliwościom modułu angular-dynamic-locale
      • Stosowanie biblioteki angular-translate do obsługi tłumaczenia tekstów
  • Obsługa uwierzytelniania i autoryzacji
    • Uwierzytelnianie w oparciu o cookies
    • Uwierzytelnianie w oparciu o żetony
    • Obsługa autoryzacji
      • Dodawanie wsparcia dla autoryzacji
        • Udostępnianie kontekstu uwierzytelniania użytkownika
        • Ograniczanie dostępu do tras
        • Warunkowe wyświetlanie treści zależnie od roli
  • Wzorce komunikacji i współdzielenia danych
    • Stosowanie adresów URL do przekazywania danych pomiędzy stronami
    • Stosowanie obiektów zasięgu
      • Stosowanie zasięgu $rootScope
    • Stosowanie usług
    • Komunikacja między dyrektywami
    • Stosowanie zdarzeń
  • Wydajność
    • Wytyczne dotyczące wydajności
      • Zapewnianie niewielkich rozmiarów stron (widoków)
      • Optymalizacja czujek operujących na danych tylko do odczytu
      • Ukrywanie treści (ng-show) kontra ich warunkowe wyświetlanie (ng-if/ng-switch)
      • Wyznaczanie wyrażeń używanych w czujkach powinno trwać bardzo krótko
      • Minimalizacja czujek używających głębokich porównań
      • Obsługa dużych zbiorów danych przy użyciu dyrektywy ng-repeat
      • Unikanie zdarzeń związanych z ruchem myszy
      • Unikanie stosowania wywołań $scope.$apply
      • Leniwe wczytywanie, minimalizacja i tworzenie wielu aplikacji jednostronicowych
        • Dzielenie aplikacji na kilka mniejszych aplikacji jednostronicowych
        • Leniwe wczytywanie modułów
      • Przechowywanie zdalnych danych w pamięci podręcznej zawsze, gdy jest to możliwe
      • Stosowanie dodatku Batarang do pomiarów wydajności
  • Przydatne biblioteki dodatkowe
  • Podsumowanie