Moderne Webanwendungen mit AngularJS
Von Philipp Tarasiewicz und Robin Böhm
()
Über dieses E-Book
AngularJS heranführen und einen Teil der Tool-Chain, u. a. das Konzept der Direktiven, vorstellen. Zu diesem Zweck wird ein kleines Projekt mit AngularJS
entwickelt, eine einfache Anwendung zur Visualisierung eines dreidimensionalen Würfels. In den Kapiteln zwei und drei werden weitere Konzepte und Features anhand
des Beispiels erläutert und dargelegt, welche Möglichkeiten das Framework bietet, um testgetrieben entwickeln zu können.
Ähnlich wie Moderne Webanwendungen mit AngularJS
Titel in dieser Serie (100)
Algorithmen: Grundlagen und Implementierung Bewertung: 0 von 5 Sternen0 BewertungenErfolgreiche Spieleentwicklung: OpenGL, OpenAL und KI Bewertung: 0 von 5 Sternen0 BewertungenNFC: Near Field Communication für Android-Entwickler Bewertung: 5 von 5 Sternen5/5Einstieg in Google Go Bewertung: 0 von 5 Sternen0 BewertungenHTML5 Security Bewertung: 0 von 5 Sternen0 BewertungenIT Wissensmanagement: Theorie und Praxis Bewertung: 0 von 5 Sternen0 BewertungenSharePoint-Entwicklung für Einsteiger Bewertung: 0 von 5 Sternen0 BewertungenF#: Ein praktischer Einstieg Bewertung: 0 von 5 Sternen0 BewertungenSkalierbare Softwaresysteme: Design, Betrieb und Optimierungspotenziale Bewertung: 0 von 5 Sternen0 BewertungenUser Experience Testing 3.0: Status Quo, Entwicklung und Trends Bewertung: 0 von 5 Sternen0 BewertungenGeolocation mit PHP: Foursquare-API, Google Places & Qype Bewertung: 0 von 5 Sternen0 BewertungenServiceorientierte Architektur: Anforderungen, Konzeption und Praxiserfahrungen Bewertung: 0 von 5 Sternen0 BewertungenTitanium Mobile: Multi Platform Apps mit JavaScript Bewertung: 0 von 5 Sternen0 BewertungenJavaScript für Eclipse-Entwickler: Orion, RAP und GWT Bewertung: 0 von 5 Sternen0 BewertungenUX Design für Tablet-Websites: Ein Überblick Bewertung: 0 von 5 Sternen0 BewertungenJavaScript auf dem Server Bewertung: 0 von 5 Sternen0 BewertungenJava 7: Fork-Join-Framework und Phaser Bewertung: 0 von 5 Sternen0 BewertungenBPM: Strategien und Anwendungsfälle Bewertung: 0 von 5 Sternen0 BewertungenTFS 2012 Versionskontrolle: Grundlagen, Check-In Policies und Branch-Modelle Bewertung: 0 von 5 Sternen0 BewertungenZend Framework 2: Für Einsteiger und Umsteiger Bewertung: 0 von 5 Sternen0 BewertungenHTML5 für Mobile Web Bewertung: 0 von 5 Sternen0 BewertungenSoftwareentwicklungsprozess: Von der ersten Idee bis zur Installation Bewertung: 0 von 5 Sternen0 BewertungenJava EE Security Bewertung: 0 von 5 Sternen0 BewertungenAgile Architektur mit .NET - Grundlagen und Best Practices Bewertung: 0 von 5 Sternen0 BewertungenTFS 2012 Anforderungsmanagement: Work Items und Prozessvorlagen Bewertung: 0 von 5 Sternen0 BewertungenQualitätssicherung mit JavaScript und PHP Bewertung: 0 von 5 Sternen0 BewertungenJava EE 7: Ein Ausblick Bewertung: 0 von 5 Sternen0 BewertungenÜberzeugende Präsentationen: Konzeption, Technik und Design Bewertung: 0 von 5 Sternen0 BewertungenErfolgreiche Spieleentwicklung: OpenCL Bewertung: 0 von 5 Sternen0 BewertungenSpring: Vier Perspektiven auf Framework und Ökosystem Bewertung: 0 von 5 Sternen0 Bewertungen
Ähnliche E-Books
Expertentipps zu Angular: Neuerungen in Angular 6, Umgang mit Microservices, Performanz und UX-Design Bewertung: 0 von 5 Sternen0 BewertungenASP.NET Core: Eine Einführung Bewertung: 0 von 5 Sternen0 BewertungenAngular 2: Moderne Frontends für alle Plattformen entwickeln Bewertung: 0 von 5 Sternen0 BewertungenWeb Services mit Apache CXF: Schnell und einfach erklärt Bewertung: 0 von 5 Sternen0 BewertungenSpring: Vier Perspektiven auf Framework und Ökosystem Bewertung: 0 von 5 Sternen0 BewertungenWebentwicklung mit dem Play Framework Bewertung: 0 von 5 Sternen0 BewertungenApps mit Azure Bewertung: 0 von 5 Sternen0 BewertungenJavaScript für Java-Entwickler Bewertung: 0 von 5 Sternen0 BewertungenJavaFX Rendering & 3D Bewertung: 0 von 5 Sternen0 BewertungenDie Serverwelt von Node.js Bewertung: 0 von 5 Sternen0 BewertungenXtend beyond Java: DSL für mobile Business-Apps Bewertung: 0 von 5 Sternen0 BewertungenEnterprise Java Web Services Bewertung: 0 von 5 Sternen0 BewertungenAufsetzen, Testen und Betrieb einer Android-App Bewertung: 0 von 5 Sternen0 BewertungenCDI - Dependency Injection in Java EE 7: Dependency Injection in Java EE 7 Bewertung: 0 von 5 Sternen0 BewertungenAngularJS: Testing und Best Practices Bewertung: 5 von 5 Sternen5/5Vaadin mit Eclipse, Clojure und OSGi Bewertung: 0 von 5 Sternen0 BewertungenVue.js kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenAngular: Das Praxisbuch zu Grundlagen und Best Practices Bewertung: 0 von 5 Sternen0 BewertungenSoftware Development Trends: Wegweisende Beiträge für eine neue IT: Wegweisende Beiträge für eine neue IT Bewertung: 0 von 5 Sternen0 BewertungenSpring Boot und Spring Cloud Bewertung: 5 von 5 Sternen5/5React Native: Native Apps parallel für Android und iOS entwickeln Bewertung: 0 von 5 Sternen0 BewertungenCanvas kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenVue.js für alle: Wissenswertes für Einsteiger und Experten Bewertung: 0 von 5 Sternen0 BewertungenSoftware entwickeln mit C#, WPF und dem MVVM-Konzept Bewertung: 0 von 5 Sternen0 BewertungenJavaScript und TypeScript für C#-Entwickler Bewertung: 0 von 5 Sternen0 BewertungenApache Tapestry: Einstieg in die komponentenorientierte Webentwicklung Bewertung: 0 von 5 Sternen0 BewertungenArchitekturpatterns mit Python: Test-Driven Development, Domain-Driven Design und Event-Driven Microservices praktisch umgesetzt Bewertung: 0 von 5 Sternen0 BewertungenDynamic Proxies: Effizient programmieren Bewertung: 0 von 5 Sternen0 BewertungenOpenLaszlo: schnell + kompakt Bewertung: 0 von 5 Sternen0 BewertungenProgressive Web-Apps: Offlinefähige Web-Anwendungen mit nativen Qualitäten Bewertung: 0 von 5 Sternen0 Bewertungen
Softwareentwicklung & -technik für Sie
Ebenen in Adobe Photoshop CC und Photoshop Elements - Gewusst wie Bewertung: 0 von 5 Sternen0 BewertungenAgile Spiele – kurz & gut: Für Agile Coaches und Scrum Master Bewertung: 0 von 5 Sternen0 BewertungenSketchnotes in der IT: Abstrakte Themen mit Leichtigkeit visualisieren Bewertung: 0 von 5 Sternen0 BewertungenScrum: Agiles Projektmanagement und Scrum erfolgreich anwenden Bewertung: 0 von 5 Sternen0 BewertungenSoftwarearchitektur für Dummies Bewertung: 0 von 5 Sternen0 BewertungenKnigge für Softwarearchitekten. Reloaded Bewertung: 0 von 5 Sternen0 BewertungenKompaktes Managementwissen: Die Grunstruktur agiler Prozesse Bewertung: 0 von 5 Sternen0 BewertungenUML @ Classroom: Eine Einführung in die objektorientierte Modellierung Bewertung: 0 von 5 Sternen0 BewertungenKOMA-Script: Eine Sammlung von Klassen und Paketen für LaTeX 2e Bewertung: 0 von 5 Sternen0 BewertungenEinfach Java: Gleich richtig programmieren lernen Bewertung: 0 von 5 Sternen0 Bewertungen3D-Drucken für Einsteiger: Ohne Frust 3D-Drucker selbst nutzen Bewertung: 0 von 5 Sternen0 BewertungenDigital Paintbook Volume 3 Bewertung: 5 von 5 Sternen5/5Weniger schlecht Projekte managen: Ohne Krise zum Projekterfolg Bewertung: 0 von 5 Sternen0 BewertungenDigital Painting Workbook Bewertung: 0 von 5 Sternen0 BewertungenQualität in IT-Architekturen: Management Bewertung: 0 von 5 Sternen0 BewertungenKanban für Anfänger: Grundlegendes über den Einsatz von Kanban in der Industrie und der Softwareentwicklung Bewertung: 0 von 5 Sternen0 BewertungenChange Management für Anfänger: Veränderungsprozesse Verstehen und Aktiv Gestalten Bewertung: 1 von 5 Sternen1/5Agiles Requirements Engineering und Testen Bewertung: 0 von 5 Sternen0 BewertungenProgrammieren lernen mit Python 3: Schnelleinstieg für Beginner Bewertung: 0 von 5 Sternen0 BewertungenZertifizierung für Softwarearchitekten: Ihr Weg zur iSAQB-CPSA-F-Prüfung Bewertung: 0 von 5 Sternen0 BewertungenEinfach Python: Gleich richtig programmieren lernen Bewertung: 0 von 5 Sternen0 BewertungenLean Production - Grundlagen: Das Prinzip der schlanken Produktion verstehen und in der Praxis anwenden. Schlank zur Wertschöpfung! Bewertung: 0 von 5 Sternen0 BewertungenProjektmanagement für Anfänger: Grundlagen, -begriffe und Tools Bewertung: 0 von 5 Sternen0 BewertungenAgiles Produktmanagement mit Scrum: Erfolgreich als Product Owner arbeiten Bewertung: 3 von 5 Sternen3/5Einstieg in Reguläre Ausdrücke Bewertung: 0 von 5 Sternen0 BewertungenScrum: Agiles Projektmanagement erfolgreich einsetzen Bewertung: 4 von 5 Sternen4/5Prinzipien des Softwaredesigns: Entwurfsstrategien für komplexe Systeme Bewertung: 0 von 5 Sternen0 BewertungenAgiles Projektmanagement: Scrum für Einsteiger Bewertung: 0 von 5 Sternen0 BewertungenIT Wissensmanagement: Theorie und Praxis Bewertung: 0 von 5 Sternen0 Bewertungen
Rezensionen für Moderne Webanwendungen mit AngularJS
0 Bewertungen0 Rezensionen
Buchvorschau
Moderne Webanwendungen mit AngularJS - Philipp Tarasiewicz
Philipp Tarasiewicz, Robin Böhm
Moderne Webanwendungen mit AngularJS
ISBN: 978-3-86802-506-4
© 2014 entwickler.press
Ein Imprint der Software & Support Media GmbH
1 Erstellung einer Projektstruktur
AngularJS ist ein JavaScript-Framework für die Entwicklung von modernen clientseitigen Webanwendungen. Erstmalig halten bewährte Konzepte wie Dependency Injection und konsequente testgetriebene Entwicklung Einzug in die JavaScript-Welt und machen diese somit attraktiv für den Enterprise-Einsatz. Das Framework bietet hier einige sehr intuitive APIs und achtet im hohen Maße auf das Einhalten und Bilden von Schnittstellen.
In diesem shortcut wollen wir Sie an die Entwicklung mit AngularJS heranführen und Ihnen einen Teil der Tool-Chain vorstellen, die sich um das Framework gebildet hat, um den Entwicklungsprozess zu vereinfachen. Insbesondere werden wir Ihnen zeigen, wie Sie sich mithilfe der Zwei-Wege-Datenbindung (Two-Way Data Binding) große Teile von Boilerplate-Code sparen können. Außerdem stellen wir Ihnen das Konzept der Direktiven vor. Damit sind Sie in der Lage, HTML um eigene Elemente und Attribute zu erweitern, um auf diese Weise wiederverwendbare UI-Komponenten und Anwendungsbausteine zu erstellen.
Das Cube-Projekt
Um die soeben erwähnten Konzepte an einem praktischen Beispiel zu erklären, werden wir mit AngularJS ein kleines Projekt entwickeln. Wir haben diesem Projekt den Namen Cube verpasst. Cube ist eine einfache Anwendung zur Visualisierung eines dreidimensionalen Würfels, bei dem wir den X-, Y- und Z-Rotationsgrad steuern können. Ein Kern;aspekt der Anwendung wird also sein, das entsprechende
Tool-Chain für das Beispiel
In einem der nächsten Kapitel werden wir für das Beispiel einige Tests schreiben. Dazu benötigen wir Karma, eine Testausführungsumgebung für JavaScript-Anwendungen. Karma benötigt Node.js als Laufzeitumgebung. Der Node.js-Installer kann unter [1] für alle gängigen Plattformen heruntergeladen werden. Nachdem wir Node.js installiert haben, können wir Karma mit dem folgenden Konsolenbefehl installieren:
npm install -g karma
Das Beispiel erfordert darüber hinaus, dass wir die Applikation mithilfe eines Webservers ausliefern. Wer noch keinen lokalen Webserver installiert hat, kann sich mit dem folgenden Befehl das http-server-Modul für Node.js installieren:
npm install -g http-server
Mit dem Befehl http-server kann nun in jedem Verzeichnis ein HTTP-Server gestartet werden, der standardmäßig über Port 8080 das aktuelle Verzeichnis ausliefert.
Die Projektstruktur
Zunächst wollen wir allerdings klein anfangen, indem wir die grundlegende Projektstruktur erstellen und AngularJS einbinden. Dazu erstellen wir für unser Projekt ein Hauptverzeichnis mit dem Namen cube. In diesem Verzeichnis legen wir zwei Unterverzeichnisse app und test an. Wie wir hier an dem test-Verzeichnis erkennen können, wollen wir hinterher für unsere Anwendung auch Testfälle schreiben. An dieser Stelle machen wir jedoch zunächst weiter, indem wir in dem app-Verzeichnis die Datei index.html erstellen. Diese Datei dient als Einstiegspunkt in unsere Applikation.
Wir beginnen damit, in der index.html eine simple HTML-Struktur aufzubauen und AngularJS einzubinden (Listing 1.1). Die verschiedenen Versionen der Frameworks können wir auf [2] herunterladen. Für unser Beispiel nutzen wir AngularJS in Version 1.2.4. Die entsprechende Datei, die wir benötigen, um das Framework in unserer Anwendung verfügbar zu machen, heißt angular.js, und wir können sie unter [3] herunterladen. Wie in Listing 1.1 durch das Tag angedeutet ist, erwartet unsere Anwendung, dass sich das Framework in dem Verzeichnis lib/angular/ befindet. Somit müssen wir in dem app-Verzeichnis noch das Verzeichnis mit dem Namen lib erstellen und in diesem das angular-Verzeichnis anlegen. In Letzteres kopieren wir schließlich die Datei angular.js. Damit wären wir mit dem Aufsetzen der Projektstruktur auch schon fertig.