Konzept und Implementierung einer Single Page Application mit AngularJS


Seminararbeit, 2019
29 Seiten, Note: 1,3

Leseprobe

Inhaltsverzeichnis

Abbildungsverzeichnis

Abkürzungsverzeichnis

1. Einleitung
1.1 Problemstellung
1.2 Motivation
1.3 Forschungsfrage
1.4 Ziel und Aufbau der Arbeit

2. Einführung in Angular
2.1 HTML und CSS
2.2 JavaScript
2.3 MVC
2.4 Single Page Application (SPA)
2.5 Angular

3. Hauptteil
3.1 Methodisches Vorgehen
3.2 Implementierungsgrundlagen
3.2.1 Ordnerstruktur
3.2.2 Extern eingebundene Inhalte
3.3 Implementierung View
3.3.1 Index.html
3.3.2 home.html
3.3.3 game.html
3.4 Implementierung Controller
3.4.1 game.js
3.4.2 controller.js
3.4.3 service.js
3.5 Auswertung und Diskussion

4. Schluss
4.1 Fazit
4.2 Reflektion

Literaturverzeichnis

Internetdokument

Anhang

Abbildungsverzeichnis

Abbildung 1: MVC Muster

Abbildung 2: SPA Lifecycle

Abbildung 3: Two-Way Databinding

Abbildung 4: View game.html

Abkürzungsverzeichnis

Abbildung in dieser Leseprobe nicht enthalten

1. Einleitung

1.1 Problemstellung

Weltweit verwenden immer mehr Menschen das Internet. Das belegt die Studie von In- ternational Telecommunication Union (ITU) die besagt, dass die Anzahl 2005 noch bei 1 Milliarden und 2017 bereits 3,9 Milliarden Benutzern lag.1 Auch die Nutzungsdauer des Internet ist gestiegen. 2005 lag sie in Deutschland bei 46 Minuten am Tag und hat sich 2018 mit 196 Minuten mehr als vervierfacht.2 Daraus kann abgeleitet werden, dass die Auslastung der Webserver stetig steigt. Um diese Auslastung zu senken, können Single Page Applications (SPA), welche nur teilweise den Inhalt der Seite nachladen, verwendet werden. Ein weitere Herausforderung ist, dass die Anforderungen der User an die Web- seiten immer größer werden. Schlagwörter sind User Experience (UX) und Usability. Ersteres beschreibt das subjektive Nutzererlebnis, Usability hingegen die Benutzbarkeit der Webseiten.3 Durch die Umsetzung der Anforderungen, steigt die Komplexität der Webanwendung und in Folge dessen die des Programmcodes. Um einen komplexen Pro- grammcode zu entwickeln, zu testen und zu warten, sollten bestimmte Architekturmuster eingehalten werden. Dies kann durch das MVC Muster erreicht werden, welches die Pro- grammkomponenten in Model, View und Controller unterteilt. Somit ist eine Single Page Applikation mit einem MVC Muster geeignet, um die oben genannten Herausforderun- gen zu adressieren. Ob die Kombination umsetzbar ist, soll in dieser Hausarbeit heraus- gearbeitet werden.

1.2 Motivation

Anfang des Jahres informierte ich mich über Stellen im Bereich der Programmierung und stellte fest, dass viele Firmen Mitarbeiter suchen, welche neben JavaScript auch Frame- works wie Angular beherrschen. Ebenfalls ist das Thema einer SPA in meinem berufli- chen Umfeld sehr aktuell. Der Grund ist, dass ich im Mai eine Stelle als Junior Entwickler mit dem Schwerpunkt Web Frontend antrat und mich daher mit effizienteren und fehler- toleranteren Programmierarchitekturen beschäftige.

1.3 Forschungsfrage

Wie kann eine Single Page Application mit dem Architektur Muster MVC umgesetzt werden? Die Antwort erfolgt prototypisch am Beispiel des JavaScript Frameworks An- gularJS.

1.4 Ziel und Aufbau der Arbeit

Im einführenden Kapitel wird zum einen die Basis der Webtechnologien HTML, CSS und JavaScript beschrieben. Zum anderen werden die in der Einleitung bereits erwähnten Architekturmuster MVC und SPA genauer erläutert. Im nächsten Einführungsabschnitt wird auf das Framework AngularJS eingegangen, welches für den Prototyp verwendet wurde. Um die Erklärungen zu verdeutlichen sind vereinzelt Beispielcodes mit in den Text aufgenommen worden. Im Hauptteil wird nun die implementierte SPA beschrieben. Dabei werden erst die Grundlagen geklärt. Anschließend werden die einzelnen Files, d.h. der Programmcode beleuchtet. Im Schluss wird nochmal auf die Vor- und Nachteile von Angular eingegangen, sowie ein Fazit gezogen.

Ziel dieser Arbeit ist es, dem Leser die Implementierung einer Single Page Applikation mit JavaScript Framework AngularJS zu erläutern und anschließend die Eignung dieses Frameworks für den Web-Architekturansatz MVC mit SPA zu bewerten.

2. Einführung in Angular

2.1 HTML und CSS

HTML steht für Hyper Text Markup Language und wurde das erste Mal 1991 von Tim Berners-Lee in einer E-Mail erwähnt4. Er hat es in dem Dokument „HTML Tags“ welches 1992 erschienen ist genauer beschrieben.5 HTML ist eine Auszeichnungssprache, die In- formationen durch sogenannte HTML Tags semantisiert und durch Verschachtelung in eine Hierarchie einordnet. Erst dadurch kann der Webbrowser Informationen interpretie- ren und somit anzeigen.6 Ein HTML Tag einer Überschrift ist beispielsweise <h1> Über- schrift </h1>. Innerhalb der Tags stehen die semantisierten Informationen. Die aktuellste Version ist HTML5.2, welche durch die Empfehlung von W3C initial am 14. Dezember 20147 und die Major Version 5.2 im Dezember 20178 erschienen ist.

Um die optische Erscheinung des Inhalts zu manipulieren werden die HTML Elemente durch CSS (Cascading Style Sheets) erweitert. Darunter werden beispielsweise Farben, Formen aber auch Abstände zwischen den Elementen verstanden. Diese Technologie wurde ebenfalls durch die Empfehlung von W3C 1996 veröffentlicht.9 Die aktuellste Ver- sion ist CSS4 oder auch Selectors Level 4 genannt, welche im September 2011 von W3C veröffentlicht wurde.10 Dabei gibt es vordefinierte CSS-Frameworks, welche eingebun- den werden können und darin die gängigen HTML-Tags bereits optisch verändert wer- den, ohne selbst ein CSS File zu erstellen. Ein Beispiel dafür ist Bootstrap, welches in dem Prototyp verwendet wurde.

2.2 JavaScript

JavaScript ist eine Programmiersprache, welche im Jahre 1995 vom Brendan Eich entwi- ckelt wurde. Dabei wählte er den Namen bewusst. Grund dafür war die Popularität der Programmiersprache Java, wobei diese sonst nichts mit JavaScript zu tun hat. Brendan Eich ermöglichte dadurch dynamisch Webinhalte, indem die Inhalte basiert auf Benutze- rinteraktionen11 verändert werden. Die gängigste JavaScript Anwendung ist die des cli- entseitigen JavaScript Interpreters, der in Webbrowsern enthalten ist. Der Interpreter führt das Skript aus, welches wiederum das Document Object Model (DOM) manipuliert und dadurch das angezeigte HTML Dokumente verändert.12 Dabei ist die Definition von DOM eine plattform- und programmiersprachenunabhängige Schnittstelle, welche die dynamische Anpassung eines Dokuments ermöglicht 13. In diesen Arbeit wird unter DOM der HTML DOM verstanden, welcher die Struktur respektive Verschachtelung der HTML Tags beschreibt.

Um JavaScript zu verwenden, wird der Code direkt zwischen den HTML Tags <script></script> implementiert. Eine alternative Möglichkeit ist es, den Pfad des Ja- vaScript Files als Referenz innerhalb des Head-Tags des HTML Dokuments einzubetten. Anschließend können die eingebundenen Funktionen innerhalb der verschiedenen HTML Tags aufgerufen werden. Beispielsweise wird mit folgender Zeile ein Button definiert. Durch drücken des Buttons wird eine Nachrichtenbox mit dem Inhalt „der Button wurde gedrückt“ erscheinen.

<button onclick=“alert(‘der Button wurde gedrückt‘);“> Alert </button>

Im Zusammenhang mit JavaScript sollte auch AJAX kurz erläutert werden. AJAX ist ein Akronym für asynchrones JavaScript und XML. Es werden mithilfe von JavaScript XML Dokumente erzeugt und verarbeitet.14

Wie für CSS gibt es auch für JavaScript Frameworks. In dieser Arbeit wird das JavaScript Framework AngularJS verwendet

2.3 MVC

MVC steht für Model, View und Controller. Es ist ein Architekturmuster, in dem die Anwendungskomponenten eines Programms oder einer Webseite in diese drei Bereiche unterteilt wird. Model steht für die Daten bzw. Datenstruktur. View ist die Visualisierung d.h. die grafische Oberfläche, die dem User angezeigt wird. Unter Controller wird die Steuerung verstanden.15 Der Zusammenhang dieser Komponenten lässt sich in folgendem Beispiel erkennen. Der Benutzer interagiert mit der View. Dabei verwendet er Steue- rungselemente wie Eingabefelder. Der View leitet die eingegebenen Daten an den Con- troller weiter, welcher das Model modifiziert. Durch die Änderung des Models kann sich nun der View ändern, denn dort werden die gespeicherten Daten visualisiert.

Abbildung 1: MVC Muster

Abbildung in dieser Leseprobe nicht enthalten

Quelle: https://glossar.hs-augsburg.de/Model-View-Controller-Paradigma

2.4 Single Page Application (SPA)

Single Page Application sind über den Browser aufrufbare Webseiten. Gegenüber der Multi Page Application (MPA) werden sie dadurch charakterisiert, dass durch eine User Interaktionen nicht die volle Webseite neu geladen werden muss. Es werden nur die nö- tigen Komponenten der Seite nachgeladen.16 Dadurch wird Bandbreite gespart und die Ladezeit verkürzt. Resultat ist, dass der User ein flüssiges Userinterface bedient, welches mit einer Desktop Anwendung vergleichbar ist. Der Ablauf eines Aufrufs einer SPA star- tet mit dem initialen HTTPS Request vom Client an dem Server. Der Client erhält an- schließend das initiale HTML Dokument, Skripte, Bilder und weitere Webinhalte. Bei anschließender User Interaktion wird ein AJAX Request an den Server gesendet, der via JSON Response beantwortet wird.17

Abbildung 2: SPA Lifecycle

Abbildung in dieser Leseprobe nicht enthalten

Quelle: https://msdn.microsoft.com/en-us/magazine/dn463786.aspx?f=255&MSPPError=-2147217396

Das Erstellen der SPAs wird mithilfe von JavaScript, HTML5 sowie AJAX erreicht. Da- bei gibt es verschiedene Frameworks wie AngularJS, die zusätzlich verwendet werden können und die Entwicklung vereinfachen.

2.5 Angular

AngularJS oder Angular 1 bezeichnet ein JavaScript Framework, welches von Google Inc. entwickelt wurde und verwaltet wird. Dabei ist die erste Version am 21.10.2010 er- schienen. 18 Die aktuellste Release Nummer ist Version 7, wobei erwähnt werden muss, dass die Entwicklungssprache ab Angular 2 nicht JavaScript, sondern TypeScript ist. In dieser Arbeit wird nicht auf das TypeScript eingegangen, nachdem AngularJS verwendet wird. AngularJS ermöglicht auch bei Webanwendungen ein MVC Model. Durch Auftei- lung in Model, View und Controller wird die Modularität gesteigert. Es kann die grafische Oberfläche separat von Datenhaltung und Steuerung entwickelt werden. Somit können Front- und Back End Entwickler unabhängig voneinander entwickeln und testen. In An- gularJS wird der View durch das kompilierte View-Template repräsentiert. Unter Model wird wiederum der Scope verstanden. Controller repräsentieren die Controller Kompo- nenten aus dem MVC Muster. Diese und weitere AngularJS Konzepte und Komponenten werden in folgendem Kapitel erläutert.

Two-Way Databinding

In Angular wird aus dem HTML Dokument (Template) durch den Compiler ein Echtzeit View erzeugt. Dieser View ist immer mit dem Model verbunden (Binding). Das bedeutet, wenn das Model geändert wird, ändert sich in Echtzeit der View und vice versa.19

Abbildung 3: Two-Way Databinding

Abbildung in dieser Leseprobe nicht enthalten

Quelle: https://docs.angularjs.org/guide/databinding

Module

Ein Modul ist ein Container, welcher die unterschiedlichen Bestandteilen der Applikation miteinander verknüpft. Die Bestandteile sind beispielsweise Controller, Services, Filter, Animationen, Direktiven und Weitere. Module in Angular sind vergleichbar mit der Main Methode von anderen Programmiersprachen.20

Ein Modul wird folgendermaßen deklariert:

var myAppModule = angular.module('newApp', []);

View-Templates

Die Templates sind in HTML geschrieben und beinhalten neben den normalen HTML Tags auch Attribute von AngularJS. Mögliche Attribute sind Direktiven, Filter, Formu- larkontrollen sowie Interpolation Markup.21

[...]


1 Vgl. https://www.itu.int/en/ITU-D/Statistics/Documents/statistics/2018/ITU_Key_2005- 2018_ICT_data_with%20LDCs_rev27Nov2018.xls, Zugriff am 08.06.19.

2 Vgl. https://de.statista.com/statistik/daten/studie/1388/umfrage/taegliche-nutzung-des-internets-in-mi- nuten/, Zugriff am 08.06.19.

3 Vgl. https://www.gruenderszene.de/lexikon/begriffe/user-experience, Zugriff am 25.06.19.

4 Vgl. http://lists.w3.org/Archives/Public/www-talk/1991SepOct/0003.html, Zugriff am 06.06.19.

5 Vgl. https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html, Zugriff am 06.06.19.

6 Vgl. Niederst Robbins, Jennifer. HTML & XHTML (2010) S. 1.

7 Vgl. https://www.w3.org/TR/html50/, Zugriff am 06.06.19.

8 Vgl. https://www.w3.org/TR/html52/, Zugriff am 06.06.19.

9 Vgl. https://www.w3.org/TR/CSS1/, Zugriff am 06.06.19.

10 Vgl. https://www.w3.org/TR/2011/WD-selectors4-20110929/, Zugriff am 06.06.19.

11 Vgl. o.V. What about JavaScript? (2015).

12 Vgl. Flanagan, David. JavaScript (2006) S. 4.

13 Vgl. https://www.w3.org/DOM/, Zugriff am 06.06.19.

14 Vgl. Flanagan, David. JavaScript (2006) S. 502.

15 Vgl. https://glossar.hs-augsburg.de/Model-View-Controller-Paradigma, Zugriff am 08.06.19.

16 Vgl. Oh, Jaewon et al. Automated Transformation of Template-Based Web Applications into Single- Page Applications, (2013): S. 292.

17 Vgl. https://msdn.microsoft.com/en-us/magazine/dn463786.aspx?f=255&MSPPError=-2147217396, Zugriff am 26.06.19.

18 Vgl. https://github.com/angular/angular.js/releases?after=v0.9.4, Zugriff am 28.06.19.

19 Vgl. https://docs.angularjs.org/guide/databinding, Zugriff am 26.06.19.

20 Vgl. https://docs.angularjs.org/guide/module, Zugriff am 26.06.19.

21 Vgl. https://docs.angularjs.org/guide/templates, Zugriff am 26.06.19.

Ende der Leseprobe aus 29 Seiten

Details

Titel
Konzept und Implementierung einer Single Page Application mit AngularJS
Hochschule
FOM Hochschule für Oekonomie & Management gemeinnützige GmbH, München früher Fachhochschule
Note
1,3
Autor
Jahr
2019
Seiten
29
Katalognummer
V501302
ISBN (eBook)
9783346039774
ISBN (Buch)
9783346039781
Sprache
Deutsch
Schlagworte
MVC, SPA, AngularJS, Single Page Application, Angular1
Arbeit zitieren
Dominik Horwath (Autor), 2019, Konzept und Implementierung einer Single Page Application mit AngularJS, München, GRIN Verlag, https://www.grin.com/document/501302

Kommentare

  • Noch keine Kommentare.
Im eBook lesen
Titel: Konzept und Implementierung einer Single Page Application mit AngularJS


Ihre Arbeit hochladen

Ihre Hausarbeit / Abschlussarbeit:

- Publikation als eBook und Buch
- Hohes Honorar auf die Verkäufe
- Für Sie komplett kostenlos – mit ISBN
- Es dauert nur 5 Minuten
- Jede Arbeit findet Leser

Kostenlos Autor werden