Verständnis der Zwei-Wege-Datenbindung in AngularJs

detaillierte Erläuterung und Anwendung von AngularJS-Zwei-Wege-Datenbindung: Dynamischer Visitenkartengenerator

Kernpunkte

Die bidirektionale Datenbindung von AngularJS ermöglicht die Aktualisierung von Ansichten und umgekehrt. Dies wird durch integrierte AngularJs-integrierte Richtlinien wie
• und ng-model erreicht. ng-bind
Das
• -Objekt in AngularJs spielt eine entscheidende Rolle bei der bidirektionalen Datenbindung, wird als Brücke zwischen dem Controller und der Ansicht und speichert Modelldaten und Funktionen. $scope
AngularJS kombiniert Ereignis- und Attributbindungs- und Verdauungszeitungsmechanismus, um die bidirektionale Datenbindung zu implementieren, um Ansichten zu überwachen und zu aktualisieren, wenn sich die Daten ändern.
Während die bidirektionale Datenbindung die Entwicklung durch automatische Synchronisierung von Ansichten und Modellen vereinfachen kann, kann es sich aufgrund der Zugabe von Monitoren für jede Bindung auch negativ auf die Leistung auswirken.

Dieses Tutorial zeigt, wie die bidirektionale Datenbindung in AngularJs funktioniert, indem ein dynamischer Visitenkartengenerator erstellt wird. Mit diesem Generator können Sie Ihre eigene virtuelle Visitenkarte erstellen, die Sie mit Ihrem Namen, Ihrer Karriere, Ihrem E -Mail, Ihrem Firmenlogo und Ihren Links zu Ihrer Homepage- und Social -Media -Websites personalisieren können. Sie können die Hintergrund- und Textfarbe der Karte mithilfe von HTML5 -Farbeingabe anpassen und alle in Echtzeit vorgenommenen Änderungen anzeigen. Der endgültige Effekt ist wie folgt:

starten

Wir werden Bower verwenden, um Projektabhängigkeiten zu verwalten. Bower ist ein Webpaket -Manager, der mit NPM installiert werden kann (was bedeutet, dass Sie node.js installieren müssen). Wenn Sie Hilfe bei der Installation von Node.js (oder NPM) benötigen, lesen Sie einen aktuellen SitePoint -Artikel zu diesem Thema. Wenn Sie Hilfe bei der Installation von Bower benötigen, können Sie die Anweisungen auf der Homepage anzeigen. Die Abhängigkeiten dieses Projekts sind das Bootstrap -Framework (für Styles und Akkordeonkomponenten), eine Schriftart (für Ikonen) und JQuery (Bootstrap hängt davon ab) und AngularJs. Angenommen, Sie haben Bower installiert und konfiguriert, erstellen Sie ein neues Verzeichnis, gehen Sie zu diesem Verzeichnis und initialisieren Sie das Projekt mit Bower:

mkdir ACG && cd ACG
bower init

Bower erstellt dann eine

-Datei im Stammverzeichnis des Projekts. Es werden Ihnen auch einige Fragen wie Projektname, Autorenname, Beschreibung usw. gestellt. Geben Sie "ACG" unter den Namen (für Winkelkartengenerator) ein und füllen Sie den Rest nach Bedarf aus (oder akzeptieren Sie einfach den Standardwert). Die generierte JSON -Datei sollte so aussehen: bower.json

{
  "name": "ACG",
  "version": "0.0.0",
  "authors": [
    "Tanay Pant <tanay1337>"
  ],
  "description": "Card Generator",
  "keywords": [
    "AngularJS"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Führen Sie als nächstes den folgenden Befehl im Terminal aus:

bower install bootstrap --save
bower install font-awesome --save
bower install angular --save

Dies wird alle für das Projekt erforderlichen Abhängigkeiten in einem Verzeichnis namens

installiert und die Abhängigkeiten in die bower_components -Datei speichern. Es ist besser, bower.json zu bower_components hinzuzufügen, da Sie diesen Ordner nicht in Ihr Github -Repository hochladen möchten, da jeder Mitwirkender dieselbe installieren kann, indem Sie in der Stammwinkel Ihrer Projektabhängigkeiten .gitignore ausgeführt werden. bower install

Struktur der AngularJS -Anwendung

Erstellen Sie im ACG -Ordner eine Datei mit dem Namen index.html und eine andere Datei mit dem Namen style.css. Fügen Sie den folgenden Code zu index.html:

hinzu

mkdir ACG && cd ACG
bower init

Wir werden die Webseite durch Hinzufügen von und ng-app="myApp" zum ng-controller="BusinessCardController" Tag hinzufügen. Die ng-app -Richtlinie ist erforderlich, um Angular zu sagen, dass die gesamte Seite eine AngularJS -Anwendung ist, während die ng-controller -Richtlinie die Controller -Klasse an unsere Ansicht anhält. Anschließend verwenden wir die ng-bind -Richtlinie im Titel, damit der Titel der Seite mit unserem Modell synchronisiert bleibt, und dann die relevanten CSS -Dateien (in ) und JS -Dateien (vor dem End -Tag von ) synchronisiert. Diese Dateien (außer style.css) befinden sich alle im Ordner bower_components. Schließlich definieren wir myApp (unser Hauptmodul, das am Anwendungsstart geladen wird), und ein BusinessCardController, in dem wir den Ausgangszustand des $scope -Objekts festlegen (wie unser Controller und Ansichtsdaten ansehen).

(Die folgenden Schritte aufgrund von Platzbeschränkungen, der detaillierte Code der Akkordeonkomponente und nachfolgende Controller -Codes, Stilcodes usw. werden hier weggelassen. Der vollständige Code finden Sie in CodePen oder Github.) Weitere Informationen finden Sie im ursprünglichen Link für den vollständigen Code.

Zusammenfassung

Ich hoffe, dieser Visitenkartengenerator kann Ihnen helfen, die grundlegenden Konzepte der Datenbindung in AngularJs zu lernen. Sie finden die vollständige Code -Demo auf CodePen oder klonen Sie den Code für diesen Artikel von GitHub. Ich ermutige Sie, das Repository zu geben, den Code auszuprobieren und zu sehen, welche coolen Sachen Sie sich einfallen lassen können.

(Der im Originaltext bereitgestellte FAQ -Teil wurde ebenfalls weggelassen, der Kerninhalt wurde jedoch in den Schlüsselpunkten zusammengefasst.)

Das obige ist der detaillierte Inhalt vonVerständnis der Zwei-Wege-Datenbindung in AngularJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!