Eine Einführung in AngularJS

Als ich vor ein paar Wochen auf AngularJS stieß, war ich zunächst fasziniert. Als ich die auf der AngularJS-Website verfügbaren Lernprogramme durchgearbeitet hatte, war ich begeistert, dieses Framework gefunden zu haben.

Was ist AngularJS? AngularJS ist das (relativ) neue Kind auf dem Codierblock. Es handelt sich um einen "strukturellen Rahmen für dynamische Web-Apps", der sich besonders gut für den Aufbau von einseitigen Web-Apps eignet, obwohl es nicht darauf beschränkt ist.

Entwickelt im Jahr 2009 von Miško Hevery und Adam Abrons - beide Google-Mitarbeiter zu dieser Zeit - ist es vollständig JavaScript und vollständig clientseitig, so dass AngularJS überall dort laufen kann, wo JavaScript läuft. Es ist auch klein: komprimiert und minimiert ist es weniger als 29 kb. Und es ist Open Source unter der MIT-Lizenz. Sie können sogar das Logo verwenden, das unter der Creative Commons Attribution-ShareAlike 3.0 Unported-Lizenz verfügbar ist.

Laut Wikipedia ist das Ziel von Angular ", browserbasierte Anwendungen mit Model-View-Controller (MVC) -Fähigkeit zu erweitern", und es stellt genau das bereit, indem es ein bindendes / MVC-Framework bereitstellt. Das ist Zwei-Wege-Bindung, wohlgemerkt. Köstlich. Mit einer einfachen Struktur wie {{meine Daten}} binden Sie Daten an Ihre Seite. Der $ scope-Dienst erkennt Änderungen am Modell und ändert HTML-Ausdrücke in der Ansicht über Controller. Wenn Sie in die andere Richtung arbeiten, spiegeln sich Änderungen an der Ansicht im Modell wider. Dies beseitigt die Notwendigkeit für die überwiegende Mehrheit der datenzentrischen DOM-Manipulationen, die viele von uns, selbst eingeschlossen, bei der Arbeit mit einer Bibliothek wie jQuery als selbstverständlich betrachten.

Angular läuft direkt aus der Box ohne Bibliotheksabhängigkeiten, obwohl es mit den vielen verfügbaren Modulen erweitert werden kann, und natürlich können Sie Ihre eigenen erstellen, um Ihre spezifischen Bedürfnisse zu erfüllen. Als reines JavaScript hat es auch den Vorteil, serverunabhängig zu sein.

Wenn man sich an eine mächtige Bibliothek wie jQuery gewöhnt hat, ist es leicht, sie zu mischen, um Dinge zu tun, die Angular schon kann. Bei der Erkennung dieser potenziellen Schwachstelle haben die Entwickler Folgendes zu sagen: "Wenn Sie Schwierigkeiten haben, die Gewohnheit abzulegen, ziehen Sie in Betracht, jQuery aus Ihrer App zu entfernen. Ja wirklich. Angular hat den $ http-Dienst und mächtige Anweisungen, die es fast immer unnötig machen. "Eines ist sicher, wenn Sie bei Angular bleiben, werden die jQuery-Schleifen und das explizite Hin-und-Her mit dem Server in Ihrem Code fehlen, da Angular bietet eine so prägnante und saubere Methode, um die gleichen Dinge zu erreichen.

Richtlinien

Angular verwendet Direktiven, um seine Aktion in die Seite einzufügen. Direktiven, die alle mit ng- vorangestellt sind, werden in HTML-Attribute platziert.

Einige übliche Direktiven, die mit Angular vorgefertigt sind, sind:

ng-app: Dies ist im Wesentlichen der Einstiegspunkt von Angular zur Seite. Es sagt Angular, wo es handeln soll. genügt, um eine Seite als Angular-Anwendung zu definieren.

ng-bind: Ändert den Text eines Elements in den Wert eines Ausdrucks.
zeigt den Wert von 'name' innerhalb der Spanne an. Alle Änderungen an "Name" werden sofort im DOM widergespiegelt, wo auch immer die Variable verwendet wird.

ng-controller: Gibt die JavaScript-Klasse für die angegebene Aktion an. Controller werden normalerweise in externen JS-Dateien gespeichert.

ng-repeat: Erstellt die sehr sauberen Schleifenstrukturen auf Ihrer Seite.

{{item.description}}

mühelos durch jedes Element in der Sammlung.

Ich habe sie noch nicht selbst verwendet, aber ich habe gelesen, dass das Erstellen von benutzerdefinierten Anweisungen ein kniffliges Problem sein kann, etwas, das einige Zeit in Anspruch nimmt, um den Kopf zu verdrehen. Angular bietet a Video zur Klärung das Konzept.

Ein Beispielcode

Wie bereits erwähnt, ist die ng-app-Direktive in der Tag legt die Stufe fest, auf der Angular auf der Seite ausgeführt werden soll.

Hinzufügen auf die Seite Kopf, um das Angular-Framework selbst einzubringen.

verweist auf die externe JavaScript-Datei oder auf Dateien, die die JavaScript-Klassen enthalten, die von Ihrer Angular-App aufgerufen werden. Eine sehr einfache Klasse könnte zum Beispiel sein:

function ItemListCtrl ($scope) {$scope.items = [{ "description": "coffee pot" }  , {"description": "nerf gun"}, {"description": "phone"},];} 

Übergeben von ng-controller "ItemListCtrl", der Name meiner imaginären JavaScript-Klasse, teilt Angular mit, welcher Code ausgeführt werden soll:

und die doppelte Klammernotation gibt Angular an, welche Ausdrücke ausgewertet werden sollen.

ng-repeat ist eine wunderbar prägnante Repeater-Direktive, die die aktuelle Sammlung durchläuft und die angegebene Aktion ausführt oder die angegebenen Daten bereitstellt. Es ist so einfach und sauber.

Stuff on my desk:
{{item.description}}

Diese einfache Einrichtung zeigt an:

Stuff on my desk:coffee potnerf gunphone

Zugegeben, das scheint nicht so beeindruckend, aber die Idee selbst ist es. Sehr einfache Seiten Markup und Controller machen den Einstieg mit Angular, gut, sehr einfach.

Auch echte Daten in Ihre App zu bekommen, ist erfreulich einfach. Angular mag JSON konsumieren:

function ItemListCtrl ($scope, $http) {$http.get(‘items/list.json').success(function (data) {$scope.items = data;}  } 

Dies gibt ein JSON-Objekt zurück, das in Ihrer Angular-App beliebig manipuliert werden kann.

Und es ist auch zum Testen gebaut!

Einer der Grundgedanken von Angular war, dass damit erstellte Apps vollständig testbar sind. Für End-to-End-Tests haben wir Angular Scenario Runner, um Benutzerinteraktionen mit Ihrer App zu simulieren. Sie füttern es Szenario-Tests in JavaScript geschrieben.

Zum Debuggen im Browser, AngularJS Batarang ist eine Chrome-Erweiterung, die auf GitHub verfügbar ist.

Ressourcen

Wenn AngularJS an Zugkraft gewinnt, werden mehr Ressourcen zur Verfügung stehen, aber es gibt bereits eine Reihe von Websites, die Anleitungen und Möglichkeiten zur Ausweitung von Angular anbieten.

Das AngularJS Website selbst, ist natürlich Ihre definitive Quelle. Sie bieten grundsolide, einfache Tutorials und sind ziemlich aktiv Google+ Präsenz

Es gibt eine Reihe von Angular Repositories auf GitHub.

Winkelmodule, bietet eine Sammlung von vom Benutzer eingereichten Modulen, von Backbone-Diensten bis zur Rails-Integration.

Haben Sie AngularJS schon benutzt? Wie vergleicht es mit viel größeren Bibliotheken wie jQuery? Lassen Sie es uns in den Kommentaren wissen.

Ausgewähltes Bild / Vorschaubild, Winkel Bild über Shutterstock.