Angular JS: Moderne Webanwendungen und Single Page Applications mit JavaScript - Manfred Steyer - ebook

Angular JS: Moderne Webanwendungen und Single Page Applications mit JavaScript ebook

Manfred Steyer

0,0

Opis

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. Aus dem Inhalt: - Moderne JavaScript-basierte Single-Page-Applications (SPA) mit AngularJS erstellen - RESTful Services via AJAX anbinden - Formulare bereitstellen und Eingaben validieren - Logische Seiten innerhalb einer SPA mit Routing und Deep-Linking realisieren - Internationalisierung von Ein- und Ausgaben - Umgang mit mobilen und touch-basierten Anwendungen sowie Animationen - Testautomatisierung mit Jasmine - AngularJS an eigene Bedürfnisse anpassen - Wiederverwendbare Komponenten mit Direktiven bereitstellen - Moderne Security-Szenarien umsetzen - AngularJS mit anderen Technologien und Standards wie RequireJS, Yoeman, Bower, Grunt, TypeScript oder OAuth 2.0 kombinieren

Ebooka przeczytasz w aplikacjach Legimi na:

Androidzie
iOS
czytnikach certyfikowanych
przez Legimi
Windows
10
Windows
Phone

Liczba stron: 609

Odsłuch ebooka (TTS) dostepny w abonamencie „ebooki+audiobooki bez limitu” w aplikacjach Legimi na:

Androidzie
iOS



AngularJS: Moderne Webanwendungen und Single Page Applications mit JavaScript

ManfredSteyer

VildanSoftic

Vorwort

Während für gute Web-Anwendungen vor rund zehn Jahren noch die Regel galt, so viele Aufgaben wie möglich auf dem Server zu erledigen, stützen sich moderne Web-Anwendungen auf clientseitige Techniken, allen voran JavaScript. Dies steigert die Benutzerfreundlichkeit und schafft die Möglichkeit der Anpassung an die Auflösungen und Formfaktoren der vielen unterschiedlichen klassischen und mobilen Plattformen.

Single Page Applications (SPA) spiegeln einen derzeit äußerst beliebten Architekturstil für solche Web-Anwendungen wieder. Wie der Name schon vermuten lässt, bestehen solche Anwendungen aus lediglich einer einzigen Seite, die ein Browser auf klassischem Weg abruft und anzeigt. Alle weiteren Seiten und Daten bezieht die SPA bei Bedarf via AJAX.

Das populäre JavaScript-Framework AngularJS, welches aus dem Hause Google stammt, hilft bei der Erstellung von Anwendungen, die diesen Architekturstil verfolgen. Es bietet unter anderem Unterstützung für Datenbindung, beim Validieren von Daten oder dem Arbeiten mit Vorlagen. Darüber hinaus bietet es Konzepte zum Strukturieren von Quellcode sowie zur Schaffung wartbarer, wiederverwendbarer, aber auch gut testbarer Programmteile. Das vorliegende Buch präsentiert die Möglichkeiten von AngularJS. Dabei beschränkt es sich nicht nur auf die Grundlagen, sondern präsentiert auch Lösungen für Fälle, die das SPA-Framework nicht direkt abdeckt.

Zielgruppe

Das Buch richtet sich an Web-Entwickler, die bereits grundlegende Erfahrung mit HTML, CSS und JavaScript haben und nun mit AngularJS Single Page Applications entwickeln wollen. Dabei bezieht es sich auf die Version 1.3, welche beim Verfassen der Texte die aktuellste Version war.

Zielsetzung des Buchs

Zielsetzung dieses Buchs ist es, dem Leser anhand von Beispielen zu zeigen, wie er AngularJS zur Entwicklung von Single Page Applications nutzen kann. Dabei geht es auf die Möglichkeiten von AngularJS ein und präsentiert auch Lösungen für Aspekte, die AngularJS nicht direkt unterstützt. Für eine vollständige Funktionsauflistung verweist es auf die online vorliegende Dokumentation.

Aufbau des Buchs

Das Buch besteht aus 16 Kapiteln. Die nachfolgende Auflistung zeigt, was diese bieten:

Kapitel 1, Paradigmen in JavaScript: Obwohl das vorliegende Buch JavaScript-Kenntnisse voraussetzt, weist es mit dem ersten Kapitel auf einige Merkmale der Sprache hin, die Entwicklern, die JavaScript bereits benutzt haben, nicht immer geläufig sind. Dazu gehört die Beschreibung von funktionalen, objektorientierten und modularen Aspekten wie Closures, Konstruktorfunktionen, Vererbung über Prototypen und dem Revealing Module Pattern. Wer diese Grundlagen beherrscht, kann dieses Kapitel getrost überspringen.

Kapitel 2, Einfühung in AngularJS: Nach einer Diskussion der Ideen hinter Single Page Applications und des Architekturmusters MVC zeigt dieses Kapitel zunächst die Möglichkeiten von AngularJS anhand eines Beispiels auf. Danach geht es auf einige Konzepte von AngularJS näher ein.

Kapitel 3, HTTP-Services: Die Ideen hinter HTTP sowie das Nutzen von HTTP-basierten Ressourcen, wie HTTP-Services, sind Themen dieses Kapitels. Es geht auf die Möglichkeiten von $http ein und zeigt, wie Anwendungen REST-basierte Services mit ngResource konsumieren können.

Kapitel 4, Formulare und Validierung: Dieses Kapitel zeigt, wie Anwendungen via AngularJS Daten an Formulare binden und Eingaben validieren können. Dabei geht es auf die Validierungsregeln von AngularJS ebenso ein wie auf die Möglichkeit zur Erstellung eigener Validierungsregeln. Daneben zeigt es, wie AngularJS das Konzept der Formatter zum Aufbereiten von Daten für Formularfelder sowie das Konzept der Parser zum Überführen von Eingaben ins Model nutzt.

Kapitel 5, Routing: Dieses Kapitel zeigt, wie eine Single Page Application dem Benutzer mittels Routing verschiedene Seiten, die sie bei Bedarf nachlädt, präsentieren und dabei sowohl Lesezeichen als auch die Nutzung der Schaltfläche Zurück unterstützen kann. Neben dem vom AngularJS-Team angebotenen Modul ngRoute geht es dazu auch auf das freie Modul UI-Router ein.

Kapitel 6, Internationalisierung: Das Anpassen von AngularJS-Anwendungen für Benutzer verschiedener Länder und Sprachen ist Thema dieses Kapitels. Dazu geht es auf die Nutzung von Übersetzungen mit dem freien Modul angular-translate sowie auf die Arbeit mit verschiedenen Datenformaten unter Verwendung des Frameworks Globalize ein.

Kapitel 7, Animationen und Touch: Um dem Entwickler möglichst einfache Werzeuge zum Einbau von Animationen zu bieten, befasst sich dieses Kapitel mit den Funktionen des Moduls ngAnimate und geht insbesondere auf dessen zahlreiche Änderungen in der vorliegenden Version 1.3 ein. Zusätzlich ist auch das Zusammenspiel mit der Animations-Bibliothek animate.css sowie der Einsatz von Touch-Gesten in AngularJS demons-triert.

Kapitel 8, Asynchroner Code mit Promises: Dieses Kapitel geht auf die Notwendigkeit asynchroner Aufrufe in JavaScript ein und zeigt, wie das Konzept der Promises bei der Arbeit mit solchen Aufrufen unterstützen kann. Dieses stellt es zunächst anhand der populären Bibliothek Q vor. Anschließend zeigt es, wie AngularJS die Ideen von Q mit dem daran angelehnten Service $q verfügbar macht.

Kapitel 9, Testing: Wie die Qualität von AngularJS-Code mit automatisierten Tests geprüft werden kann, zeigt dieses Kapitel. Es geht dazu auf das Testing-Framework jasmine ein und zeigt, wie der Entwickler damit isolierte Komponententests für AngularJS-Code schaffen kann. Dazu bespricht es auch das Modul angular-mocks, das dabei unterstützt. Im Anschluss daran bespricht es die Möglichkeiten zur Schaffung von End-2-End-Tests mit Protractor.

Kapitel 10, Modularisierung und Verwaltung von Abhängigkeiten mit RequireJS: Hinter diesem sperrigen Titel verbirgt sich ein Blick auf Ansätze, mit welchen sich auch größere Projekte bewältigen lassen. Dazu stellt das Kapitel Konzepte der Modularisierung von JavaScript-Code anhand der Asynchronouos Module Definition (AMD) unter Verwendung von RequireJS vor.

Kapitel 11, Authentifizierung und Autorisierung: Dieses Kapitel zeigt, wie eine AngularJS-Anwendung im Namen des Benutzers auf HTTP-Services zugreifen kann. Dazu geht es auf HTTP BASIC ebenso ein wie auf die Standards OAuth 2.0 und OpenId Connect, welche unter anderem Single-Sign-On-Szenarien unterstützen.

Kapitel 12, Interaktionen mit dem Browser: In diesem Kapitel sind die Möglichkeiten zur Bearbeitung des DOM-Baums mit jqLite vorgestellt. Anschließend daran sind die von AngularJS zur Verfügung gestellten Ummantelungen des document- und window-Objekts sowie die leichter zu testenden Services $interval und $timeout vorgestellt. Zusätzlich dazu ist das Thema Datenpersistierung mit dem Service ngCookies erläutert.

Kapitel 13, Services näher betrachtet: Die verschiedenen Optionen, um Services in AngularJS zu erstellen, sowie die Erläuterung der zahlreichen Fachbegriffe und was dahinter steckt, sind das Thema dieses Kapitels. Ein aufbauendes Beispiel hilft zudem verständlich zu machen, wann welche Variante in Betracht zu ziehen ist. Abschließend geht das Kapitel auf die Verwendung von Dekoratoren sowie deren Möglichkeiten ein.

Kapitel 14, Benutzerdefinierte Direktiven: Dieses Kapitel beschreibt die Schaffung wiederverwendbarer Komponenten, welche unter anderem in Form eigener Attribute und Elemente genutzt werden können.

Kapitel 15, User Interface Design: Da Web-Anwendungen stark visuell geprägt sind, stellt dieses Kapitel mit Twitter Bootstrap ein CSS-Framework für einfache und schön gestaltete Oberflächen ein. Danach zeigt es, wie mit dem Direktiven-Paket Angular UI Bootstrap dieses mit AngularJS vereint wird. Den Abschluss bilden die Demonstration von zwei Implementierungen eines Datengitters.

Kapitel 16, Werkzeugunterstützung: Im abschließenden Kapitel sind Werkzeuge vorgestellt, welche die alltägliche Entwicklungsarbeit vereinfachen und zum Teil automatisieren können. Dazu ist der Frontend-Paket-Manager Bower, das Automatisierungswerkzeug Grunt sowie der Projektgenerator Yeoman vorgestellt. Anschließend daran ist das JavaScript Superset TypeScript vorgestellt, welches mit einem statischem Typsystem, Konstrukten wie Interfaces, Klassen, Modulen und Lambda-Ausdrücken aufwartet.

Wie Sie dieses Buch lesen sollten

Während die ersten beiden Kapitel ausgwählte Aspekte von JavaScript sowie eine Einführung in AngularJS und dessen Konzepte bietet, widmen sich alle weiteren Kapitel ausgewählten Themen aus dem Umfeld von AngularJS. Leser, die sich mit den ersten beiden Kapiteln oder schon mit den darin vermittelten Aspekten beschäftigt haben, können alle weiteren Kapitel prinzipiell unabhängig voneinander lesen. Da jedoch die einzelnen Komponenten von AngularJS teils sehr stark voneinander abhängen, müssen Sie bei einer nicht-sequentiellen Vorgehensweise ggf. den vorherrschenden kapitelübergreifenden Verweisen folgen.

Quellcodebeispiele, Online-Services und Errata

Die Autoren stellen auf www.angular.at sämtliche in diesem Buch präsentierten Quellcodebeispiele sowie Online-Services, die die Beispiele zu Demonstrationszwecken nutzen und auch in eigene Beispiele eingebunden werden können, zur Verfügung. Darüber hi-naus werden die Autoren auf dieser Seite weitere Informationen zu AngularJS sowie ggf. Errata zum vorliegenden Buch veröffentlichen. Daneben bietet es die Möglichkeit, mit den Autoren direkt in Kontakt zu treten.

Danksagungen

Unseren Dank für ihre Mitwirkung an diesem Buch möchten wir aussprechen an

unsere Familienangehörigen, die uns neben unserem Hauptberuf das Umfeld geschaffen haben, auch an manchen Abenden und Wochenenden an diesem Buch arbeiten zu können

die O’Reilly Lektoren Florian Helmchen und Ariane Hesse, die dieses Buch von der Verlagsseite aus betreut und sprachlich verbessert haben

Gerhard Alfes von mediaService, die sich um die optischen Aspekte des Buchs gekümmert hat

Manfred Steyer und Vildan Softic, Graz im Januar 2015

Kapitel 2. Einführung in AngularJS

Das Erstellen moderner JavaScript-getriebener Anwendungen gestaltet sich anspruchsvoll: Der Entwickler muss sich um das Binden von Daten, um das Aufrufen von Services sowie um das Validieren von Eingaben kümmern. Der Quellcode, der dabei entsteht, soll darüber hinaus auch überschaubar, wartbar und testbar sein. All dies ist zwar mit JavaScript möglich, allerdings erfordert dies viel Disziplin seitens der Entwickler und geht mit der Erstellung großer Mengen ähnlicher Codestrecken einher. JavaScript-Frameworks versprechen hier Abhilfe. Eines dieser Frameworks ist AngularJS, welches aus der Feder von Google stammt. Es zeichnet sich dadurch aus, dass es sehr viele Aspekte moderner JavaScript-basierter Single Page Applications unterstützt und dabei auch die Kriterien Wartbarkeit und Testbarkeit in den Vordergrund stellt.

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!