Wie verwende ich das AngularJS-Frontend-Framework? Einführung in die Verwendung des AngularJS-Front-End-Frameworks

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-Bind-Anweisungen binden die Anwendungsdaten an die HTML-Ansicht, das heißt, die Hintergrunddaten werden an die Rezeption gebunden

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

fa97ac8f63d24b71c8d4ad332b7d8b91d3771b0717303fa4cff39e39630091b7Name: < ;span ng-bind="firstName + ' ' + lastName">a40bb0e8c769d46bcc97ea6ddd88211f395647a4d82615d0f30ae91bd6f9081c8c05e4ba700ecf3a3fba632670b48d2e[Ausführungsergebnis: Name: Doe】

2. Json-Objekt initialisieren

                                                                         ="" ng-init=" person={firstName:'John',lastName:'Doe'}"> e272c47c31ea85c3ba6fb01b7aa2eddaDer Nachname ist {{ person.lastName }}9dc292f482909e749b4a8d450dd2c89b[Ausführungsergebnis : Der Nachname ist Doe]3. Initialisieren Sie das Array-Objekt (Array-Index beginnt bei 0)

9397be56ed3202d913ea11a918dda581 0f5c598f91a383828e0a9135f6c743eeDer dritte Wert ist {{ Punkte[2] }}86488055c3bf5915b9acaaf4d504f4c477c0e188e8a6e0de9e8d776fa76a706b[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

                          5febe34c59450fb17b70c81c5ffd10f9 

                                    d3771b0717303fa4cff39e39630091b7使用 ng-repeat 来循环数组8c05e4ba700ecf3a3fba632670b48d2e 

                                    94cf9f71896cce458971adf2bc978fb1

                                            4fa76e168b8fe1de649ff42059b63884 {{ x }} 00264599778bfef15205fe2f698216e0

                                    6f304873f188339d0626400a7defcfa7 

                          721bb74aac4891df28f85ad785726569【执行结果：li整一个标记和里面的内容进行循环重复】

  • 【ng-app：应用程序】

  1、ng-app 指令定义一个 AngularJS 应用程序,ng-app 指令告诉 AngularJS，e388a4556c0f65e1904146cc1a846bee 元素是 AngularJS应用程序的"所有者"。     

  2、ng-app 指令指明了应用,  ng-controller 指明了控制器，放在一个p的属性中，指明这一段p都在AngularJS的控制范围内

  3、ng-app 指令定义了 AngularJS 应用程序的 根元素

  4、ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序 

  •  <p ng-app="" ng-init="firstName=&#39;John’">
                         <p>姓名为 <span ng-bind=“firstName”></span></p>
             </p

  •  【ng-bind：数据绑定】  
    

           1、绑定单一变量（想看更多就到PHP中文网AngularJS开发手册中学习）

                fa97ac8f63d24b71c8d4ad332b7d8b91d3771b0717303fa4cff39e39630091b7Name: < ;span ng-bind="firstName + ' ' + lastName">a40bb0e8c769d46bcc97ea6ddd88211f395647a4d82615d0f30ae91bd6f9081c8c05e4ba700ecf3a3fba632670b48d2e[Ausführungsergebnis: Name: Doe】

  2. Initialisieren Sie das Json-Objekt

  ="" ng-init=" person={firstName:'John',lastName:'Doe'}">566051d7121118f22a649cc17fb44b96Der Nachname ist7f54bbcc862aa1746ba9d599115492b3< ;/span>2a077c262051604ffff639089eed06f5 2de52fdac855d5bc9514ca9dee18399f【 Ausführungsergebnis: Der Nachname ist Doe] 3 . Initialisieren Sie das Array-Objekt (Array-Index beginnt bei 0)            

  d72c680cf9439f8875a61f092e88710f"points=[1,15,19,2, 40]"> c917c000b9559681ed89da9f6e3325bcDer dritte Wert ist 86bd5627b11f7c77bb148f9c36a2d1a0b81edf81cff8868446d99144a5a58bbf2de52fdac855d5bc9514ca9dee18399f【 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-Adresse6af92501477aa6082557ee19ec797b1e

    
                                                                                                      ;> & 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
    >4e456390eecf031ef9f390f5895582db

    {{x}}
    

    7c1ee85bd8f61f15fb00547c67339c0e
    54c53d332ad8618a64c5af994c5b7696

                                                                                                                                                            ;18bb6ffaf0152bbe49cd8a3620346341
    

                                                                                          ​ ​ ng-repeat hat Einschränkungen, ng-repeat wählt eine Zeichenfolge und ng-options wählt ein Objekt aus
    [

    ng-disabled

    : Gibt an, ob das Schaltflächenattribut verfügbar ist]
    • 1. true bedeutet, dass die Schaltfläche nicht verfügbar ist , false bedeutet, dass die Schaltfläche verfügbar ist

    [

    ng-hide

    : Gibt an, ob die Markierung ausgeblendet ist]

    • 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

    : AngularJS click Event]

    • 1. Die ng-click-Direktive definiert das AngularJS-Klickereignis 7. Definition und Verwendung von benutzerdefinierten Anweisungen
      

    [

    .directive

    : Benutzerdefinierte Anweisungen hinzufügen]
    

    1. Anweisungsdefinition

    • app.directive("runoobDirective ", function() {
      var app = angle.module("myApp", []);

      return {
      restrit: "A", [Diesen Befehl darf nur als Attribut verwendet werden]

      Vorlage: „ 4a249f0d628e2318394fd9b75b4636b1Benutzerdefinierter Befehl!473f0a7621bec819994bb5020d29372a“

      };

      } ; >>

      2a33bfd4a45c966ef5316798bf3e2685

      Attributaufruf:

    32b74646d2538739193fa1280f8a161cKlassennameaufruf: fb402d9818f1686967df20cbe0ea5d5f94b3e26ee717c64999d7867364b1b4a3
    Kommentaraufruf: 6e5b1a069f8503b50ac978b754b867f3 Beachten Sie, dass das Ausführungsergebnis kein Kommentar ist

    ] 3. Beschränken Sie den Umfang der Anweisungsverwendung (Standard ist als EA) E: Als Elementname verwenden A: Als Attribut verwenden C: Als Klassenname verwenden

    M: Als Kommentar verwenden
    【Hinweis】 1. Typ = „Nummer“ bedeutet, dass dieses Eingabefeld ein numerisches Format hat. Sie können nach oben und unten klicken, um Zahlen zu erhöhen oder zu verringern, es können jedoch auch nicht numerische Zeichen eingegeben werden

    Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website AngularJS-Benutzerhandbuch , um mehr zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen).

Das obige ist der detaillierte Inhalt vonWie verwende ich das AngularJS-Frontend-Framework? Einführung in die Verwendung des AngularJS-Front-End-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!