Grundlegende Einführung und Praxis von AugularJS

Vorwort

Frontend

AngularJS wurde entwickelt, um die Mängel von HTML beim Erstellen von Anwendungen zu überwinden. (Zitat aus der Baidu-Enzyklopädie)

AngularJS verwendet einen anderen Ansatz. Es versucht, die Mängel von HTML selbst beim Erstellen von Anwendungen auszugleichen. AngularJS ermöglicht es Browsern, die neue Syntax zu erkennen, indem es Strukturen verwendet, die wir Direktiven nennen. (Zitat der Baidu-Enzyklopädie)

　

　　Zum Beispiel:

　　　　　

　　　 Verwenden Sie die Syntax mit doppelten Klammern {{}} für die Datenbindung;

Verwenden Sie DOM-Kontrollstrukturen, um DOM-Fragmente zu iterieren oder auszublenden.

Unterstützt Formulare und Formularvalidierung Kann Logikcode relevanten DOM-Elementen zuordnen.

Kann HTML in wiederverwendbare Komponenten gruppieren.

Diese Studie besteht hauptsächlich aus zwei Teilen:

①【Allgemeine AngularJS-Anweisungen】

②【AngularJS’s mvc 】

　　　　

【Allgemeine Befehle】
1.na-app: Deklarieren Sie den von AngularJS gesteuerten Bereich. Im Allgemeinen im Textkörper oder HTML geschrieben, sollte jeweils nur ein
geschrieben werden Seite. > Body Ng-APP = "" "& GT; & LT;/Body & GT;
2.ng-Model-Anweisungen binden den elementaren Wert (z. B. den Wert der Eingabedomäne) an die Anwendung.
                                                                                                                                                                                                                                           

①

②

{{name}}

4 . Die ng-init-Direktive initialisiert AngularJS-Anwendungsvariablen.
                                                                                                                                                                  Zahlen, Operatoren und Variablen. Aber der Ausdruck sieht {{}}, wenn die Webseite geladen wird, sodass Sie ng-bind=" anstelle von
{{5+""+5+',Angular'}}



[Grundgedanken]

Anweisung: In AngularJS werden Funktionen durch Erweitern der HTML-Attribute ↓↓↓↓ (ursprüngliche Wörter im Anfänger-Tutorial) bereitgestellt.
AngularJS Die ng-app-Direktive initialisiert eine AngularJS-Anwendung.            ng-model-Direktive Der Elementwert (z. B. der Wert des Eingabefelds) ist gebunden die Anwendung. -Wort: Georgia, 'Times, serifenlos; Breite: 100%; Hintergrundfarbe: #1570a6;" border="0">

2

　
[MVC-Dreischicht-Framework]

1. Modell: Der Teil der Anwendung, der Attribute verarbeitet. (Speichern oder ändern Sie Daten in Datenbanken, Variablen usw.). Die Merkmale des Modells in AugularJS sind: Daten
                                                                        . Verantwortlich für das Lesen von Daten aus Ansichten, die Steuerung von Benutzereingaben und das projektweite Versenden von Daten.

2. Funktionsprinzip: Der Benutzer sendet eine Anfrage von der Ansichtsebene. Nach Erhalt der Anfrage leitet der Controller diese zur Verarbeitung an das entsprechende Modell weiter Controller erfasst und in der Ansicht an den Benutzer zurückgegeben.
                                           . ng-app="myApp";
② Array: Der Name des Moduls, das eingefügt werden muss. Es kann leer sein, wenn es nicht erforderlich ist.

var app = angle.module ("myapp", []);

Erstellen Sie einen Controller Controller auf dem Angular-Modul. Sie müssen zwei Parameter übergeben.
① ng-controller="myCtrl"
② Konstruktor des Controllers: Der Konstruktor kann mehrere Parameter übergeben, einschließlich $scope/$roatScope und verschiedenen im System integrierten Objekten
Scope]
①$scope : Lokaler Bereich, Eigenschaften und Methoden, die auf $scope deklariert sind, können nur im aktuellen Controller verwendet werden. ②$rootScope: Root-Bereich, deklariert auf $rootscope. Vertrautheit und Methoden können in jedem von ng-app enthaltenen Bereich verwendet werden ( unabhängig davon, ob es mit dem Controller übereinstimmt oder im enthaltenden Bereich des Controllers liegt). > , dann wird diese Variable standardmäßig an den $scope des aktuellen Controllers gebunden
2. Wenn sich ng-model in keinem ng-Controller befindet, wird diese Variable an $rootScope gebunden.





Die Darstellung ist wie folgt:

Der Code lautet wie folgt:

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="UTF-8"> 5         <title></title> 6         <style type="text/css"> 7             .div1{ 8                 width: 300px; 9                 height: 100px;10                 background-color: #00BFFF;11             }12         </style>13     </head>14     <body ng-app="myApp">15         <div ng-controller="myCtrl">16             <input type="text" ng-model="name"/>17             <div ng-bind="name" class="div1"></div>18             <div ng-bind="age" class="div1"></div>19             <div ng-bind="classes" class="div1"></div>20             <div ng-bind="classes.name" class="div1"></div>21             <div ng-bind="classes.age" class="div1"></div>22             <div ng-bind="classes.sex" class="div1"></div>23             24         </div>25         <div ng-controller="myCtrl1">26             <input type="text" ng-model="name"/>27             <div ng-bind="name" class="div1"></div>28             <div ng-bind="age" class="div1"></div>29         30         </div>31             32     </body>33     <script language="JavaScript" src="angular-1.5.6/angular.js?1.1.11"></script>34     <script type="text/javascript">35         var app = angular.module("myApp",[]);    
36         app.controller("myCtrl",function($scope){37             $scope.name = "帅哥" ;38             $scope.age = "18岁";39             $scope.classes = {40                     name:"张三",41                     age:"16岁",42                     sex:"男"43                 44             };45             46         });47         48         app.controller("myCtrl1",function($rootScope){49             $rootScope.name = "hahaha" ;50                     });51         52     </script>53 </html>

Beim Lernen kann es zu Fehlern in den Notizen kommen Kritik ist willkommen.
Reflektiere, überprüfe und gewinne jeden Tag etwas ------- Ich freue mich auf ein besseres Selbst

Das obige ist der detaillierte Inhalt vonGrundlegende Einführung und Praxis von AugularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!