AngularJS Tutorial – AngularJS in 1 Tag lernen

Was ist AngularJS?

AngularJS, häufig auch einfach Angular genannt, bezeichnet ein Framework zur Erstellung von browserbasierten Single-Pages Anwendungen, Web Apps und Websites mit einem MVC/ MVVM Framework, was in ein JavaScript eingearbeitet wird. Es ist ein großer Fortschritt für HTML und für das neue HTML5. Ein frischer Atemzug im Umgang mit dem modernen Internet. Dieser Artikel ist ein Tutorial im Umgang mit AngularJS, welcher auch die Erfahrungen des Autors, gute Tipps und praktische Anwendungsmöglichkeiten enthält. Dies ist die Übersetzung des Artikels “Ultimate guide to learning AngularJS in one day” von Todd Motto. Übersetzt wurde der Artikel aus dem Englischen ins Deutsche von Eugen Artemenko. Die Code-Beispiele im Tutorial werden im live-Interpretator jsFiddle abgebildet, jeweils gesplittet in HTML, CSS und JavaScript. Bei Bedarf besteht die Möglichkeit direkt auf der Website den Code umzuändern, was sofort live im Ergebnisquadranten zu sehen ist.

Terminologie

Angular hat eine relativ kurze Lernkurve und überschneidet sich hauptsächlich mit der Terminologie “MVC”. Die Bezeichnung MVC (“Model-View-Controller”)  ist ein Prinzip der modernen Programmierung. In den nächsten Abschnitten werden die wichtigsten und wesentlichen APIs, mit denen AngularJS in Verbindung steht, und zusätzliche Terminologien erläutert.

MVC

“MVC” ist ein bekanntes Modell, das in vielen Programmiersprachen für die Strukturierung/Architektur in Applikationen bzw. in der Softwareerstellung  verwendet wird. Dafür zunächst eine kurze Aufschlüsselung der Terminologien: Model:  Das ist die Datenstruktur hinter einem bestimmten Teil der Anwendung und wird in der Regel im JSON-Format portiert. JSON-Objekte dienen der Kommunikation zwischen dem Server und der View. Zum Beispiel kann eine Gruppe von User IDs das folgende Modell haben:

Man bekommt die Information vom Server entweder mittels XHR (XMLHttp Request) (in jQuery als die $.ajax – Methode bekannt) und Angular interpretiert in $http, oder die Information wird während des Parsings zum Code (von datastore/database) hinzugefügt. Danach können die Updates ans Modell übermittelt und zurück gesendet werden. View: Das ist der HTML-Content  bzw. die gerenderte Ausgabe. Während der Nutzung des MVC Framework aktualisiert das Modell Data die View und zeigt die entsprechende Data im HTML-Dokument. Controller: Wie der Name schon sagt – kontrolliert der Controller Data. Controller haben den direkten Zugriff vom Server zur View. Der Controller  übernimmt die Rolle des Vermittlers, so dass die Daten  “on the fly” per Schnittstellen zwischen dem Server und dem Client des Controllers ausgetauscht und aktualisiert werden können.

Grundschritte zum Anlegen eines AngularJS Projekts

Zuerst müssen Einstellungen zum Projektanlegen gemacht werden. Es gibt bestimmte Sachen vor dem Start zu beachten. Der erste Schritt liegt an der ng-app Deklaration, um die App zu definieren.  Danach wird der Controller der View zugeordnet. Hier ist ein Beispiel: HTML Deklarationen mit ng-*

Angular Modul and Controller:

Als Nächstes muss das Angular-Modul  anlegt werden, das die gesamte Logik anbindet. Es existieren mehrere Wege, um das Modul zu definieren. Zum einen ist es möglich alle Module der Reihe nach aufzuzählen (keine empfehlenswerte Lösung):

Die zweite und bessere Lösung ist die Deklaration der globalen Module. Die fehlenden Semikolons und unbeabsichtigtes Schließen der “Kette” zeigen sich als kontraproduktiv und könnten ein Grund eines Errors beim Kompilieren sein. Daher diese Lösung:

Jede neue Datei zieht den myApp namespace ab und sind bereits automatisch an die App gebunden.  Neue Dateien sollen für jeden Controller, DirectiveFactory und den Rest angelegt werden. Es können nun alle miteinander verbunden und mit einzelnen Script-Dateien zu einer DOM Datei zusammengefügt werden, was als Basis-Projekt weiter verwendet werden kann.

Controller 

Das Hauptkonzept von MVC steht mit der Basis-Einstellung. Nun kann der Controller implementiert werden, um Angulars Funktionalität zu testen. Aus dem Beispiel von oben kann man das Pushing der Daten zu den DOM Elementen vom Controller erneut verwenden. Angular benutzt den templating-Stil {{handlebars }} – eine Weise, um die Daten an HTML- Seiten weiterzuleiten oder wiederzugeben. Das HTML-Dokument sollte idealerweise keinen physikalischen oder hard-codierten Text beinhalten, um Angular am effizientesten zu nutzen. Hier ist das Beispiel vom String-Hinzufügen zu DOM-Elementen: HTML:

{{ text }}

JavaScript:

Output:

Das Schlüsselkonzept ist hier ein $scope-Konzept, das der Entwickler im spezifischen Controller an alle Funktionen bindet. $scope bezieht sich auf das aktuelle Element im DOM und kapselt eine sehr intelligente Scoping-Fähigkeit, die Daten-und Logikelemente vollständig innerhalb des Gültigkeitsbereich hält. Was sehr nützlich ist: Das Konzept bringt JavaScript öffentliches/privates Scoping auf das DOM. Das  $scope-Konzept sieht anfänglich etwas merkwürdig aus, aber es ist der Weg vom Server zu DOM. Der Folgende Abschnitt zeigt eine repräsentativere Datenstruktur, die man hypothetisch vom Server abrufen kann, um Login-Daten anzeigen zu lassen. Hierbei werden die statischen Daten benutzt. Zudem erfolgt die Darstellung der dynamischen JSON-Abfrage. Die Konfiguration von der JavaScript Datei:

Daraufhin kommt das Portieren zu DOM, um die Daten darzustellen:

Welcome, {{ user.details.username }}

User ID: {{ user.details.id }}


Es ist wichtig sich zu verinnerlichen, dass der Controller nur für die Data-Verwaltung gedacht ist. Controller haben die Funktionen mit dem Server kommunizieren und sorgen für die push/pull-Manipulationen mit JSON-Objekten. DOM Manipulationen werden an dieser Stelle nicht gemacht. Dafür sind Direktiven gedacht. Beschreibung dazu erfolgt später. Pro Tipp: in der gesamten Dokumentation von AngulaJS (Stand: 05.02.2014) wird eine Lösung des Controller-Anlegens als Beispiel angeboten:

NICHT nachmachen!! Das legt alle Funktionen zu dem globalen Scope lahm und lässt die Funktionen nicht gut an die eigentliche App anbinden. Das heißt, dass der Entwickler den Code nicht minimieren oder die Tests ausführen kann. Auf keinen Fall den globalen namespace irritieren. Der Controller gehört in die App.

Direktiven

Eine Direktive in der einfachsten Form ist ein kleines Stück vom HTML-Template, das an Stellen verwendet wird, wo es nötig ist. Es ist eine einfache Möglichkeit, DOM-Elemente ohne zusätzlichen Aufwand in die App zu injizieren oder benutzerdefinierte DOM-Interaktionen durchzuführen. Direktiven zu verstehen ist anfänglich recht schwierig und man muss einiges lernen. Also zunächst ein Überblick zum Verständnis. Wofür sind Direktiven nützlich? Viele Sachen inklusive der DOM-Komponenten (Tabs, Navigationselemente) liegen im Kern der App-Funktionalität, die auf das UI zugreift. Einfacher ausgedrückt sind auch ng-hide oder ng-show Direktiven (obwohl sie keine DOM Elemente injizieren). Um die Nutzung der Direktiven zu üben, wird ein Beispiel dargestellt, in dem ein custom-Button angelegt wird. Es gibt diverse Methoden, wie man Direktiven in DOM definieren kann. Einige Methoden werden im folgenden Code-Abschnitt aufgezählt.

<pre

Click me

Click me

Click me

 

;

Nun ist es schon bekannt, wie Direktiven deklariert und wo sie benutzt/injiziert werden. Nun wird ein custom-Button angelegt und dazu wird namespace myApp verwendetHier ein Beispiel für Direktive in der einfachen Form:

Die oben stehende Direktive wurde mit der Methode .directive() definiert und mit “customButton” benannt. Wenn ein Buchstabe in der Direktive großgeschrieben wird, wird an dieser Stelle ein Bindestrich im Namen im DOM benutzt (wie oben). Die Direktive lässt sich als Objekt zurückliefern und nimmt eine Reihe an Parametern. Die wichtigsten Parameter sind  restrictreplacetranscludetemplate and templateUrl und die link Eigenschaft. Dazu hier:

Output:
Jetzt kommt die Erklärung zu den Eigenschaften der Direktive. – restrict: Wie wird die Nutzung eines Elementes eigentlich eingeschränkt? Wer sich mit dem Projekt beschäftigt, dass die Legacy-IE-Unterstützung benötigt, wird bestimmte Attribute/Klassen definitiv brauchen.  Die Einschränkung mit dem Parameter ‘A’ bedeutet, dass die Einschränkung als Attribute erfolgt. ‘E’ für Element, ‘C’ für Klasse, ‘M’ für Comment. Das Beispiel hat standardmäßig ‘EA’. Es ist auch möglich mehrere Eigenschaften zu definieren. – replace: Das ersetzt die Markierung in DOM. Die Direktive definiert DOM. Die DOM-Elemente werden in diesem Beispiel durch die Template-DOM-Elemente aus der Derictive ersetzt. – transclude: Einfach gesagt, die Benutzung von transclude erlaubt  dem DOM-Content in die Direktive kopiert zu werden. Die Worte ‘Click me’ wurden in die  Direktive nach dem Rendering geschoben. –template: Das Template (siehe oben) erlaubt die hinzugefügte Hypertext-Markierung zu deklarieren. So was wäre ein guter Anwendungsfall für kleine HTML Teile. Templates werden durch Angular zusammengestellt. Das heisst, der User kann das Kern-Template deklarieren und andere in dieses Template hinzufügen. –templateUrl: Ist dem Template ähnlich, aber das Template wird hier mittels eines Pfades zu Datei oder zu <script>-Datei definiert. Dies ist möglich, um die Template-URL zu spezifizieren, die für die überschaubare Einheit von HTML dienen. Die Teile von HTML sollen in den separaten Dateien gehalten werden. Dafür muss man nur den Pfad und den Datei-Namen zu HTML umbenennen. Vorzugsweise werden die Templates nach Ordner strukturiert:

Der Inhalt der HTML-Datei:

Das Gute daran ist, dass der Browser immer das HTML-File cachen wird. Eine andere Alternative, bei der nichts gecacht wird, ist eine Deklaration vom Template in den <script>-Tags:

Man kann Angular sagen, dass das ein Template ist und man gibt ihm eine ID. Angular schaut nach ng-template oder nach *.html Datei. Beide Varianten gehen. Ich bevorzuge es, die *.html Dateien anzulegen, weil dadurch die Performance gesteigert wird und das DOM-Management übersichtlicher und einfach zu navigieren ist.

Services

Services sind oft ein verwirrender Punkt. Aus eigener Erfahrung und Untersuchung kann man sagen, dass Services mehr ein stilistisches Design-Pattern sind und weniger einen funktionellen Unterschied bieten. Services sollen für singletons genutzt werden und factories für mehr komplizierte Funktionen, so wie für Object Literals und andere komplizierte Anwendungsfälle. Hier ist ein Beispiel, das die Multiplikation von zwei Zahlen zeigt:

Man muss danach im Controller folgendermaßen vorgehen:

Das Beispiel ist noch recht unkompliziert.

Factories 

Der Übergang von Services zu Factories kann relativ einfach sein. Man kann ein Objekt-Literal in der Factory initialisieren oder weitere Methoden einbauen.

Hier schafft man einen benutzerdefinierten Wrapper für Angular’s XHR’s. Nach der Deklaration des Factory-Namen im Controller ist die Verwendung simpel:

Wenn die Server-Abfrage nach einer Änderungen benötigt wird, kann man entweder Server.poll(jsonPoll) initialisieren oder Server.socket(jsonSocket), wenn ein Socket benötigt wird. Dies ermöglicht auch die Modularisierung vom Code und vermeidet überflüssiges Code-Schreiben.

Filter

Filter werden in Verbindung mit Data-Arrays und außerhalb der Schleifen genutzt. Wenn der Nutzer die Daten durchsucht oder bestimmte Sachen filtern will, kann er die Option mit filter nutzen. Man kann zum Beispiel auch innerhalb eines <input>-Feldes navigieren und suchen. Es gibt einige Möglichkeiten Filter zu verwenden: im Controller oder als definierte Methode. Hier ist eine Methode, die überall funktioniert:

DOM-Nutzung:

No filter: {{ greeting }}

Reverse: {{ greeting | reverse }}

Output:
Der nächste Anwendungsfall mit ng-repeat:

  • {{ number }}

Hier ist ein Beispiel vom Filter innerhalb des Controllers:

Und die Nutzung in ng-repeat:

  • {{ number }}

Output:
Das ist nur die Hauptidee, die hinter AngularJS mit den API’s steht. Diese reicht allerdings, um den Aufbau einer App mit Angular zu verstehen.

Two-way data-Verknüpfung

Two-way Data-Verknüpfung, besser als full-circle Data-Synchronisierung beschrieben, ist am besten folgendermaßen zu verstehen: Wird des Model aktualisiert, wird automatisch das View mit aktualisiert und andersherum: Wird die View aktualisiert wird das Modell automatisch auch aktualisiert. Dies bedeutet, dass die Daten ohne Probleme synchron gehalten werden. Wenn ein ng-model an ein <input>-Feld gebunden und in dieses Feld geschrieben wird, dann erstellt (oder updatet das existierende) Model in der gleichen Zeit. Als nächstes wird <input> mit einem Model ‘myModel’ verknüpft. Die geschweiften Klammern zeigen die Positionierung der Model- und View- Aktualisierung in der gleichen Zeit.

My model data: {{ myModel }}

 

XHR/Ajax/$http calls and binding JSON

Nach der Auseinandersetzung mit den basalen Funktion bezüglich des Data-Pushings in die $scope-Variable und der two-way Data-Verknüpfung, kommt nun die Zeit für die realen XHR-Anfragen an den Server. Das ist die Basis-Vorgehensweise für den Daten-Austausch bzw. Daten-Ablesen in einer Webapp. Wer lokal entwickelt, benutzt möglicherweise etwas wie Java, ASP, .NET, PHP oder ähnliches, um das lokale System zum Laufe zu bringen. Es spielt dabei keine Rolle, ob eine lokale Datenbank verwendet wird oder ob es über Server-API’s läuft. Der ‘$http’ Befehl kümmert sich um XHR-Einsatzfälle. Die $http-Methode ist eine wichtige Angular Funktion für den Data-Zugriff vom Server. Hier ist das Beispiel zu dem ‘GET’- Requerst. Die Anfrage ist auch jQuery-ähnlich.

Angular schickt etwas, das promise genannt wird, was ‘callbacks’ effizienter und leichter zu lesen macht. Promises sind an die Funktion gekettet, in der die Aktion(.myPromise()) definiert wurde. errors und success sind folgendermaßen zu behandeln:

Seht gut und überschaubar. Dies ist der Punkt, wo wir die View und den Server durch das Model-DOM Update zusammen bringen. Jetzt kann ein Setup und ein Username zu DOM durch den Ajax-Aufruf hoch geschoben werden. Idealerweiser zuerst JSON modellieren und vorbereiten. Die JSON-Vorbereitung liegt in der Regel bei der Backend-Entwicklung und sieht folgendermaßen aus:

Es folgt ein Objekt vom Server – so genannt ‘data’. Wir müssen uns an die data.user Eigenschaft halten. Innerhalb der data.user Eigenschaft befinden sich name und id. Der Zugriff darauf erfolgt über über data.user.name, was in diesem Fall das Ergebnis “Todd Motto” zurück gibt. Nun können wir die Daten holen. JavaScript-Code:

Und jetzt wir können den Code einfügen:

{{ user.username }}

Dieses Verfahren zeigt den Username an. Im nächsten Abschnitt setzen wir uns noch tiefer mit der Data-Verknüpfung auseinander.

Declarative Data-Verknüpfung

Die Philosophie von Angular liegt bei der dynamischen Erstellung von HTML mit der breiten Funktionalitätenpalette.  Angular übernimmt dabei enorm viel Arbeit. Gerade wurde ein Ajax-Request erstellt, um die E-Mail-Liste mit entsprechenden Feldern (z.B. Absenden-Datum) zu bekommen und in DOM darstellen zu lassen. Genau dort liegen die Stärken von Angular. Als erstes müssen wir einen Controller beschreiben:

Als Nächstes fügen wir die Daten in HTML hinzu. Dort wird auch die deklarative Verknüpfungen benutzt, um der App zu sagen, was sie machen muss – um den ersten Abschnitt von dynamischem HTML anzulegen. Es soll eine build-in ng-repeat Direktive benutzt werden, die durch die Data schaut und den Output komplett ohne Callbacks oder Zustandsänderungen generiert.

  • From: {{ message.from }}

    Subject: {{ message.subject }}

    {{ message.sent | date:’MMM d, y h:mm:ss a’ }}


Im oberen Beispiel wurde ein Filter eingebaut, der das Datum im UTC  Format anzeigen lässt. Als nächstes sollte man sich intensiver mit ng-* Direktiven auseinander setzen, um das komplette Potential von deklarativen Data-Verknüpfungen zu entdecken.

Scope Funktionen

Als Zusatz zu deklarativen Verknüpfungen, sind scope-Funktionen der nächste Schritt in der App-Erstellung mit zusätzlicher Funktionalität. Hier ist eine fundierte delete-Funktion für das Löschen von E-Mails:

Pro Tipp: Es ist wichtig, an das Data-Löschen aus dem Model zu denken. Man löscht keine Elemente aus dem HTML-Dokument. AngularJS ist ein MVC-Framework und regelt das ganze mittels two-way-Verknüpfung. Der Code muss dazu passend erstellt werden, sodass er die Kommunikation mit der Data zulässt. Die Verknüpfungsfunktionen zu scope erfolgen auch über ng-*Direktiven. Diesmal ist das eine ng-click Direktive: 

Dieser Weg ist aus unterschiedlichen Gründen anders als die inline click-Behandlung. Es wird später darauf eingegangen. Die Variable $index verweist automatisch auf das Element, dass von Angular beim Löschen gesteuert wird. Diese Technologie spart viel Code. Der ganze JS sieht so aus:

und dazu HTML:

My Inbox:

  • From: {{ message.from }}

    Subject: {{ message.subject }}

    {{ message.sent | date:’MMM d, y h:mm:ss a’ }}

Output (Löschen von ein paar E-Mails)

 Deklarative DOM Methoden 

In diesem Abschnitt bewegen wir uns in die Richtung von DOM Methoden, was auch Direktiven sind. Sie beschreiben die Funktionalität in DOM, die normalerweise mit viel Skriptlogik beschrieben werden müssen. Ein gutes Beispiel dafür wäre die einfache toggling  Navigation. Mittels ng-show und ng-click wird im Folgenden eine toggling Navigation programmiert:

  • Link 1
  • Link 2
  • Link 3

Oben ist ein explizites Beispiel für das MVVM (Model View ViewModel). Wie sich erkennen lässt, gibt es keinen Controller dahinter. Output:

Expressions

Expressions sind eine der besten Eigenschaften von Angular, die zu einem großen Teil JavaScript ersetzen, was den Code enorm verringert. Wie hier:

Das wäre eine potenzielle Rückruffunktion von der GET Anfrage gewesen. Danach wird der Zustand der Antwort analysiert. Angular erleichtert diese Überprüfung und man kann direct in DOM den Code schreiben, ohne JavaScript zu verwenden.

{{ data.length > 0 && ‘My data’ || ‘No data’ }}

Es aktualisiert sich dynamisch, weil sich die App automatisch abruft und die Daten holt. Es kommt immer eine Meldung zurück, ob Daten vorhanden sind oder nicht. Es gibt viele Anwendungsfälle dafür und Angular nutzt die Hilfe der two-way Anbindung. Beispiel – HTML:

Test 1: {{ main.test1.length > 0 && ‘My data’ || ‘No data’ }}

Test 2: {{ main.test2.length > 0 && ‘My data’ || ‘No data’ }}

Beispiel-JavaScript:

Output:

Dynamische Views und Routing

Die Idee hinter einem Website-Aufbau besteht darin, dass die Seite aus header, footer, sidebar und content besteht, die mit einer URL verknüpft sind. Angular lässt dieses Setup ganz einfach konfigurieren, was dynamic views genannt wird. Dynamische Ansichten injizieren spezifische Ansichten auf der Basis der URL mit Hilfe von $routeProvider. Das einfache Setup ist:

Der Entwickler wird merken, dass wenn eine URL ‘/’aufgerufen wird, eine Verweisung auf main.html erfolgt. Das ist eine gute Vorgehensweise, um der Startseite main.html und nicht  index.html zuzuordnenwenn die index-Seite bereits belegt ist. Hinzufügen von mehreren Seiten:

Danach wird die emails.html zu der HTML-Seite einfach heruntergeladen, die die Mails generiert. Im Endeffekt stellt man an dieser Stelle eine sehr anspruchsvolle Anwendung mit relativ wenig Aufwand her. Es gibt noch weitaus mehr über den $routeProvider Service, der als Ausgangspunk benutzt wird. Ein Beispiel ist der $http Interceptor. Dieser kann während eines Events eine Ajax Anfrage anfeuern. Das Programm kann die Daten dadurch aktualisieren oder herunterladen.

Globale statistische Daten

Gmail verwaltet eine große Datenmenge durch das Schreiben von JSON Objekten auf der Seite. Wenn Sie die neuen Daten sofort auf der Seite angezeigt haben möchten, werden die Daten unter kurzer  Rendering-Zeit in Angular dargestellt. Zum Beispiel wird eine App mit Java für das Backend-System und mit Angular fürs Frontend geschrieben. Hier werden die JSON-Objekte an das Frontend abgeschickt und an den Controller weitergegeben.

Der Java-Code rendert die Daten für den Angular Controller. Hier werden mögliche Daten im Controller abgelesen:

 Minification 

Im Folgenden geht es um die Herabsetzung des Angular-Codes. Wer schon einmal mit der Code-Herabsetzung experimentiert hat, bekam sicherlich eine Fehlermeldung. Der Minifying-Prozess vom AngularJS-Code ist einfach. Dazu muss die Abhängigkeit vom injizierten Content  in der Zeile vor der Funktion festgelegt werden.

Einmalig Minifying:

Nicht vergessen, dass die Reihenfolge von Injektoren wichtig ist.

Unterschiede zwischen MVC und MVVC 

Vorteile von Angular: MVC: spricht mit dem Controller: Model-View-Controller MVVC: Model kommuniziert mit der View und umgekehrt. Two-Way Data-Bindung kümmert sich um die automatische Aktualisierung von beiden Seiten. Es ist auch möglich, die Logik ohne Controller einzubauen. Ein kurzes Beispiel, in dem ng-repeat ohne Controller verwendet wird.

  • {{ number }}


 HTML5 Web Komponenten  Mit Angular können auch Custom Elemente erstellt werden.

Genau das bringt das Web in eine Linie mit der Zukunft von HTML5. HTML5 führt Web Komponenten und <template>-Elemente ein. Mit Angular kann man diese Komponenten heute schon benutzen. Web Komponenten bestehen aus benutzerdefinierten Elementen komplett mit einer dynamischen JavaScript-Injektion für die View-Präsentation, was unglaublich spannend ist. Die Angular Entwickler können  solche Funktionalitäten bereits nutzen und verbessern somit die Web-Praktiken für die Zukunft.

Scope Kommentare

Scope Kommentare sind wirklich eine schöne Ergänzung zu diesem Workflow, anstatt der Erklärung von HTML-Teilen wie diesem:

Stuff.

Wenn es um Angular geht, muss man an Views und Scopes denken und nicht an DOM. Scopes sind im Endeffekt geschlossen. Das vermeidet unabsichtlichen Datenaustausch zwischen den Controllern. Ansonsten sind die Daten unverfügbar. Hier ist ein Beispiel mit dem scoped-Bereich:

 Debugging von AngularJS

Es gibt eine wunderbare Chrome Extensions, die die Jungs von Google für die Entwicklung und das Debugging für Angular empfehlen, es heißt “Batarang” und man kann es hier herunterladen. Wir hoffen, dieser Tutorial war nützlich und wünschen viel Spaß beim Codieren. Das Tutorial gibt es jetzt auch als PDF 

Wir freuen uns über eine Bewertung, um ein Feedback zu erhalten:

Durchschnittlich 4.7 Sterne aus 83 Meinungen.

10 Kommentare zu “AngularJS Tutorial – AngularJS in 1 Tag lernen

  1. Auch ich möchte mich recht herzlich für diese kompetente Einführung in AngularJS bedanken. Ich muss dazu sagen, dass ich wirklich kaum Vorkenntnisse im Bereich von Html oder JS besitze, aber mit den anschaulichen Erklärungen fällt es mir leichter das ganze in die Tat umzusetzen.

    Gerne würde ich mehrere Tutorials gerade im deutschsprachigen Raum von euch lesen, auch mit der Möglichkeit ( auch wenn es bereits recht trivial erklärt wurde ) in einigen Bereichen noch simpler vorzugehen.

    Liebe Grüße aus Graz – Öst.

    • Vielen Dank Flo für Dein Lob. Wir versuchen so viel und so oft wie möglich Tutorials zu verfassen, gerade auch was Schwierigkeiten und deren Lösungen angeht, die uns selbst aufgefallen sind. Wir haben gerade auch eine kleine Einführung über Ionic gegeben, da wird in nächster Zeit sicherlich auch noch einiges kommen. Ansonsten schau doch immer mal auf unserem Blog vorbei. Einen schönen Start in die Woche. Grüße nach Graz aus Jena.

  2. Leider hat das bei mir überhaupt nicht “hingehauen”.
    Was muß ich wo abspeichern ? Was muß ich aufrufen ?

    Da steht so etwas: var myApp = angular.module(‘myApp’, []);

    myApp.controller(‘MainCtrl’, [‘$scope’, function ($scope) {
    // Controller magic
    }]);

    und mit den Angaben der nächsten 4 Boxen sollte als Ergebnis rauskommen:

    Hello, Angular fanatic.

    Tut es bei mir leider nicht. Schade eigentlich.

  3. Tja, im Tutorial fehlt der “schriftliche” Hinweis auf die Benutzung von JsFiddle. Dann klappts. OK, habe den Link übersehen. Problem gelöst.

    Vielen Dank.

    • Was mir außerdem auffällt, sind die fehlerhaften HTML-Codestücke. Oftmals steht dort “irgendwas, aber die wichtigen Direktiven im Tag a fehlen. Auf der Originalseite konnte ich vergleichen, was alles fehlt – fast in jedem HTML-Codebeispiel hier fehlen die wichtigsten Dinge. Liegt das an eurem Editor oder an meiner Anzeige?

    • Liebe Jana, vielen Dank für deine Kommentare.
      Gleich im ersten Abschnitt des Tutorials verweisen wir auf den Guide von Todd Motto und erklären, dass es eine Übersetzung ist, wir haben dafür auch die Genehmigung von ihm bekommen. Es ist uns sehr wichtig, dass dies klar im Text wird.
      Um die HTML-Codestücke werden wir uns sobald wie möglich kümmern und ausfindig machen, woran es liegt. Danke für den Hinweis.
      Hast du schon die weiteren Artikel über AngularJS auf unserem Blog gesehen?

      Viele Grüße,
      Johanna

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.