Zusammenfassung des allgemeinen Wissens für den Einstieg in AngularJS

Vorwort

Lass uns heute mit dir AngularJS lernen...

AngularJS verwendet neue Attribute und Ausdrücke Format erweitert HTML.

AngularJS kann eine Einzelseitenanwendung erstellen.

AngularJS ist sehr einfach zu erlernen.

[Grundkonzept]
Richtlinie: In AngularJS wird Funktionalität durch die Erweiterung von HTML-Attributen bereitgestellt.
Daher werden die neuen Attribute, die mit ng- beginnen, von uns als Anweisungen bezeichnet.

[MVC dreistufige Architektur]
1. Modell:
Der Teil der Anwendung, der zur Datenverarbeitung verwendet wird. (Speichern oder ändern Sie Daten in Datenbanken, Variablen usw.). Modell in AngularJS bezieht sich speziell auf: Daten.
Ansicht: Die Seite, die der Benutzer zum Anzeigen von Daten sieht.
Controller: Der Teil der Anwendung, der die Benutzerinteraktion verarbeitet. Verantwortlich für das Lesen von Daten aus der Ansicht, das Steuern von Benutzereingaben und das Senden von Daten an das Modell.

2. Funktionsprinzip:
Der Benutzer sendet eine Anfrage von der Ansichtsschicht, die der Controller an das entsprechende Modell weiterleitet Verarbeitung und kehrt zurück, nachdem die Modellverarbeitung abgeschlossen ist. Das Ergebnis wird an den Controller übergeben und auf der Ansichtsebene an den Benutzer zurückgegeben. 3. Erstellen Sie ein Angular-Modul Der von ng-app gebundene Teil muss übergeben werden:

①Modulname: Der Name, an den ng-app gebunden werden muss, ng-app="myApp"
②Array: Der Name des Moduls, das eingefügt werden muss, muss nicht null sein.
eg:var app= angle.module("myApp",[]);
Erstellen Sie im Angular-Modul einen Controller-Controller, erforderlich Pass zwei Parameter.

①Controllername, das ist der Name, an den ng-controller gebunden werden muss. ng-controller="myCtrl"
②Controllerds Konstruktor: Der Konstruktor kann mehrere Parameter übergeben, einschließlich $scope/$rootScope und verschiedene im System integrierte Objekte
[Bereich in AngularJS]

①$scope: Lokaler Bereich, Eigenschaften und Methoden, die auf $scope deklariert werden, können nur im aktuellen Controller verwendet werden
②$ rootScope: Root-Bereich, Eigenschaften und Methoden, die auf $rootScope deklariert sind,
können in jedem in ng-app enthaltenen Bereich verwendet werden (ob mit Controller oder nicht, oder ob er im Bereich des Controllers liegt). )
>>> Wenn $scope nicht zum Deklarieren von Variablen verwendet wird und der mit ng-model direkt in HTML gebundene Variablenbereich lautet:

1. Wenn sich ng-model in einem ng-Controller befindet, wird diese Variable standardmäßig an den $scope des aktuellen Controllers gebunden.
2 Wenn sich ng-model in keinem befindet ng-controller, diese Variable wird an $rootScope gebunden.

In AngularJS können Filter mithilfe eines Pipe-Zeichens (|) zu Ausdrücken und Anweisungen hinzugefügt werden.

>>> Integrierter Systemfilter:
Währung: Zahlen in Währungsformat formatieren.
Filter: Wählen Sie eine Teilmenge aus Array-Elementen aus.
Kleinbuchstaben: Formatieren Sie die Zeichenfolge in Kleinbuchstaben.
orderBy: Ordnen Sie das Array gemäß einem Ausdruck an.
Großbuchstaben: Formatieren Sie die Zeichenfolge in Großbuchstaben.

z. B.:

{{"aBcDeF"|uppercase}}

【Benutzerdefinierter Filter】

1 .filter('reverse',function(){ //可以注入依赖2 return function(text){3 if(!angular.isString(text)){4 return "您输入的不是字符串！"5 }else{6 return text.split("").reverse().join("");7 }8 }9 })

1. http in AngularJS
$http ist ein Kerndienst in AngularJS, der zum Lesen von Daten von Remote-Servern verwendet wird.

2. Select
① in AngularJS verwendet ein Array als Datenquelle, wobei x jedes Element des Arrays darstellt.
Standardmäßig ist x direkt an den Wert von Option gebunden, und der von Option angezeigte Inhalt wird durch das vorherige x für ... bestimmt.
z. B.:

② Verwenden Sie Objekte als Datenquellen, wobei (x, y) Schlüssel-Wert-Paare darstellt, x der Schlüssel und y der Wert ist.
Standardmäßig ist der Wert y an den Wert der Option gebunden, und der von der Option angezeigte Inhalt wird durch das vorherige x für ... bestimmt.
z. B.:

<script src="libs/angular.js?1.1.11"></script>

1 angular.module("app",[])2 .controller("ctrl",function($scope,$rootScope){3 $scope.count = 10;4 $scope.func = function(){5 alert("小希真萌！");6 }7 })