Angularjs

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:

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

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">
<p> </p>
<h2> AngularJS -Befehl </h2> 
<p> <code>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 <code>grid ist ein Objekt im Fenster. board
<code class="language-html"><table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table></code>
 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>
<code>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. 
<code class="language-html"><tr ng-repeat="row in board.grid">
<p> passen wir HTML an die Verwendung der <code>['ng']</code> -Richtlinie an, die uns anweist, unser Anwendungsmodul zu verwenden. </p>
<p>
<code>ng-app</code> </p> MVC - Definieren Sie Controller und Ansichten <pre class="brush:php;toolbar:false"><code class="language-html"><td ng-repeat="cell in row">
  {{ cell.marker }}
</td></code>
 


 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 
<code class="language-javascript">app = angular.module('ngOughts', ['ng'])</code>
 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 
<code class="language-html"><div ng-app="ngOughts"> Eigenschaft wird dann nach der <p> -Rearianz im Bereich von <code>$scope</code> suchen. Definieren wir sie also: <code>ng-repeat</code>
<code>BoardCtrl</code>
<code>board</code> Wir machen jetzt einige Fortschritte. Wir injizieren </p> in unseren Controller, instanziieren Sie ihn und stellen sie im Bereich von <pre class="brush:php;toolbar:false"><code class="language-javascript">app.controller "BoardCtrl", ($scope) -></code>
 zur Verfügung. 

Board Lassen Sie uns eine einfache BoardCtrl -Klasse implementieren. 

Board 
 FACTORY 
<code class="language-html"><div ng-controller="BoardCtrl">
  <table>
    <tr ng-repeat="row in board.grid">
      ...
    </tr>
  </table>
</div></code>
 
 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 
<code class="language-javascript">app.controller "BoardCtrl", ($scope, Board) ->
    $scope.board = new Board</code>
 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. 
<code class="language-html"><table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table></code>
 Wir haben jedem <td> -Element eine <code>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: 
<code class="language-html"><tr ng-repeat="row in board.grid">
<p> </p>
<h2> bidirektionale Datenbindung </h2> 
<p> Okay, jetzt, wo wir das Board -Modell aktualisiert haben, müssen wir die Ansicht aktualisieren, oder? </p>
<p> Nein! AngularJS -Datenbindung ist <em> bidirektional </em> - 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 <code>Board</code> aktualisiert, und der Inhalt von <code><td> wird sofort geändert, um dies widerzuspiegeln. 
<p> 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. </p>
<p> 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. </p>
<p> Dann können wir unser <code><td> in so etwas ändern: 
<pre class="brush:php;toolbar:false"><code class="language-html"><td ng-repeat="cell in row">
  {{ cell.marker }}
</td></code>
<code class="language-javascript">app = angular.module('ngOughts', ['ng'])</code>
 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: 
<pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;div ng-app=&quot;ngOughts&quot;&gt;
&lt;p&gt; Fügen Sie es zu unserem Controller hinzu und wir werden &lt;code&gt;reset&lt;/code&gt; 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. &lt;/p&gt;
&lt;p&gt; Lassen Sie uns unseren Sieg wirklich zeigen: &lt;/p&gt;
&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;app.controller &quot;BoardCtrl&quot;, ($scope) -&gt;&lt;/code&gt;</pre>
Der Befehl <p> <code>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.