O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Angular JS: Moderne Webanwendungen und Single Page Applications mit JavaScript

Book Description

Das populäre Framework AngularJS macht die Komplexität moderner JavaScript- und Single-Page-Anwendungen (SPA) für Entwickler beherrschbar. Es unterstützt bei immer wiederkehrenden Aufgaben wie Datenbindung, Validierung oder Routing/Deep-Linking. Die Tatsache, dass sowohl Google als auch eine riesige Community hinter AngularJS stehen, schafft darüber hinaus Vertrauen. Dieses Buch zeigt, wie Sie von AngularJS in Ihren Projekten profitieren. Dabei beschränkt es sich nicht nur auf die Grundlagen, sondern geht auch auf die zahlreichen Möglichkeiten zur Erweiterung mit Blick auf die eigenen Bedürfnissen ein. Die Autoren gehen auch auf das Zusammenspiel mit anderen Technologien und Standards wie RequireJS, Yoeman, Bower, Grunt, TypeScript oder OAuth 2.0. ein.

Table of Contents

  1. Vorwort
    1. Zielgruppe
    2. Zielsetzung des Buchs
    3. Aufbau des Buchs
    4. Wie Sie dieses Buch lesen sollten
    5. Quellcodebeispiele, Online-Services und Errata
    6. Danksagungen
  2. 1. Paradigmen in JavaScript
    1. Die prozedurale Seite von JavaScript
    2. Die funktionale Seite von JavaScript
    3. Die objektorientierte Seite von JavaScript
      1. Objekte mit Objekt-Literalen beschreiben
      2. Konstruktorfunktionen
      3. Objekte als Dictionaries
      4. Vererbung
      5. Elemente mit Namespaces organisieren
      6. Ausgewählte vordefinierte Objekte
      7. JSON-basierte Strings
    4. Die modulare Seite von JavaScript
    5. Zusammenfassung
  3. 2. Einführung in AngularJS
    1. Überblick zu Single Page Applications und AngularJS
      1. Vom Hypertext zur Single Page Application
      2. Vor- und Nachteile von Single Page Applications
      3. AngularJS und MV*
    2. Erste Schritte mit AngularJS
      1. AngularJS herunterladen und einbinden
      2. Definition eines Moduls und Controllers
      3. Deklaration der Models
      4. Datenbindung verwenden
      5. Model-View-ViewModel mit controller-as
      6. HTTP-Services via AngularJS konsumieren
    3. AngularJS näher betrachtet
      1. Direktiven
      2. Datenbindung
        1. Dirty-Checking und Digest-Zyklen
        2. Objekte überwachen
        3. One-Time-Binding
      3. Scopes
      4. Dependency Injection
      5. Filter in AngularJS
        1. Filter verwenden
        2. Filter für Arrays
          1. Arraylängen begrenzen
          2. Arrays filtern
          3. Arrays sortieren
          4. Array-basierte Filter und Datenbindung
        3. Benutzerdefinierte Filter bereitstellen
        4. Zustandsbehaftete Filter
      6. Module
        1. Module konfigurieren und initialisieren
        2. Auf Module verweisen
        3. Projektstruktur mit Modulen organisieren
      7. Vorlagen (Templates)
      8. Ereignisse
    4. Zusammenfassung
  4. 3. HTTP-Services
    1. HTTP
      1. Nachrichten
      2. Zustandslosigkeit
      3. Methoden
      4. Daten abrufen
      5. Daten senden
      6. Statuscodes
      7. Ausblick auf HTTP 2.0
      8. Representational State Transfer (REST)
    2. Mit dem Service $http auf Web-Ressourcen zugreifen
      1. Erste Schritte mit $http
      2. Mehr Möglichkeiten zur Kommunikation mit der Funktion $http
      3. Mit Kopfzeilen arbeiten
      4. Mit Transformationsfunktionen unterschiedliche Datenformate unterstützen
        1. Die Funktion transformRequest
        2. Die Funktion transformResponse
      5. Mit Interceptors in die Kommunikation eingreifen
      6. Abwehren von Angriffen
        1. Die Same Origin Policy und ihre Grenzen
        2. Schutz vor Cross Site Request Forgery
        3. JSON Vulnerability
      7. Auf andere Domänen zugreifen
        1. Mit JSONP die Same Origin Policy umgehen
        2. Mit CORS-Anfragen die Same Origin Policy umgehen
    3. REST-Services mit ngResource konsumieren
      1. Backend-lose Entwicklung mit ngMockE2E
      2. Funktionsweise von $resource
      3. Netzwerklast simulieren
    4. Zusammenfassung
  5. 4. Formulare und Validierung
    1. Objekte an Formularfelder binden
      1. Datenbindung bei Textfeldern
      2. Datenbindung bei Checkboxes
      3. Datenbindung bei Optionsfeldern
      4. Datenbindung bei Dropdown-Feldern
      5. Datenbindung bei textarea-Elementen
    2. Eingaben validieren
      1. Form-Controller
      2. Valdierungsattribute
      3. Validierungsfehler anzeigen
      4. Fehlerhafte Eingaben mit CSS hervorheben
      5. Auf Validierungsergebnisse programmatisch zugreifen
      6. Verschachtelte Formulare
      7. Auf unsichere Eingaben reagieren
      8. Datenbindungs- und Validierungsverhalten konfigurieren
    3. Benutzerdefinierte Erweiterungen
      1. Formatter und Parser
      2. Validatoren
        1. Synchrone Validatoren
        2. Asynchrone Validatoren
    4. Zusammenfassung
  6. 5. Routing
    1. Logische Seiten mit ng-switch
    2. Routing mit dem Modul ngRoute
      1. Überblick zu Routen
      2. Routen konfigurieren
      3. Views und Templates für Routen anbieten
      4. Routen neu laden
      5. Neuladen von Routen durch ngRoute verhindern
      6. Aktuellen Menüpunkt hervorheben
      7. Ereignisse von ngRoute nutzen
    3. Routing mit dem externen Modul UI-Router
      1. Erste Schritte mit UI-Router
      2. Verschachtelte Views
      3. Mehrere Views pro Vorlage verwenden
      4. Parameter übergeben
      5. Auf Zustände programmatisch zugreifen
      6. Neuladen eines Zustands verhindern
      7. Aktuellen Menüpunkt hervorheben
      8. Ereignisse von UI-Router nutzen
    4. Zusammenfassung
  7. 6. Internationalisierung
    1. Übersetzungen mit angular-translate nutzen
      1. Erste Schritte mit angular-translate
      2. Auswahl der zu verwendenden Sprache
      3. Nutzung von Platzhalter
      4. Auf externe Daten zugreifen
      5. Partielles Laden von Übersetzungen
      6. Ereignisse nutzen
    2. Länderbezogene Datums- und Zahlenformate mit Globalize unterstützen
      1. Erste Schritte mit Gobalize
      2. Globalize mit AngularJS nutzen
    3. Zusammenfassung
  8. 7. Animationen und Touch
    1. Methoden zum Erstellen von Animationen
      1. CSS-Transitions
      2. CSS-Keyframe-Animationen
      3. JavaScript-Animationen
    2. Animieren von AngularJS-Kern-Direktiven
      1. Animieren mittels ngShow und ngHide
      2. Animationen mit ngRepeat
    3. Behandeln von Touch-Interaktionen mit ngTouch
    4. Animationen von der Stange mit Animate.css
    5. Benutzerdefinierte Direktiven mit Animationen
    6. Zusammenfassung
  9. 8. Asynchroner Code mit Promises
    1. Überblick zu Promises
      1. Callbacks und die Pyramide der Verdammnis
      2. Erste Schritte mit Promises
      3. Promises verketten
      4. Auf Fehler mit Promises reagieren
      5. Aufräumarbeiten mit finally
      6. Über Fortschritt informieren
      7. Auf mehrere Promises warten
    2. Promises in AngularJS
      1. Promises am Beispiel $http
      2. Eigene Promises mit $q erzeugen
      3. Unterstützung für Grammatik von ECMAScript 6
    3. Zusammenfassung
  10. 9. Testing
    1. Jasmine
      1. Anatomie eines Jasmine-Tests
      2. Der Jasmine-Test-Runner
    2. Unit-Tests für AngularJS-Konstrukte
      1. Prüfling für Beispiele
      2. Ein View-Model testen
      3. Asynchrone Tests
      4. Controller testen
      5. Tests mit angular-mocks vereinfachen
      6. Angular-Services für Tests simulieren
      7. Filter testen
      8. Direktiven testen
    3. End-2-End Tests mit Protractor
      1. Asynchrone Befehle und der WebDriver-ControlFlow
      2. Installation und Konfiguration von Protractor
      3. Präsentation des zu testenden Beispielprojekts
      4. E2E-Tests mit Jasmine
        1. Spezifikation und Resultat eines E2E-Tests mit Jasmine
        2. Elemente mit dem Hilfsobjekt by finden
        3. Elemente mit AngularJS-Konstrukten finden
        4. Interaktion mit Elementen
    4. Zusammenfassung
  11. 10. Modularisierung und Verwaltung von Abhängigkeiten mit RequireJS
    1. Das JavaScript Modul-Muster
    2. Verwaltung von Abhängigkeiten
    3. RequireJS kennenlernen
      1. RequireJS Bootstrapping
      2. RequireJS konfigurieren
      3. Verhindern von JavaScript Datei-Caching
    4. AngularJS mit RequireJS verwenden
    5. Zusammenfassung
  12. 11. Authentifizierung und Autorisierung
    1. Authentifizierung via HTTP BASIC
      1. Überblick zu HTTP BASIC
      2. AngularJS und HTTP BASIC
    2. Single Sign On mit OAuth 2.0 und OpenId Connect
      1. Überblick zu OAuth 2.0 und OpenId Connect
        1. Rollen
        2. Access- und Refresh-Token
        3. Single Sign On mit OAuth 2 und OpenID Connect
        4. JSON Web Token
        5. Flows
          1. Authorization Code Grant
          2. Implicit Grant-Flow
          3. Resource Owner Password Credentials Grant
          4. Client Credentials Grant
      2. OAuth 2.0 mit AngularJS nutzen
        1. Demo-Anwendung für Implicit-Flow
        2. Eine einfache Implicit-Flow-Implementierung mit AngularJS
          1. OAuth-Implementierung via Service bereitstellen
          2. OAuth-Implementierung nutzen
        3. Implicit-Flow mit IFrame
        4. Token aktualisieren
        5. Überlegungen zum Resource Owner Password Credentials
      3. Überlegungen zu OpenId Connect und AngularJS
    3. Zusammenfassung
  13. 12. Interaktion mit dem Browser
    1. Zugriff auf das document-Objekt
    2. Verwenden von $window
    3. Daten persistieren mit ngCookies
    4. Verzögerte Ausführung mit $interval und $timeout
    5. Zusammenfassung
  14. 13. Services näher betrachtet
    1. Funktionsweise von Services im Detail
    2. Optionen zum Erstellen von Services
    3. Services direkt mittels Provider erstellen
    4. Verwenden eines Decorators
    5. Zusammenfassung
  15. 14. Benutzerdefinierte Direktiven
    1. Eine erste (zu) einfache Direktive
    2. Eigener Scope für Direktive
    3. Isolierte Scopes
    4. Link-Phase
    5. Manuelle Transklusion
    6. Compile-Phase
    7. Kommunikation zwischen Direktiven
    8. Zusammenfassung
  16. 15. User Interface Design
    1. Twitter Bootstrap
      1. Einsatzbereiche von Bootstrap
      2. Erste Schritte mit Bootstrap
      3. Das Grid-System von Bootstrap näher betrachtet
      4. Hilfsklassen in Bootstrap
      5. Bootstrap-Komponenten
        1. Einfache Symbole mit Glyphicons
        2. Formularelemente
        3. Navigation
        4. Modals
        5. Tooltips
      6. Weitere Features von Bootstrap
    2. Bootstrap mit AngularJS verwenden
      1. Schaltflächengruppen
      2. Kalender und Datumsauswahl
      3. Paginierung
    3. Datengitter mit ngGrid
      1. Basis-Grid mit minimaler Konfiguration
      2. Konfigurieren von Spalten
      3. Editieren von Grids
      4. Zusätzliche Features
    4. Kendo UI Grid
      1. Aufbau des NodeJS Backends
      2. Einbindung von Kendo-Komponenten mittels Direktiven
    5. Zusammenfassung
  17. 16. Werkzeugunterstützung
    1. Paket-Verwaltung mit Bower
      1. Pakete installieren mit Bower
      2. Bereits installierte Pakete aktualisieren und löschen
      3. Übersicht über die verwendeten Pakete und deren Abhängigkeiten
      4. Ein Projekt für die Verwendung von Bower aufsetzen
    2. Aufgabenautomatisierung mit Grunt
      1. Anlegen eines Projekts mit Grunt-Unterstützung
      2. Konfiguration von Grunt
      3. Lokale Projektdateien mit Grunt einbinden
      4. Leichtgewichtiger Entwickler-Web-Server mit Grunt
    3. Projektvorlagen mit Yeoman
      1. Hinzufügen eines Yeoman-Generators
      2. Erstellen eines AngularJS-Projekts mit generator-angular
      3. Nähere Betrachtung von generator-angular
    4. TypeScript
      1. Überblick über TypeScript
        1. Nutzung des TypeScript-Compilers
        2. Typen und Variablen
        3. Funktionen
        4. Klassen
        5. Statische Eigenschaften
        6. Interfaces
        7. Generics
        8. Module
        9. Ambient Declarations
        10. Verweise auf andere TypeScript-Dateien
      2. AngularJS mit TypeScript nutzen
        1. View-Models bereitstellen
        2. Controller bereitstellen
        3. Services bereitstellen
        4. Filter bereitstellen
        5. Direktiven bereitstellen
    5. Zusammenfassung
  18. A. Die Autoren
    1. Manfred Steyer
    2. Vildan Softic
  19. Stichwortverzeichnis
  20. Kolophon
  21. Copyright