AngularJS. Praktyczne przykłady - Ebook - Chandermani - Nowoczesna platforma edukacyjna

Szczegóły ebooka

Zaloguj się, jeśli jesteś zainteresowany treścią pozycji.

AngularJS. Praktyczne przykłady

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

Tytuł: AngularJS. Praktyczne przykłady
Autor: Chandermani
Tytuł oryginału: AngularJS by Example
Tłumaczenie: Piotr Rajca
ISBN: 978-83-283-1618-8, 9788328316188
Data wydania: 2015-11-26
Format: Ebook
Identyfikator pozycji: angupp
Wydawca: Helion

wybór języka

Kategorie

Szczegóły ebooka

Praktyczne wprowadzenie do AngularJS!

Najszybszy sposób na naukę AngularJS!