E-book details

AngularJS. Praktyczne przykłady

AngularJS. Praktyczne przykłady

Chandermani

Ebook

Praktyczne wprowadzenie do AngularJS!

AngularJS to szkielet, który pozwolił tworzyć zaawansowane aplikacje działające w środowisku przeglądarki internetowej. Dał nam do dyspozycji wiele narzędzi, które wcześniej można było zastosować tylko w „tradycyjnych” językach. Wśród nich są zarówno wzorzec MVC (ang. ModelViewController), jak i rozbudowane możliwości testowania. To właśnie dzięki AngularJS możesz wykorzystać w pełni potencjał współczesnych aplikacji internetowych!

Wszyscy programiści od dawna wiedzą, że najlepszym sposobem na nauczenie się nowych narzędzi, języków programowania czy bibliotek jest korzystanie z gotowych przykładów. Właśnie takie podejście do AngularJS dominuje w tej książce. Dzięki niej błyskawicznie opanujesz wszystkie aspekty używania tego szkieletu w codziennej pracy. W kolejnych rozdziałach znajdziesz praktyczne przykłady zastosowania wzorca MVC, wiązania danych, stosowania gotowych dyrektyw oraz usług. Dowiesz się, jak podłączyć się do zasobów serwera dzięki $http oraz utrwalisz dane użytkownika poprzez wprowadzenie warstwy trwałości danych. Na sam koniec zapoznasz się z metodami tworzenia własnych dyrektyw i testowania poszczególnych komponentów aplikacji oraz ze wskazówkami na temat wydajności Twojej aplikacji. Sięgnij po tę książkę, jeżeli chcesz błyskawicznie poznać i wykorzystać w praktyce szkielet AngularJS!

Dzięki tej książce:
  • 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!


Chandermani — programista specjalizujący się w tworzeniu aplikacji internetowych. Ma ponad 10 lat doświadczenia w pisaniu aplikacji o różnym stopniu skomplikowania na podstawie rozwiązań firmy Microsoft. Zakochany w AngularJS od pierwszego spotkania. Lider zespołu programistów w Technovert.
  • 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
  • Title: AngularJS. Praktyczne przykłady
  • Author: Chandermani
  • Original title: AngularJS by Example
  • Translation: Piotr Rajca
  • ISBN: 978-83-283-1618-8, 9788328316188
  • Date of issue: 2015-11-26
  • Format: Ebook
  • Item ID: angupp
  • Publisher: Helion