Re-usable Content in 3D und Simulationssystemen Angularjs Referent: Janek Rudolf.

Präsentation zum Thema: "Re-usable Content in 3D und Simulationssystemen Angularjs Referent: Janek Rudolf."—  Präsentation transkript:

1 Re-usable Content in 3D und Simulationssystemen Angularjs Referent: Janek Rudolf

2 Inhalt ● Was ist Angularjs ● Vorteile von Angularjs ● Databinding ● Direktiven + Beispiele ● Veranschaulichung

3 Was ist AngularJS und was beinhaltet es: ● Javascript-Framework für dynamische Webapplikationen ● Zur Entwicklung von Single-Page-Apps ● Entwickelt und eingesetzt von Google ● Open-Source-Projekt (seit 2009) ● MVC(Model/View/Controller)/MVVM(Model View View Model) -Framework, das bidirektionales Databinding unterstützt ● Browserunabhängig ohne Modifikation des Browsers ● Auf gute Testbarkeit ausgelegt ● Opinionated

4 Vorteile von Angularjs ● Keine manuelle DOM-Selektion/-Manipulation ● Keine manuelle Event-Behandung ● Code-Reduktion durch Automatisierung (Direktiven,Databinding) von Standardaufgaben ● Dependency Injection für gute Testbarkeit, Code-Reduktion und leichte Refaktorierung ● Verwendung normaler Datentypen von Javascript → leichte Einbindung fremder Bibliotheken

5 Einfaches Databinding Bidirektionales Databinding

6

7

8 Dependency Injection ● Normalerweise liegt Kontrolle von Objektinstanziierungen bei der Funktion ● Objekte müssen sich selbst verwalten und Kenntnisse der Umgebung haben ● Mit DI wird Kontrolle an zentrale Komponente übergeben ● → Unabhängigkeit des Objekts von seiner Umgebung ● Klasse/Objekt soll nach Single-Responsibility-Prinzip ausgelegt sein ● → Vermeidung unnötiger Abhängigkeiten beim Kompilieren ● → deutliche leichtere Erstellung von Unit-Tests

9 ● An HTML angepasst und bringen dieser quasi neue “Tricks“ bei ● Unerlässlich zur Web-App-Entwicklung ● Bessere Lesbarkeit des Codes durch : ● - Reduzierung unwichtiger(rein gestalterischer) Elemente ● - semantische Benennung der Elemente ● Komponenten entstehen automatisch ● Lassen sich gut testen und wiederverwenden Direktiven

10 Vorstellung einiger Direktiven Ng-app ● Ng-app dient zum automatischen Bootstrapping(Urladen)/initialisieren der Applikation ● Diese Direktive kann nur einmal mit einem HTML- Dokument benutzt werden (sonst manuelles bootstrappen) ● Normalerweise steht sie am Anfang einer Applikation und im Html-Tag ● Ohne ng-app klappen die einfachsten Dinge nicht, wie zum Beispiel:

11 I can add: 1 + 2 = {{ 1+2 }} Ausgabe: I can add: 1 + 2 = 3

12 Ng-controller ● Ist im Prinzip die Main-Funktion, übernimmt die Variable $scope und bringt den Datenaustausch mit dem View ● Der ngController ordnet dem scope sein Verhalten zu ● → Kernpunkt im Model-View-Controller ● Die von ngController erzeugte Klasse beinhaltet Methoden(z.B. hinzufügen, entfernen, löschen, grüßen etc.), die die betriebliche Logik der App ausdrücken. Beispiel:

13 function SettingsController($scope) $scope.name = "John Smith"; $scope.contacts = [ {type:'phone', value:'408 555 1212'}, {type:'email', value:'john.smith@example.org'} ]; $scope.greet = function() { alert(this.name); $scope.addContact = function() { this.contacts.push({type:'email', value:'yourname@example.org'}); $scope.removeContact = function(contactToRemove) { var index = this.contacts.indexOf(contactToRemove); this.contacts.splice(index, 1); $scope.clearContact = function(contact) { contact.type = 'phone'; contact.value = '';

14 Ng-Model ● Diese Direktive meldet Angularjs, das Bidirectional Databinding zu benutzen ● Arbeitet mit anderen Direktiven zusammen (u.a. input, textarea, select) ● Sie bindet den View in dem Model, was auch die oben genannten Direktiven erfordern ● Setzt die dazugehörige css-Klasse auf das Element ● Beispiel für Zusammenspiel mit input und checkbox:

15 Value1: Value2: <input type="checkbox" ng-model="value2" ng-true-value="YES" ng-false-value="NO"> value1 = {{value1}} value2 = {{value2}}

16 Ausgabe : Value1: Value2: value1 = true value2 = YES Klickt man das Häkchen weg, wird bei value1 = false und bei value2 = NO angezeigt

17 Ng-repeat ● Die Direktive ng-repeat instanziiert ein Template pro Element ● Für jede Template-Instanz wird ein scope erzeugt ● Dort ist eine Schleifenvariable im aktuellen Element festgelegt ● $index wird auf den Index des Elements gesetzt ● Beispiel:

18 I have {{friends.length}} friends. They are: [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old. </html

19 Ausgabe: I have 2 friends. They are: [1] John who is 25 years old. [2] Mary who is 28 years old.

20

21 http://www.youtube.com/watch?v=WuiHuZq _cg4

22 Danke für Ihre Aufmerksamkeit