Kernpunkte

• AngularJS, ein von Google entwickelter JavaScript-Framework, erm?glicht es Entwicklern, Front-End-Code zu erstellen, ohne das DOMM-Model (DOMR-Objektmodell) direkt manipulieren zu müssen. Dies kann erreicht werden, indem dynamische Ansichten und Controller mithilfe von Anweisungen und Datenbindung definiert werden.
• AngularJS verwendet die MVC-Struktur (Modell-View-Controller). Das Modell wird durch Winkelmodule und Controller definiert, die über Anweisungen mit HTML verbunden sind. Dies erm?glicht eine Zwei-Wege-Datenbindung, wobei ?nderungen im Modell automatisch die Ansicht aktualisieren und umgekehrt.
• In AngularJs erweitern die Richtlinien das Vokabular von HTML und bieten dynamischere und leistungsf?higere Vorlagen. Beispiele sind die NG-Repeat für das Iterieren des SET, das NG-Klick für die Ereignisverarbeitung und die NG-Show für das bedingte Rendering.
• Obwohl AngularJS einige Kritik an Lernkurven und die Verwendung von nicht standardm??igen HTML-Attributen erhalten hat, bietet es einen einzigartigen Ansatz für die Webentwicklung, der die Erstellung von komponierbareren, überprüfbaren Anwendungen f?rdert. Durch die Trennung von Designproblemen mit MVC wird die Menge an Code reduziert, die für die Verbindung von Komponenten erforderlich ist.

AngularJs wurde schnell zu einem der beliebtesten JavaScript -Frameworks mit seiner fortschrittlichen Philosophie. Angesichts der Unterstützung und Entwicklung von Google scheint AngularJS 'Ansatz zum Front-End zuerst etwas seltsam zu sein, aber Sie werden sich bald fragen, warum Sie zuvor andere Ans?tze verwendet haben. Mit AngularJS k?nnen Entwickler Front-End-Code schreiben, ohne das DOM direkt manipulieren zu müssen. In diesem Tutorial führen Sie den Prozess durch Erstellen einer Anwendung, die dynamische Ansichten und Controller mithilfe von Anweisungen und Datenbindung definiert. Wenn Sie mit CoffeeScript vertraut sind (nicht von AngularJS ben?tigt), werden Sie sich mehr für diesen Artikel interessieren, aber die Grundlagen von JavaScript ausreichen. Vielleicht haben Sie schon viele Aufgaben-Apps gesehen, also lassen Sie uns etwas Interessantes aufbauen-Tic Toe! Wir werden mit dem Markierungsbrett beginnen. AngularJS behauptet, das Wortschatz von HTML zu erweitern, anstatt DOM hinter JavaScript zu verbergen. Die Idee ist, dass HTML selbst ziemlich gut ist, aber wir k?nnen einige Elemente und Attribute hinzufügen, um eine leistungsstarke, dynamische Vorlagesprache zu erstellen, mit der Sie bereits vertraut sind. Unser Board ist nur ein einfacher Tisch. Wenn wir mit gutem Verlangen programmieren, müssen wir wirklich nur über die Tafel iterieren und eine Zelle für jede Zelle ausgeben. Der tats?chliche Code ist unserer Idee sehr nahe:

<table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table>

Warten Sie, was sind diese seltsamen NG -Elemente und Bartklammern? Machen wir einen Schritt zurück und machen Sie es Schritt für Schritt.

<tr ng-repeat="row in board.grid">

AngularJS -Befehl

ng-repeat ist eine -Richtlinie von AngularJs und eine der bereitgestellten HTML -Erweiterungen. Es erm?glicht uns, die Sammlung zu iterieren und die Vorlage für jedes Projekt zu instanziieren. In diesem Beispiel sagen wir AngularJs, sie sollen jede Zeile in der Eigenschaft board des grid -Objekts wiederholen. Angenommen, <tr> ist ein zweidimensionales Array, und grid ist ein Objekt im Fenster. board

<table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table>

Dann iterieren wir über die Zellen in der Zeile mit einer anderen ng-repeat -Richtlinie. Die doppelten Klamme hier zeigen, dass eine -Pression mit AngularJS Datenbindung verwendet wird. <td> marker Bisher ist es sehr einfach, oder? Sie k?nnen sofort verstehen, wie das generierte Tag aussehen wird. Wir müssen keine Schwergewichts -Tools wie JQuery verwenden, um neue Elemente zu erstellen und zu füllen. Wir müssen nur unsere Vorlagen kl?ren. Dies ist einfacher zu pflegen - wir sehen uns nur die HTML an, um genau zu wissen, wie sich das DOM ?ndert, ohne einen vagen JavaScript -Code aufzuspüren, an den wir uns nicht wirklich erinnern.

Jetzt k?nnen wir den Status des Boards visualisieren, und wir werden ihm eine Datenquelle zur Verfügung stellen, indem wir den tats?chlichen Inhalt von

definieren.

board

Wir fügen zuerst einen JavaScript -Code hinzu, um ein AngularJS -Modul für unsere Anwendung zu definieren. Der erste Parameter ist der Name der Anwendung.

<tr ng-repeat="row in board.grid">

passen wir HTML an die Verwendung der ['ng'] -Richtlinie an, die uns anweist, unser Anwendungsmodul zu verwenden.

ng-app

MVC - Definieren Sie Controller und Ansichten

<td ng-repeat="cell in row">
  {{ cell.marker }}
</td>

Das MVC -Merkmal von AngularJs kommt hier ins Spiel. Wir fügen einen JS -Code hinzu, um die Controller -Funktion auf unserem neu erstellten Anwendungsmodul aufzurufen und den Namen des Controllers und die Funktion zu übergeben, die sie implementiert.

In diesem Fall akzeptiert unsere Controller -Funktion einen Parameter

, das die

app = angular.module('ngOughts', ['ng'])

Abh?ngigkeit

unseres Controllers ist. AngularJS verwendet $scope Abh?ngigkeitsinjektion , um uns dieses Serviceobjekt zu liefern, und schlie?t das richtige Objekt aus dem Namen des Funktionsparameters ab (es gibt auch eine alternative Syntax, die auch eine Minifikation erm?glicht). Wir fügen der HTML -Vorlage nun eine Anweisung hinzu, um sie mit unserem Controller zu verbinden:

ng-controller gleich, es ist so einfach wie eine Eigenschaft mit einem Controller -Namen. Interessante Dinge passieren hier - Elemente, die in unseren K?rper -Tags verschachtelt sind, sind jetzt für das

Service -Objekt zug?nglich. Unsere

<div ng-app='ngOughts'>

Eigenschaft wird dann nach der

-Rearianz im Bereich von $scope suchen. Definieren wir sie also: ng-repeat BoardCtrl board Wir machen jetzt einige Fortschritte. Wir injizieren

in unseren Controller, instanziieren Sie ihn und stellen sie im Bereich von

app.controller "BoardCtrl", ($scope) ->

zur Verfügung.

Board Lassen Sie uns eine einfache BoardCtrl -Klasse implementieren.

Board

FACTORY

  
    <tr ng-repeat="row in board.grid">
      ...
    

hinzufügen

Wir k?nnen dann eine

fabrik

definieren, die nur die

-Klasse zurückgibt, sodass es in unseren Controller injiziert werden kann. Board kann direkt in der Fabrikfunktion definiert werden und sogar

auf das Fensterobjekt setzen. Wenn wir sie jedoch unabh?ngig halten, k?nnen wir

app.controller "BoardCtrl", ($scope, Board) ->
    $scope.board = new Board

unabh?ngig von AngularJs testen und die Wiederverwendbarkeit f?rdern.

Jetzt haben wir ein leeres Schachbrett. Aufregendes Zeug, oder? Lassen Sie es so einrichten, dass das Klicken auf eine Zelle dort eine Marke erh?lt.

<table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table>

Wir haben jedem <td> -Element eine ng-click -Richtlinie hinzugefügt. Wenn wir auf eine Tabellenzelle klicken, rufen wir die Funktion board unter playCell mit dem angeklickten Zellobjekt auf. Füllen Sie Board Implementierung:

<tr ng-repeat="row in board.grid">

bidirektionale Datenbindung

Okay, jetzt, wo wir das Board -Modell aktualisiert haben, müssen wir die Ansicht aktualisieren, oder?

Nein! AngularJS -Datenbindung ist bidirektional - es beobachtet Ver?nderungen in Modellen und verbreitet sie wieder in die Ansicht. In ?hnlicher Weise aktualisiert die Aktualisierung der Ansicht das entsprechende Modell. Unsere Tags werden in unserem internen Raster Board aktualisiert, und der Inhalt von <td> wird sofort ge?ndert, um dies widerzuspiegeln.

Dies beseitigt viele fragile, w?hlernabh?ngige Kesselplattencode, die Sie zuvor schreiben mussten. Sie k?nnen sich eher auf Anwendungslogik und Verhalten als auf Pipelines konzentrieren.

Es w?re gro?artig, wenn wir wüssten, dass jemand gewinnen würde. Lassen Sie es uns implementieren. Wir werden den Code, der die Gewinnkriterien hier überprüft, weglassen, aber er existiert im endgültigen Code. Nehmen wir an, wenn wir den Gewinner finden, werden wir das Gewinnattribut für jede Zelle setzen, die den Gewinner ausmacht.

Dann k?nnen wir unser <td> in so etwas ?ndern:

<td ng-repeat="cell in row">
  {{ cell.marker }}
</td>

app = angular.module('ngOughts', ['ng'])

Wenn winning wahr ist, wird ng-class die CSS -Klasse "Gewinn" auf <td> anwendet, lassen Sie uns einen angenehmen grünen Hintergrund setzen, um unseren Sieg zu feiern. Du hast gesagt, du wirst ein anderes Spiel haben? Wir brauchen eine Reset -Board -Taste:

<div ng-app='ngOughts'>

Fügen Sie es zu unserem Controller hinzu und wir werden reset aufrufen, wenn die Schaltfl?che klickt. Der Board -Marker wird gel?scht, alle CSS -Klassen werden gel?scht, und wir sind bereit, erneut zu beginnen - wir müssen nicht das DOM -Element aktualisieren.

Lassen Sie uns unseren Sieg wirklich zeigen:

app.controller "BoardCtrl", ($scope) ->

Der Befehl

ng-show erm?glicht es uns, das <h1></h1> -Element bei Gewinnen bedingt anzuzeigen, und die Datenbindung k?nnen das Tag des Gewinners einfügen. Einfach und ausdrucksstark.

Hinzufügen, um einfacher zu kombinieren und leichter zu testen

Es ist erw?hnenswert, dass der gr??te Teil unseres Codes mit einem einfachen alten JavaScript -Code befasst ist. Dies ist beabsichtigt - keine Framework -Objekte zu erweitern, nur JS -Code zu schreiben und aufzurufen. Dieser Ansatz hilft bei der Erstellung von Anwendungen, die einfacher zu kombinieren und zu testen sind, die sich leicht anfühlen. Unsere Designprobleme werden von MVC getrennt, aber wir müssen nicht viel Code schreiben, um sie miteinander zu verbinden.

AngularJS ist jedoch nicht ohne Einschr?nkungen. Viele beschweren sich über offizielle Dokumentation und die relativ steile Lernkurve, einige sorgen sich um SEO und andere hassen es einfach, nicht standardm??ige HTML-Attribute und -elemente zu verwenden.

Es gibt jedoch L?sungen für diese Probleme, und AngularJSs einzigartiger Ansatz zur Webentwicklung ist definitiv die Zeit für die Erkundung wert.

Sie k?nnen den tats?chlichen Effekt des endgültigen Code auf PlunkR anzeigen oder ihn von GitHub herunterladen.

Kommentare in diesem Artikel wurden geschlossen. Fragen zu AngularJs haben? Warum nicht Fragen in unserem Forum stellen?

FAQs über AngularJS -Anweisungen und Datenbindung

Was ist der Unterschied zwischen AngularJS -Richtlinien und Komponenten?

AngularJS -Richtlinien und -Komponenten sind leistungsstarke Merkmale des AngularJS -Gerüsts. Mit Direktiven k?nnen Sie wiederverwendbare benutzerdefinierte HTML -Elemente und Eigenschaften erstellen, w?hrend Komponenten spezielle Anweisungen sind, die einfachere Konfigurationen verwenden. Komponenten eignen sich für baukomponentenbasierte Anwendungsstrukturen, die moderner und in der heutigen Front-End-Entwicklung weit verbreitet sind. Die Anweisungen sind jedoch flexibler und k?nnen das DOM direkt bedienen, was Komponenten nicht ausführen k?nnen.

Wie funktioniert die Datenbindung in AngularJs?

Datenbindung in AngularJS ist die automatische Synchronisation von Daten zwischen Modell- und Ansichtskomponenten. AngularJS implementiert die Datenbindung so, dass Sie Ihr Modell als eine einzelne Faktenquelle in Ihrer Anwendung behandeln k?nnen. Die Ansicht ist immer eine Projektion des Modells. Wenn sich das Modell ?ndert, spiegelt die Ansicht die ?nderung wider und umgekehrt.

K?nnen Sie den Unterschied zwischen Einweg-Datenbindung und Zwei-Wege-Datenbindung erkl?ren?

Einweg-Datenbindung ist der einfache Datenfluss von einem Modell zu einer Ansicht oder von einer Ansicht zu einem Modell. Dies bedeutet, dass die Ansicht nicht aktualisiert wird, wenn sich der Modellstatus ?ndert. Auf der anderen Seite wird die bidirektionale Datenbindung bedeutet, dass der Modellstatus aktualisiert wird, wenn sich der Modellzustand ?ndert, wenn sich die Ansicht ?ndert (z. B. aufgrund der Benutzerinteraktion). Dies erm?glicht Echtzeiteffekte, was bedeutet, dass ?nderungen (z. B. Benutzereingaben) sofort im Modellzustand reflektiert werden.

Wie erstelle ich benutzerdefinierte Richtlinien in AngularJs?

Um benutzerdefinierte Anweisungen in AngularJs zu erstellen, müssen Sie die Funktion .directive verwenden. Sie k?nnen Ihre Direktive benennen und dann eine Fabrikfunktion erstellen, die alle Anweisungsoptionen speichert. Die Fabrikfunktion wird unter Verwendung einer Abh?ngigkeit (falls vorhanden) injiziert und gibt dann ein Objekt zurück, das Richtlinienoptionen definiert.

Was ist der Umfang der Isolierung in der AngularJS -Richtlinie?

Mit dem Isolationsumfang in der AngularJS -Direktive k?nnen Sie einen neuen Bereich für die Richtlinie erstellen. Dies bedeutet, dass ?nderungen im Richtlinienbereich nicht den übergeordneten Umfang beeinflussen und umgekehrt. Dies ist sehr nützlich, wenn Sie wiederverwendbare und modulare Komponenten erstellen m?chten.

Wie kann ich Transkription in AngularJS -Richtlinie verwenden?

Transkription ist eine Funktion in AngularJs, mit der Sie benutzerdefinierte Inhalte in Anweisungen einfügen k?nnen. Durch Einstellen der Option transclude in das Anweisungsdefinitionsobjekt in true, k?nnen Sie die ng-transclude -Direktive verwenden, um benutzerdefinierte Inhalte in die Anweisungsvorlage einzufügen.

Was ist die Verbindungsfunktion in der AngularJS -Direktive?

Die Verbindungsfunktion wird für AngularJS -Anweisungen verwendet, um den DOM zu manipulieren oder einen Ereignish?rer hinzuzufügen. Es wird nach dem Klonen der Vorlage ausgeführt. Diese Funktion wird normalerweise verwendet, um Aufgaben wie das Festlegen von DOM -Ereignishandlern, die überwachung von ?nderungen der Modelleigenschaften und die Aktualisierung von DOM auszuführen.

Wie verwendet Sie Controller -Funktionen in AngularJS -Direktiven?

Die Controller -Funktion ist ein JavaScript -Konstruktor, der zur Verbesserung des AngularJS -Umfangs verwendet wird. Wenn der Controller über die ng-controller -Richtlinie an das DOM angeh?ngt wird, instanziiert AngularJS ein neues Controller -Objekt mit dem Konstruktor des angegebenen Controllers. Ein neues Subscope wird erstellt und dem Controller als injizierbarer Parameter als Konstruktor $scope zur Verfügung gestellt.

Was ist der Unterschied zwischen "@", "=" und "&" in den Richtlinienumfangsoptionen?

Diese Symbole werden verwendet, um Daten an den Anweisungsbereich zu binden. "@" wird zur String -Bindung verwendet, "=" wird zur bidirektionalen Modellbindung verwendet und "&" zur Methodenbindung verwendet. Sie erm?glichen es Ihnen, Bereiche zu isolieren und Ihre Anweisungen modularer und wiederverwendbarer zu machen.

Wie testet ich meine AngularJS -Richtlinie?

AngularJS bietet ein Modul namens ngMock, mit dem Sie AngularJS -Dienste in Einheitstests injizieren und verspotteten k?nnen. Sie k?nnen es verwenden, um Ihre Anweisungen zu testen. Sie k?nnen auch andere Test -Frameworks wie Jasmine oder Mokka mit ngMock verwenden, um Tests zu schreiben und auszuführen.

Das obige ist der detaillierte Inhalt vonAngularjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!