Heim > Artikel > Web-Frontend > Zusammenfassung der Grundkenntnisse und Beispiele von Angularjs_AngularJS
AngularJS ist ein von Google entwickeltes High-End-Front-End-MVC-Entwicklungsframework.
Offizielle Website von Angularjs: https://angularjs.org/ Die offizielle Website verfügt über eine Demo, für den Zugriff ist möglicherweise FQ erforderlich
Angularjs chinesische Community: http://www.angularjs.cn/ Geeignet für Anfänger
Referenzdatei: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js
Seien Sie vorsichtig bei der Verwendung von Winkeln
Zitieren Sie die AngularJS-Bibliothek: https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1.... Sie können sie vom Github der Beispiele in herunterladen diesen Abschnitt
Sie müssen ng-app="appName" in dem von Ihnen verwendeten Bereich oder direkt ng-app (global) hinzufügen.
Stellen Sie den Controller ng-controller="Strg" ein.
Bitte beachten Sie beim Testen des Beispiels folgende Punkte
Sie müssen vor dem Kopf den AngularJS-Code einführen. Der Autor verwendet Angular-1.0.1.min.js. Bitte beachten Sie den Versionsunterschied.
Alle kleinen Beispiele werden in den folgenden Bereichen ausgeführt. Denken Sie daran, ng-app im Bereich hinzuzufügen.
Im Folgenden werden einige kleine Fälle verwendet, um die allgemeinen Standardanweisungen und die Verwendung von AngularJS zu veranschaulichen.
Hallo Weltprogramm (doppelte Datenbindung)
Verwenden Sie ng-model={{name}}, um Daten zu binden
http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html
Ein kleiner Fall der Verwendung von Ereignisbindung
http://2.liteng.sinaapp.com/angularjsTest/event-bind.html
ng-init: Attributwerte können standardmäßig angegeben werden
{{value}}
http://2.liteng.sinaapp.com/angularjsTest/ng-init.html
ng-repeat: wird verwendet, um Daten ähnlich wie i für Informationen in js zu iterieren
Ich habe {{friends.length}} Freunde. Sie sind
http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html
ng-click:dom click event
http://2.liteng.sinaapp.com/angularjsTest/ng-click.html
ng-show: Elementanzeige einstellen
Hinweis: ng-show="!xx": Vor dem Attributwert hinzufügen! Zeigt eine Bestätigung der Anzeige an, falls nicht hinzugefügt! Wenn Sie unsicher sind, zeigen Sienicht an
http://2.liteng.sinaapp.com/angularjsTest/ng-show.html
ng-hide: Element so einstellen, dass es ausgeblendet wird
http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html
Verwenden Sie ng-show, um einen Umschalteffekt zu erzeugen
http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html
ng-style: ähnlich dem Standardstil
Bitte achten Sie hier auf das Schreibformat: Die Zeichenfolge muss in Anführungszeichen gesetzt werden
Filter: Filterfeld
http://2.liteng.sinaapp.com/angularjsTest/filter.html
ng-template: Vorlage kann geladen werden
tpl.html
$http: Eine Ajax-ähnliche Methode funktioniert gut
Alle oben genannten Codes: https://github.com/litengdesign/angularjsTest
Demo implementiert: http://2.liteng.sinaapp.com/angularjsTest/index.html
Was das Routing (Router) und die Direktive (Direktive) von AngularJS betrifft, werde ich das nächste Mal separat darauf eingehen.