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

AngularJS

Book Description

AngularJS ist derzeit der neue Star am Himmel der JavaScript-MVC-Frameworks. Mit ihm können Sie auf effiziente Weise moderne clientseitige Webapplikationen erstellen. Dieses Buch führt Sie anhand eines Beispielprojekts schrittweise an die Entwicklung mit AngularJS heran. Dabei lernen Sie die grundlegenden Konzepte kennen und können darauf aufbauend strukturierte, modularisierte und somit wartbare Applikation erstellen. Themen sind u.a. Direktiven, Zwei-Wege-Datenbindung, Dependency Injection, Routen, REST-basierte Web Services sowie Werkzeuge und Workflows mit Yo, Grunt, Bower und Karma.

Table of Contents

  1. Cover
  2. Titel
  3. Impressum
  4. Vorwort
  5. 1 AngularJS Schnellstart
    1. 1.1 Zwei-Wege-Datenbindung: Boilerplate-Code war gestern
      1. Ein zweites Beispiel
    2. 1.2 Direktiven: Eigene HTML-Elemente und Attribute
      1. Ein Beispiel
      2. Das Direktiven-Template
      3. Die Direktivendefinition
      4. Die templateUrl-Eigenschaft
      5. Die restrict-Eigenschaft
      6. Die scope-Eigenschaft
      7. Die link-Eigenschaft
    3. 1.3 Filter: Formatierte Ausgaben im Handumdrehen
      1. Zusammenfassung
  6. 2 Grundlagen und Konzepte des Frameworks
    1. 2.1 Leitkonzepte
      1. 2.1.1 Model-View-Controller oder Model-View-ViewModel?
        1. Das Model-View-Controller-Muster
        2. Das Model-View-ViewModel-Muster
      2. 2.1.2 Die Zwei-Wege-Datenbindung und Scopes
      3. 2.1.3 Inversion of Control und Dependency Injection
      4. 2.1.4 Testbarkeit
        1. Zusammenfassung
    2. 2.2 Anwendungsbausteine
      1. 2.2.1 Module
      2. 2.2.2 Controller
      3. 2.2.3 Models
      4. 2.2.4 Routen
      5. 2.2.5 Ansichten, Templates und Expressions
        1. Ansichten und Templates
        2. Expressions
      6. 2.2.6 Filter
        1. Formatierungsfilter
        2. Collection-Filter
      7. 2.2.7 Services
      8. 2.2.8 Direktiven
        1. Benennung
        2. Definition mithilfe einer Link-Funktion
        3. Definition mithilfe eines Direktiven-Definitions-Objekts
        4. Eigene Scopes für Direktiven
        5. Isolierte Scopes
        6. Die Verwandtschaft zu Polymer
        7. Zusammenfassung
  7. 3 Das BookMonkey-Projekt
    1. 3.1 Auf geht’s, ab geht’s: Projekt- und Prozessvorstellung
    2. 3.2 Voraussetzungen
    3. 3.3 Die Projektumgebung aufsetzen
    4. 3.4 Projektstart: Detailansicht eines Buches
      1. 3.4.1 Das Template für die Detailansicht mit Expressions
      2. 3.4.2 Die ngHref-Direktive
      3. 3.4.3 Das Template mit der ngBind- und ngBindTemplate-Direktive
      4. 3.4.4 Das Anwendungsmodul definieren
      5. 3.4.5 Die erste Route
      6. 3.4.6 Ein eigener Scope mit dem BookDetailsCtrl-Controller
      7. 3.4.7 Der erste Test
        1. Zusammenfassung
    5. 3.5 Listenansicht für Bücher
      1. 3.5.1 Als Erstes der Test
      2. 3.5.2 Die Infrastruktur für die Listenansicht
      3. 3.5.3 Der BookListCtrl-Controller
      4. 3.5.4 Die ngRepeat-Direktive: Ausgabe eines Arrays im Template
      5. 3.5.5 Der orderBy-Filter: Sortierung festlegen
        1. Programmatischer Aufruf von Filtern
        2. Zusammenfassung
      6. 3.5.6 Der filter-Filter: Daten bequem filtern
        1. Programmatischer Aufruf des filter-Filters
        2. Zusammenfassung
    6. 3.6 Navigieren innerhalb der Anwendung
      1. 3.6.1 Die Standardroute mit $routeProvider.otherwise()
      2. 3.6.2 Als Erstes der Test
      3. 3.6.3 Navigation mittels Hashbang-URLs
      4. 3.6.4 Die ngClick-Direktive: Auf Klick-Events reagieren
      5. 3.6.5 Der $location-Service: Interaktionen mit der Adresszeile
        1. Zusammenfassung
    7. 3.7 Der erste Service
      1. 3.7.1 Als Erstes der Test
      2. 3.7.2 Der BookDataService: Datenzugriffe kapseln
      3. 3.7.3 Den BookDataService einbinden
      4. 3.7.4 Der $routeParams-Service: URL-Parameter auslesen
        1. Zusammenfassung
  8. 4 Die Anwendung erweitern
    1. 4.1 Der Administrationsbereich
      1. 4.1.1 Als Erstes der Test
      2. 4.1.2 Die CRUD-Operationen des BookDataService
      3. 4.1.3 Die ngShow- und ngHide-Direktive: Inhalte bedingt anzeigen und ausblenden
      4. 4.1.4 Formularverarbeitung und Validierung mit dem FormController und NgModelController
      5. 4.1.5 Templates mit der ngInclude-Direktive einbinden
      6. 4.1.6 Die Funktion zum Editieren eines Buches
      7. 4.1.7 Die Funktionzum Löschen eines Buches
        1. Zusammenfassung
    2. 4.2 Kategorisierung durch Tags
      1. 4.2.1 Das Datenmodell um Tags erweitern
      2. 4.2.2 Als Erstes der Test
        1. Das jQuery-Plugin Tokenfield for Bootstrap
        2. Die Unit-Tests für die tokenfield-Direktive
      3. 4.2.3 Die Tokenfield-Direktive: Tags anlegen
      4. 4.2.4 Die Tags-Direktive: Tags anzeigen
        1. Zusammenfassung
    3. 4.3 Einen REST Web Service anbinden
      1. 4.3.1 Das BookMonkey-Backend
      2. 4.3.2 HTTP-Kommunikation mit dem $http-Service
      3. 4.3.3 Als Erstes der Test
      4. 4.3.4 $http im BookDataService nutzen
      5. 4.3.5 Die Anwendung wiederinstandsetzen
        1. Die Editieren-Funktion wiederinstandsetzen
        2. Die tokenfield-Direktive wiederinstandsetzen
        3. BookMonkey mit Backend-Kommunikation
        4. Zusammenfassung
  9. 5 Projektverwaltung und Automatisierung
    1. 5.1 Node.js: Die Ablaufumgebung für die Werkzeuge
      1. Paketverwaltung mit npm
      2. Zusammenfassung
    2. 5.2 Frontend-Abhängigkeiten mit Bower verwalten
      1. Die bower.json-Datei definieren
      2. Abhängigkeiten definieren
      3. Installierte Pakete einbinden
      4. 5.2.1 Bower konfigurieren
      5. 5.2.2 Eigene Pakete mit Bower verwalten
      6. 5.2.3 Ein privates Register erstellen
      7. 5.2.4 Mögliche Probleme mit Proxy-Servern
        1. Zusammenfassung
    3. 5.3 Aufgaben mit Grunt automatisieren
      1. Grunt über die Kommandozeile nutzbar machen
      2. 5.3.1 Aufgaben konfigurieren
        1. Tasks definieren
        2. Multi-Tasks definieren
        3. Tasks auslagern
        4. Grunt-Plugins einbinden
        5. Templates verwenden
      3. 5.3.2 Sinnvolle Pakete für die Entwicklung
        1. load-grunt-tasks
        2. ng-min
        3. concat und uglify
        4. Zusammenfassung
    4. 5.4 Tests mit Karma automatisiert ausführen
      1. 5.4.1 Konfiguration
      2. 5.4.2 Die wichtigsten Parameter
        1. basePath
        2. files und exclude
        3. frameworks
        4. browsers
      3. 5.4.3 Initiale Karma-Konfiguration generieren
      4. 5.4.4 Karma-Erweiterungen nutzen
      5. 5.4.5 Tests direkt in WebStorm ausführen
      6. 5.4.6 Test-Frameworks
      7. 5.4.7 Continuous Integration
        1. Zusammenfassung
    5. 5.5 Yeoman: Ein definierter Workflow
      1. 5.5.1 Was ist Yeoman?
      2. 5.5.2 Yeoman installieren
      3. 5.5.3 Anwendungsbausteinen generieren
      4. 5.5.4 Yo für AngularJS-Projekte
        1. yo angular
        2. yo angular:controller
        3. yo angular:directive
        4. yo angular:filter
        5. yo angular:route
        6. yo angular:service
        7. yo angular:decorator
      5. 5.5.5 Generierte Grunt-Konfiguration
  10. 6 Debugging
    1. 6.1 Chrome Developer Tools
      1. 6.1.1 Der Elemente-Tab
      2. 6.1.2 Die Konsole
      3. 6.1.3 Der Sources-Tab: JavaScript-Code debuggen
        1. Zusammenfassung
    2. 6.2 Batarang: Einsicht in die laufende AngularJS-Anwendung
      1. 6.2.1 Scopes untersuchen
      2. 6.2.2 Ausführungszeiten von Funktionen vermessen
      3. 6.2.3 Serviceabhängigkeiten untersuchen
        1. Zusammenfassung
    3. 6.3 Die WebStorm-IDE
      1. Zusammenfassung
  11. 7 Antworten auf häufig gestellte Fragen
    1. 7.1 AngularJS-Module: Wie strukturieren wir Anwendungen mit Modulen?
      1. 7.1.1 Module in AngularJS
      2. 7.1.2 Wann ist Modularisierung sinnvoll?
      3. 7.1.3 Ordnerstruktur
        1. Zusammenfassung
    2. 7.2 Promises: Wie gehen wir mit Asynchronität um?
      1. 7.2.1 Asynchronität und nichtblockierende Aufrufe
      2. 7.2.2 Was sind Promises?
      3. 7.2.3 Promises in AngularJS
      4. 7.2.4 Promises in AngularJS testen
        1. Zusammenfassung
    3. 7.3 AngularJS und RequireJS: Ist diese Kombination sinnvoll?
      1. 7.3.1 Was ist RequireJS?
      2. 7.3.2 Ein Beispiel mit RequireJS
      3. 7.3.3 AngularJS und RequireJS
      4. 7.3.4 Testen mit RequireJS
      5. 7.3.5 Die Antwort
        1. Zusammenfassung
    4. 7.4 Mobile: Unterstützt AngularJS mobile Endgeräte?
      1. 7.4.1 Touch-Events unterstützen
      2. 7.4.2 Die Swipe-Direktiven
      3. 7.4.3 Der $swipe-Service
        1. Zusammenfassung
  12. Index
  13. Footnote