suchen

Heim >Web-Frontend >js-Tutorial >Eine kurze Einführung in AngularJS-Studiennotizen_AngularJS

Eine kurze Einführung in AngularJS-Studiennotizen_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:38:021005Durchsuche

1. Einführung in AngularJS

AngularJS ist ein strukturelles Framework, das für dynamische WEB-Anwendungen entwickelt wurde. Sie können HTML als Vorlagensprache verwenden und durch die Erweiterung der HTML-Syntax können Sie Ihre Anwendungskomponenten klarer und prägnanter erstellen. Die Innovation besteht darin, dass es Datenbindung und Abhängigkeitsinjektion nutzt, um Ihnen das Schreiben einer Menge Code zu ersparen. Diese werden alle durch browserseitiges Javascript implementiert, wodurch es auch perfekt in jede serverseitige Technologie integriert ist.

Nachdem ich so viel gesagt habe, vermute ich, dass Sie nichts verstehen. . . Ist es richtig? Machen Sie sich keine Sorgen, lassen Sie mich über einige seiner Funktionen sprechen: Modularität, bidirektionale Datenbindung, Abhängigkeitsinjektion und Anweisungen. Schauen wir uns diese Funktionen im Folgenden genauer an.

2.angularjs basiert auf dem MVC-Konzept

Der sogenannte MVC ist Modul (Datenmodell), Ansicht (Ansicht), Controller (Controller)

Tatsächlich kombiniert AngularJS diese drei Module. Hier ist ein Modelldiagramm, das ich zuerst gezeichnet habe:

3. Kombinierte Erklärung

Wie oben erwähnt, sind die Merkmale von AngularJS: Modularisierung, Abhängigkeitsinjektion, bidirektionale Bindung und Anweisungen. Lassen Sie es mich Ihnen nun anhand des Bildes oben erklären:

Modularität: Die vier Quadrate unter dem Filter, der Direktive ... im Bild oben sind die vier repräsentativen Methoden des Moduls (die Verwendung und Funktion jeder Funktion werde ich später einzeln erläutern), die auch verständlich sind Als eigene kleine Module hat jedes Modul unterschiedliche Funktionen, aber die Arbeitsteilung und die Struktur sind klar, wodurch eine Modularisierung erreicht wird.

Abhängigkeitsinjektion: Die vier oben genannten kleinen Module scheinen unabhängig zu sein, aber sie sind voneinander abhängig und können aufeinander verweisen, um leistungsstarke Funktionen zu erreichen (wie man referenziert, wird später im Detail erklärt), das ist Abhängigkeitsinjektion.

Anweisung: Wie aus dem obigen Bild ersichtlich ist, handelt es sich bei der Anweisung um die Direktivenmethode im Bild. Es gibt viele integrierte Anweisungen in AngularJS, wie z. B. ng-app (Angabe des Bereichs von AngularJS), ng-Model (Definieren eines Datenmodells und Implementieren einer bidirektionalen Bindung), ng-repeat (Wiederholen einer Beschriftung), ng- ändern (Überwachen Sie, ob sich der Wert des Tags geändert hat) usw. Die wichtigste Funktion dieser Direktive ist die benutzerdefinierte Direktive (einige Tutorials sagen auch, dass es sich um eine HTML-Erweiterung handelt).

Zwei-Wege-Bindung: Die bidirektionale Bindung ist das Modul und die Ansicht im Bild oben, dh die bidirektionale Bindung von Daten und Ansichten. Es wird die gerade erwähnte ng-model-Direktive verwendet.

4. Schauen Sie sich ein einfaches Beispiel für die bidirektionale Bindung an.

index.html:

<!DOCTYPE html>
<html ng-app> 
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
    <script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
  </head>
  <body>
    <div> 
      <input type="text" ng-model="text">
      <b>Hello {{text}}</b>
    </div>
  </body>
</html>

Sie können den obigen Code in den Browser übertragen und ausführen (beachten Sie die Adresse, die auf AngularJS verweist). Sie werden überrascht sein, dass AngularJS wirklich leistungsstark ist! !

Lassen Sie mich kurz die schwer verständlichen Stellen im obigen Code erläutern:

ng-app gibt den Anwendungsbereich an, was bedeutet, dass der gesamte HTML-Code AngularJS erkennen kann.
ng-model bindet den Namenstext des Datenmodells an das Element und der Eingabewert der Eingabe wird in diesem Modell gespeichert.
{{text}} Dies ist eine Möglichkeit, einen Ausdruck in AngularJS zu schreiben, das heißt, der Text in der Mitte ist eine Variable, die dem obigen Modellnamen entspricht. Er kann Änderungen im Eingabewert in Echtzeit überwachen und die Ansicht aktualisieren Anzeige in Echtzeit

Haha, AngularJS ist ganz einfach. Ich hoffe, dass diese kleine Notiz das Interesse aller an AngularJS wecken kann. Ich werde die Lernnotizen von AngularJS später weiter aktualisieren. Ich hoffe, es hilft allen. Wenn Sie etwas zu den obigen Anmerkungen nicht verstehen, fragen Sie mich einfach und ich werde es Ihnen auf jeden Fall beantworten. Ich wünsche euch allen ein glückliches Leben!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eingehende Analyse des JSONP-Protokolls „principle_json“.Nächster Artikel：Eingehende Analyse des JSONP-Protokolls „principle_json“.

In Verbindung stehende Artikel

Mehr sehen