Dieser Artikel stellt hauptsächlich das Lernen über das Front-End-Framework von AngularJS vor. Alles, was Sie wissen müssen, finden Sie in diesem Artikel. Lassen Sie uns diesen Artikel jetzt gemeinsam lesen
1. Die Haupteinführung in AngularJS:
AngularJS bindet Anwendungsdaten an HTML-Elemente
AngularJS kann geklont werden Und sich wiederholende HTML-Elemente
AngularJS kann HTML-Elemente ein- und ausblenden
AngularJS kann Code „hinter“ HTML-Elementen hinzufügen
AngularJS unterstützt die Eingabevalidierung
2, Funktionen der AngularJS-Direktive:
ng-directives erweitern HTML
ng-model-Direktive bindet Elementwerte (z. B. Eingabefeldwerte) an die Anwendung, die an den Hintergrund übergeben werden soll [ Zum Beispiel:]
Ng-Initial-Initialisierungsseite
AngularJS Module definiert eine AngularJS-Anwendung.
AngularJS Controller wird zur Steuerung von AngularJS-Anwendungen verwendet.
3. AngularJS-Ausdruck:
AngularJS-Ausdruck wird in doppelten geschweiften Klammern geschrieben: {{ Ausdruck }}.
AngularJS-Ausdrücke binden Daten an HTML, was der ng-bind-Direktive ähnelt.
AngularJS „gibt“ die Daten dort aus, wo der Ausdruck geschrieben ist.
4. Der Unterschied zwischen AngularJS-Ausdrücken und JavaScript-Ausdrücken
Ähnlich wie JavaScript-Ausdrücke können AngularJS-Ausdrücke Buchstaben, Operatoren, Variablen enthalten
und JavaScript-Ausdrücke Anders, AngularJS-Ausdrücke können in HTML geschrieben sein
Im Gegensatz zu JavaScript-Ausdrücken unterstützt der AngularJS-Ausdruck keine bedingte Beurteilung, Zirkulation und abnormale
und JavaScript-Ausdrücke unterstützen AngularJS-Ausdrücke das Filtern von Filtergeräten.
5. AngularJS definiert ein Modul:
var app = angular.Modul('meineApp', [] );
6. AngularJS-Anweisungslernen:
[ng- init: Dateninitialisierung]
1. Initialisieren Sie eine einzelne Variable
<p ng-app=" " ng-init="firstName='John';lastName='Doe' "><p>Name: < ;span ng-bind="firstName + ' ' + lastName">span> p>p>[Ausführungsergebnis: Name: Doe】
2. Json-Objekt initialisieren
="" ng-init=" person={firstName:'John',lastName:'Doe'}"> < p>Der Nachname ist {{ person.lastName }}p> ;p>[Ausführungsergebnis : Der Nachname ist Doe]3. Initialisieren Sie das Array-Objekt (Array-Index beginnt bei 0)
<p
ng-app="" ng-init="points=[1,15,19,2,40 ]"> <p>Der dritte Wert ist {{ Punkte[2] }} p>p>[Ausführungsergebnis:Der dritte Wert für 19】 [ng-model
: Datensynchronisation] 1. AngularJS verwendet ng-model für die Datenbindung und überträgt Daten an den Hintergrund Solange sich zwei verwandte Daten im Vordergrund befinden und sich eine Seite ändert, ändert sich sofort die andere
<p ng-app="" ng-init="quantity=1;price=5”>
<h2>价格计算器</h2>
数量： <input type="number" ng-model="quantity”>
价格： <input type="number" ng-model="price”>
<p><b>总价：</b> {{ quantity * price }}</p>
</p>ng-repeat: Datenschleife]
1. AngularJS verwendet ng-repeat, um Daten zu schleifen. Das HTML-Tag der Schleife ist das Tag, in dem sich die ng-repeat-Anweisung befindet
<p ng-app="" ng-init="names=['Jani','Hege','Kai']”>
<p>使用 ng-repeat 来循环数组p>
<ul>
<li ng-repeat="x in names"> {{ x }} li>
ul>
p>【执行结果：li整一个标记和里面的内容进行循环重复】
【ng-app：应用程序】
1、ng-app 指令定义一个 AngularJS 应用程序,ng-app 指令告诉 AngularJS，
元素是 AngularJS应用程序的"所有者"。
2、ng-app 指令指明了应用, ng-controller 指明了控制器，放在一个p的属性中，指明这一段p都在AngularJS的控制范围内
3、ng-app 指令定义了 AngularJS 应用程序的 根元素
4、ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序
<p ng-app="" ng-init="firstName='John’"> <p>姓名为 <span ng-bind=“firstName”></span></p> </p
【ng-bind：数据绑定】
1、绑定单一变量（想看更多就到PHP中文网AngularJS开发手册中学习）
<p ng-app=" " ng-init="firstName='John';lastName='Doe' "><p>Name: < ;span ng-bind="firstName + ' ' + lastName">span> p>p>[Ausführungsergebnis: Name: Doe】
2. Initialisieren Sie das Json-Objekt
="" ng-init=" person={firstName:'John',lastName:'Doe'}"><p>Der Nachname ist<span ng-bind="person.lastName">< ;/span>p> p>【 Ausführungsergebnis: Der Nachname ist Doe] 3 . Initialisieren Sie das Array-Objekt (Array-Index beginnt bei 0)
<p
ng-app=" " ng-initspan class=" hl-quotes">"points=[1,15,19,2, 40]"> <p>Der dritte Wert ist <span ng- bind="points[2]">p>p>【 Ausführungsergebnis: Der dritte Wert ist 19] [ng-show: Datenanzeige 】
1. Wenn der Wert des ng- Wenn das Attribut „show“ wahr ist, zeigt der Befehl „ng-show“ den Inhalt des Tags an, in dem sich der Befehl „ng-show“ befindet
name="myAddress" ng-model="text"> Keine gültige E-Mail-Adresse</span
>
;> & Gt; [Ergebnisse ausführen: Wenn der Wert des Eingabefelds in myAddress eine legitime Postfachadresse ist, wird „keine legale Postfachadresse“ nicht angezeigt, andernfalls wird sie nicht angezeigt, andernfalls wird sie angezeigt! 】 $dirty}} Bedingungen】 [ng-
Optionen: Dropdown-Auswahl] 1. Code erstellen 🎜> auswählen
><Option
"x in Namen"
>
{{x}}
>
</select ;
[ ng-disabled
ng-hide 1. true bedeutet, dass die Markierung, an der sich ng-hide befindet, ausgeblendet ist, false. Das Tag, das angibt, wo sich ng-hide befindet, wird angezeigt, was das Gegenteil von ng- ist. show ng-click 1. Die ng-click-Direktive definiert das AngularJS-Klickereignis 7. Definition und Verwendung von benutzerdefinierten Anweisungen [ : Benutzerdefinierte Anweisungen hinzufügen] 1. Anweisungsdefinition app.directive("runoobDirective ", function() { p runoob- Direktive></p> Klassennameaufruf:
[
[
var app = angle.module("myApp", []);
}; Vorlage: „
Benutzerdefinierter Befehl!
“
} ; >>
<
> /runoob-directive
Attributaufruf: