Guten Morgen,
in diesen Beitrag möchte ich euch mal AngularJS vorstellen.
AngularJS ist eine JavaScript Bibiliothek/Framework entwickelt von Google. Sie ermöglicht eine schöne Strukturierung von JavaScript und das Erstellen von eigenen HTML-Tags.
Damit lassen sich dann einfach recht komplexe dynamische JavaScript Anwendungen entwickeln.
AngularJS ermöglicht eine bidirektionale Datenanbindung, dazu später mehr.
Die Vorteile von AngularJS sind neben den genannten Eigenschaften, die Reduzierung von Code durch Selektion und Manipulation der DOM, sowie der automisierung von Events, wie onClick, onLoad, etc.
Die entwickelten Anwendungen sind einfach zu erweitern und durch Direktiven lassen sich Code-Fragmente einfach und sehr schnell wiederverwenden.
Starten mit AngularJS
Zunächst sollte man sich die AngularJS Bibliothek holen. https://angularjs.org/
Für dieses Tutorial reicht mir fürs erste die angular.min.js-Datei
Um AngularJS in die Webanwendung einzubinden muss man dieses Framework laden. ng-app instanziiert die Anwendung und generiert eine "root scope"
Scopes sind eine Kommunikationslage zwischen View und Controll.
Eine kurze Erklärung zum obrigen: mit ng-model bindet man den Wert des Inputfelds an eine Variable die wir dynamic nennen. Diese wird im scope abgespeichert.
Mit den doppelt geschweiften Klammern machen wir dem Framework klar, dass wir auf eben eine solche Variable zugreifenwollen und müssen diese nur noch benennen.
Vorteil ist, wir brauchen keine gets oder ähnliche Methoden. Wie es in normalen JavaScript notwendig wäre.
Controller
Controller generieren einen neuen scope, welche als Child Element zum "root-scope" der App hinzugefügt wird.
Controller sind normale funktionenmit dem extra, dass die scope-Variable (halb-)automatisch überreicht wird.
Um gleich die schöne Variante zu nehmen generieren wir ein neues JavaScript-Dokument:
Um diesen Code einzubinden, müssen wir lediglich das Dokument im <head> laden die App benennen und den Controller instanziieren.
Was sich jetzt dadurch ändert, ist das automatisch beim Laden der Seite das Formular vorausgefüllt wird mit 'AngularJSTutorial'.
Dies ist jetzt ein einfaches Beispiel gewesen, es lassen sich jedoch auch viel komplexere Daten automatisch abbilden und einbinden.
So kann man sich ein Array aus Objekten generieren und diese automatisch einbinden.
Das wars dann auch erstmal mit dem Tutorial, falls es euch gefallen hat --> „like“.
Falls ihr mehr Informationen braucht unter dem Link wo ihr die Bibliothek findet ihr noch mehr Tutorials.
Liebe Grüße,
uthred
in diesen Beitrag möchte ich euch mal AngularJS vorstellen.
AngularJS ist eine JavaScript Bibiliothek/Framework entwickelt von Google. Sie ermöglicht eine schöne Strukturierung von JavaScript und das Erstellen von eigenen HTML-Tags.
Damit lassen sich dann einfach recht komplexe dynamische JavaScript Anwendungen entwickeln.
AngularJS ermöglicht eine bidirektionale Datenanbindung, dazu später mehr.
Die Vorteile von AngularJS sind neben den genannten Eigenschaften, die Reduzierung von Code durch Selektion und Manipulation der DOM, sowie der automisierung von Events, wie onClick, onLoad, etc.
Die entwickelten Anwendungen sind einfach zu erweitern und durch Direktiven lassen sich Code-Fragmente einfach und sehr schnell wiederverwenden.
Starten mit AngularJS
Zunächst sollte man sich die AngularJS Bibliothek holen. https://angularjs.org/
Für dieses Tutorial reicht mir fürs erste die angular.min.js-Datei
Um AngularJS in die Webanwendung einzubinden muss man dieses Framework laden. ng-app instanziiert die Anwendung und generiert eine "root scope"
Scopes sind eine Kommunikationslage zwischen View und Controll.
Code:
<html ng-app>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<label>Dynamisches Formular... Javascriptzeilen = 0</label>
<input type="text" ng-model="dynamic"/>
<p>Hallo dynamischer Inhalt {{dynamic}}</p>
</body>
</html>Eine kurze Erklärung zum obrigen: mit ng-model bindet man den Wert des Inputfelds an eine Variable die wir dynamic nennen. Diese wird im scope abgespeichert.
Mit den doppelt geschweiften Klammern machen wir dem Framework klar, dass wir auf eben eine solche Variable zugreifenwollen und müssen diese nur noch benennen.
Vorteil ist, wir brauchen keine gets oder ähnliche Methoden. Wie es in normalen JavaScript notwendig wäre.
Controller
Controller generieren einen neuen scope, welche als Child Element zum "root-scope" der App hinzugefügt wird.
Controller sind normale funktionenmit dem extra, dass die scope-Variable (halb-)automatisch überreicht wird.
Um gleich die schöne Variante zu nehmen generieren wir ein neues JavaScript-Dokument:
Code:
var x = (function() {
"use strict";
var app = angular.module('TutorialAnwendung', []);
app.controller('TutorialController', ['$scope',
function($scope){
$scope.dynamic='AngularJSTutorial';
}]);
});
Code:
<html ng-app='TutorialAnwendung'>
<head>
<script src="angular.min.js"></script>
<script src="app_controller.js"></script>
</head>
<body ng-controller='TutorialController'>
<label>Dynamisches Formular... Javascriptzeilen = 8 (wegen Schönschrift/Formatierung)</label>
<input type="text" ng-model="dynamic"/>
<p>Hallo dynamischer Inhalt {{dynamic}}</p>
</body>
</html>Dies ist jetzt ein einfaches Beispiel gewesen, es lassen sich jedoch auch viel komplexere Daten automatisch abbilden und einbinden.
So kann man sich ein Array aus Objekten generieren und diese automatisch einbinden.
Code:
…
$scope.list=[
{ name: 'TutorialController', url: 'TutorialController.org'},
{ name: 'TutorialAnwendung', url: 'TutorialAnwendung.org'},
{ name: 'TutorialTest', url: 'TutorialTest.org'}
];
…
Code:
<html ng-app='TutorialAnwendung'>
<head>
<script src="angular.min.js"></script>
<script src="app_controller.js"></script>
</head>
<body ng-controller='TutorialController'>
<ul>
<li ng-repeat="listelement in list">{{listelement.name}} - {{listelement.url}} </li>
</ul>
</body>
</html>Das wars dann auch erstmal mit dem Tutorial, falls es euch gefallen hat --> „like“.
Falls ihr mehr Informationen braucht unter dem Link wo ihr die Bibliothek findet ihr noch mehr Tutorials.
Liebe Grüße,
uthred
