Eine Einführung in AngularJS | WDD

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

Was ist AngularJS? AngularJS ist das (relativ) neue Kind im Codierungsblock. Um auf ihrer Website zu zitieren, handelt es sich um „ein strukturelles Framework für dynamische Web-Apps“, das sich besonders gut für die Erstellung von One-Page-Web-Apps eignet, obwohl es sicherlich nicht darauf beschränkt ist.

Es wurde 2009 von Miško Hevery und Adam Abrons – damals beide Google-Mitarbeiter – entwickelt und ist vollständig JavaScript und vollständig clientseitig, sodass AngularJS überall dort ausgeführt werden kann, wo JavaScript ausgeführt werden kann. Außerdem ist es klein: komprimiert und verkleinert 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 License verfügbar ist.

Laut Wikipedia besteht das Ziel von Angular darin, „browserbasierte Anwendungen mit Model-View-Controller (MVC)-Fähigkeiten zu erweitern“ und genau das tut es, indem es ein Bindungs-/MVC-Framework bereitstellt. Das ist wohlgemerkt eine Zwei-Wege-Bindung. Lecker. Mit einer so einfachen Struktur wie {{ meine Daten }} binden Sie Daten an Ihre Seite. Der $scope-Dienst erkennt Änderungen am Modell und modifiziert HTML-Ausdrücke in der Ansicht über Controller. In die andere Richtung werden Änderungen an der Ansicht im Modell widergespiegelt. Dadurch entfällt die Notwendigkeit der überwiegenden Mehrheit der datenzentrierten DOM-Manipulationen, die viele von uns, mich eingeschlossen, bei der Arbeit mit einer Bibliothek wie jQuery für selbstverständlich halten.

Lesen:  Wie führt man eine Keyword-Recherche durch?

Angular läuft sofort und ohne Bibliotheksabhängigkeiten, kann jedoch mit den vielen verfügbaren Modulen erweitert werden, und natürlich können Sie Ihr eigenes Modul erstellen, das Ihren spezifischen Anforderungen entspricht. Da es sich um reines JavaScript handelt, hat es außerdem den Vorteil, dass es serverunabhängig ist.

Wenn man an eine leistungsstarke Bibliothek wie jQuery gewöhnt ist, verspürt man leicht den Wunsch, sie zu integrieren, um Dinge zu tun, die Angular bereits kann. Die Entwickler sind sich dieser potenziellen Gefahr bewusst und sagen Folgendes: „Wenn Sie Schwierigkeiten haben, die Gewohnheit aufzugeben, sollten Sie darüber nachdenken, jQuery aus Ihrer App zu entfernen. Wirklich. Angular verfügt über den $http-Dienst und leistungsstarke Anweisungen, die ihn fast immer überflüssig machen.“ Eines ist sicher: Wenn Sie sich an Angular halten, werden die jQuery-Schleifen und das explizite Hin- und Her mit dem Server in Ihrem Code fehlen, da Angular eine so prägnante und saubere Methode bietet, um dasselbe zu erreichen.

Richtlinien

Angular verwendet Direktiven, um seine Aktion in die Seite einzubinden. Anweisungen, denen ng- vorangestellt ist, werden in HTML-Attributen platziert.

Einige gängige Anweisungen, die in Angular vorgefertigt sind, sind:

ng-app: Dies ist im Wesentlichen der erste Einstiegspunkt von Angular in die Seite. Es teilt Angular mit, wo es handeln darf. ist alles, was Sie brauchen, 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 des Bereichs an. Alle Änderungen an „Name“ werden sofort im DOM überall dort widergespiegelt, wo die Variable verwendet wird.

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

Lesen:  Wie man Performance Lab in WordPress nutzt und warum

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

  • {{Artikelbeschreibung}}

Durchläuft mühelos jedes Element in der Sammlung.

Ich selbst habe sie noch nicht verwendet, aber ich habe gelesen, dass das Erstellen benutzerdefinierter Anweisungen eine knifflige Angelegenheit sein kann, die man erst nach einiger Zeit verstehen kann. Angular bietet a Video zur Verdeutlichung das Konzept.

Einige Beispielcodes

Wie bereits erwähnt, bereitet die ng-app-Direktive im -Tag die Voraussetzungen für die Ausführung von Angular auf der Seite vor.

Fügen Sie zum Seitenkopf hinzu Bringen Sie das Angular-Framework selbst ein.

verweist auf die externe JavaScript-Datei oder Dateien, die die JavaScript-Klassen enthalten, die Ihre Angular-App aufruft. Eine sehr einfache Klasse könnte beispielsweise sein:

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

Durch die Übergabe von ng-controller „ItemListCtrl“, dem Namen meiner imaginären JavaScript-Klasse, wird Angular mitgeteilt, welcher Code ausgeführt werden soll:

und die Notation mit doppelten Klammern teilt Angular mit, welche Ausdrücke ausgewertet werden sollen.

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

Sachen auf meinem Schreibtisch:

  • {{Artikelbeschreibung}}

Diese einfache Einrichtung zeigt Folgendes an:

Sachen auf meinem Schreibtisch:
Kaffeetasse
Nerf-Waffe
Telefon

Zugegebenermaßen scheint das nicht so beeindruckend zu sein, aber die Idee selbst schon. Sehr einfache Seitenmarkierungen und Controller machen den Einstieg in Angular sehr einfach.

Auch das Einbinden realer Daten in Ihre App ist erfreulich einfach. Angular verwendet gerne JSON:

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

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

Und es ist auch zum Testen konzipiert!

Einer der Grundgedanken, auf denen Angular gegründet wurde, war, dass damit erstellte Apps vollständig testbar sein sollten. Für End-to-End-Tests verfügen wir über Angular Scenario Runner, um Benutzerinteraktionen mit Ihrer App zu simulieren. Sie füttern es mit in JavaScript geschriebenen Szenariotests.

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

Ressourcen

Je mehr AngularJS an Bedeutung gewinnt, desto mehr Ressourcen werden verfügbar sein, aber es gibt bereits eine Reihe von Websites, die Anleitungen und Möglichkeiten zur Erweiterung von Angular bieten.

Der AngularJS-Site selbst ist natürlich Ihre maßgebliche Quelle. Sie bieten solide, einfache Tutorials und sind ziemlich aktiv Google+-Präsenz.

Es gibt eine Reihe von Angular Repositorys auf GitHub.

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

Haben Sie AngularJS schon verwendet? Wie ist der Vergleich mit viel größeren Bibliotheken wie jQuery? Lass es uns in den Kommentaren wissen.

Ausgewähltes Bild/Miniaturansicht, Winkelbild über Shutterstock.

Aktuelle Artikel:

Empfohlen