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

<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=&#39;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

    ng-repeat=

    "x in Namen"
    >

    {{x}}
    

    <
    /option

    >

    <
    /select
    • >

                                                                                                                                                              ;
      

                                                                                            ​ ​ 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: „

        Benutzerdefinierter Befehl!

        “

        };

        } ; >>

        <

        /runoob-directive

        >

        Attributaufruf:

      <

      • p

        runoob- Direktive></p> Klassennameaufruf:

      Kommentaraufruf:
      

      Heiße KI -Werkzeuge

      

      Undresser.AI Undress

      KI-gestützte App zum Erstellen realistischer Aktfotos

      

      AI Clothes Remover

      Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

      

      Undress AI Tool

      Ausziehbilder kostenlos

      

      Clothoff.io

      KI-Kleiderentferner

      

      Video Face Swap

      Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

      Mehr anzeigen
      

      Heißer Artikel

      Assassin's Creed Shadows: Seashell Riddle -Lösung

      3 Wochen vor By DDD

      Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

      2 Wochen vor By DDD

      Assassins Creed Shadows - So finden Sie den Schmied und entsperren Sie die Waffen- und Rüstungsanpassung

      1 Monate vor By DDD

      Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

      3 Wochen vor By DDD

      <🎜>: Dead Rails - wie man jede Herausforderung abschließt

      3 Wochen vor By DDD

      Mehr anzeigen
      

      Heiße Werkzeuge

      

      Notepad++7.3.1

      Einfach zu bedienender und kostenloser Code-Editor

      

      SublimeText3 chinesische Version

      Chinesische Version, sehr einfach zu bedienen

      

      Senden Sie Studio 13.0.1

      Leistungsstarke integrierte PHP-Entwicklungsumgebung

      

      Dreamweaver CS6

      Visuelle Webentwicklungstools

      

      SublimeText3 Mac-Version

      Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

      Mehr anzeigen
      

      Heiße Themen

      Wo ist der Login-Zugang für Gmail-E-Mail?

      7643

      15

      CakePHP-Tutorial

      1392

      52

      Wie lautet das Format des Kontonamens von Steam?

      91

      11

      Win11 -Aktivierungsschlüssel dauerhaft

      72

      19

      NYT -Verbindungen Hinweise und Antworten

      33

      151

      Mehr anzeigen