AngularJS lernen – Teil 1 – Einführung

Veröffentlicht am von
Werbung

AngularJS Logo Als kleines Vorwort beschreibe ich kurz AngularJS, von wem es ist und was man damit machen kann.

AngularJS ist ein Open Source Javascript Framework von Google mit dem die Umsetzung von Single Page Applications vereinfacht wird. Single Page Applications sind Anwendungen, die Inhalte dynamisch nachladen und somit sehr flexibel genutzt werden können. Ein vollständiger Reload der Seite wie es unter ausschliesslichen Einsatz von HTML nötig ist, ist bei Single Page Applications nicht erforderlich.

Inhaltsverzeichnis

Einsatzgebiete für AngularJS

Die Einsatzgebiete für AngularJS bzw. für Single Page Applications sind vielfältig. Eigentlich kann jede Webanwendung so entwickelt werden. Für den Nutzer ergeben sich daraus einige Vorteile, aber auch für den Betreiber.

Für den Nutzer ergibt sich ein völlig neues Erlebnis Webseiten zu nutzen. Es fühlt sich quasi wie eine Desktop Anwendung an.

Was den Webseitenbetreiber angeht, kann durch das dynamische Nachladen einiges an Datenlast gespart werden und es sind Anwendungen möglich, die mit reinem HTML nicht umsetzbar wären.

AngularJS ausprobieren

Da ich öfter mal Lust auf neue Dinge im Bereich Development habe, habe ich mir AngularJS ausgesucht als neues Objekt um meinen Horizont zu erweitern.

Werbung

Ich benutze Version 1.2.16, die bei Google gehostet wird. Daher muss ich auch nichts herunterladen, sondern kann einfach die JS Datei über Google einbinden.

Das folgende HTML Snippet beschreibt eine App mit AngularJS.




    
    Ich lerne AngularJS
    



18+7 = {{18+7}}

Mit



zeigen wir AngularJS, welches Element das Root Element für die Application ist. Dies kann die gesamte Seite oder auch nur ein Teil daraus sein.


AngularJS einbinden


Das Javascript binden wir mit 




ein. Damit wir wissen ob es funktioniert, lassen wir AngularJS eine kleine Rechenaufgabe erledigen:


18+7 = {{18+7}}


Sollte alles funktioniert haben, dann müsste jetzt


18+7 = 25


angezeigt werden. Falls nicht, dann wird


18+7 = {{18+7}}


ausgegeben und irgendwas muss schief gegangen sein. Oftmals ist es das fehlende 




Zum Glück habe ich alles richtig gemacht und es funktioniert.


Damit ist der erste Teil auch bereits rum. Ich konnte ziemlich unkompliziert eine Demo mit AngularJS entwickeln. Im zweiten Teil werde ich ein wenig auf das MVC Design Pattern und die Verwendung mit AngularJS eingehen.



Auch interessant:
  • PHP is dead - PHP ist tot - und das seit fast 20 Jahren Einer der ersten Einträge in Google ist vom 15.12.2003. Dort wurde behauptet, dass Ruby on Rails der Nachfolger von PHP sein könnte und PHP damit tot ist. Jetzt, fast 20…
  • Die wichtigsten Neuerungen in PHP 8.4: Was… PHP 8.4, das am 21. November 2024 erscheint, bringt eine Reihe von bedeutenden Neuerungen und Optimierungen für Entwickler mit. Mit Verbesserungen wie den Property Hooks, erweiterten Möglichkeiten für HTML5-Verarbeitung und…
  • WordPress und Docker: Die perfekte Entwicklungsumgebung Docker ist ziemlich genial. Und wer für WordPress-Themes oder Plug-ins entwickelt, der wird die Vorteile der Nutzung von Docker sehr schnell merken. Hier zeige ich dir, wie du das schnell…
  • Warum man in Blade lieber @if(! $user->isAdmin)… In Laravel Blade, der Templating-Engine des Frameworks, haben Entwickler verschiedene Möglichkeiten, Bedingungen in Templates zu implementieren. Ein häufiges Thema bei der Arbeit mit Bedingungslogik ist die Wahl zwischen den beiden…
  • Vom Junior zum Senior-Entwickler: Ein Wandel in der… Der Übergang vom Junior-Entwickler zum Senior-Entwickler ist nicht nur eine Frage der Erfahrung oder der technischen Fähigkeiten – es erfordert einen grundlegenden Wandel in der Denkweise. Viele Entwickler beginnen ihre…