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.

1. AngularJS-Anweisungen und -Ausdrücke

一、AngularJS指令与表达式

[AngularJS-allgemeine Anweisungen]
1. ng-app: Deklariert den von Angular verwalteten Bereich, normalerweise im Textkörper oder HTML geschrieben, gibt es im Prinzip nur einen pro Seite.
2. ng-model: Binden Sie den Elementwert (z. B. den Wert des Eingabefelds) an die Anwendungsvariable.
zB:
3. Fügen Sie die Anwendungsvariablen in Daten ein ist an die HTML-Ansicht gebunden und kann durch Ausdrücke ersetzt werden.
zB:

Entspricht

{{name}}

4. ng-init: AngularJS-Anwendungsvariablen initialisieren.
zB:
5. Bind-Ausdruck, der Literale, Operatoren und Variablen enthalten kann.
Aber der Ausdruck sieht {{}}, wenn die Webseite geladen wird, sodass Sie stattdessen ng-bind="" verwenden können.
zB:{{ 5 + "" + 5 + ',Angular' }}

[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.

二、AngularJS中的MVC中的作用域

2. Geltungsbereich in MVC in AngularJS

[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.

3. AngularJS-Filter

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}}

{{"aBcDeF"|lowercase}}

{{123456|currency}}

【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 })

4. http && select && DOM-Operationen in AngularJS

四、AngularJS中的 http && select && DOM操作

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.:

3. DOM-Operationen in AngularJS
①ng-disabled="true/false"
Beim Übergeben von When true, das Steuerelement ist deaktiviert. Wenn „false“ übergeben wird, wird es aktiviert.

Stimmen Sie zu
Xiaoxi ist so süß!

Klick mich!

②ng-show
Wird standardmäßig angezeigt, wenn true in

übergeben wird >
Anzeigen?

Klicken Sie auf mich!

③ng-hide
Standard Zeigen Sie, dass das eingehende True versteckt ist

Ist es versteckt?

Klicken Sie auf mich!

④ng-click
definiert das Klickereignis in AngularJS.
kann nur Eigenschaften und Methoden auslösen, die im Angular-Bereich gebunden sind.

Klick mich!

{{ count }}

 

DOM操作附录：
eg:
先导入JS文件angular.js！！！

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

JS代码：

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

 

五、AngularJS中的表单验证

1、表单中常见的验证操作：
$dirty:表单有填写记录
$valid:字段内容合法的
$invalid:字段内容是非法的
$pristine:表单没有填写记录
$error:表单验证不通过的错误信息

2、验证时需给表单及需要验证的input，设置name属性；
给form及input设置name后，会将form表单信息，默认绑定到$scope作用域中，故可以使用formName.inputName.$验证操作 得到验证结果；
eg:
formName.inputName.$dirty="true" 表单被填写过
formName.inputName.$invalid="true" 表单输入不合法
formName.inputName.$error.required="true" 表单必填但未填
$error支持的验证有：required/minlength/maxlength/pattern/email/number/data
/url等……

3、为避免冲突，例如使用type="email"时，H5也会进行验证操作。
如果只想使用AngularJS验证，可以使用

属性，禁用H5自带验证功能。

 

六、AngularJS中的动画 

Animation in AngularJS verwenden:
bietet Animationseffekte und kann mit CSS verwendet werden.

1. Um Animationen in AngularJS zu verwenden, müssen Sie die Angular-animate.js-Bibliothek vorstellen!

2. Wenn auf der Seite kein benutzerdefiniertes Modul (ng-app) vorhanden ist, können Sie das Systemmodul ng-app="ngAnimate" direkt binden Wenn auf der Seite bereits ein benutzerdefiniertes Modul vorhanden ist, können Sie das „ngAnimate“-Modul nach dem benutzerdefinierten Modul einfügen.
eg:angular.module("app",["ngAnimate"])

3. Wenn die entsprechenden Anweisungen aufgerufen werden, um die Anzeige zu steuern und Beim Ausblenden von Elementen wird automatisch die entsprechende Klasse hinzugefügt.

ng-show/ng-hide wird ng-hide entfernen/hinzufügen
ng-if/ng- switch/ng- Für andere Anweisungen wie Wiederholung müssen Sie den Klassenstil nach dem Anzeigen bzw. Ausblenden festlegen:
Nach dem Anzeigen: .ng-enter-active,.ng-leave{}
Nach dem Ausblenden: .ng-enter,.ng-leave-active{}

7. Routing in AngularJS

1. Laden Sie die js-Datei, die das Routing implementiert: angle-route.js.

2. Enthält das ngRoute-Modul als abhängiges Modul des Hauptanwendungsmoduls.
eg:angular.module("app",["ngRoute"])

3. Ändern Sie den Hyperlink in das Straßenformat:
zB:page1

4. Fügen Sie in der Konfiguration $routeProvider für die Routing-Konfiguration ein:
$routeProvider
.when('/',{template:'This is the home page'})
when(' /page1',{template:'This is page1'})
.when('/page2',{template:'This is page2'})
.when('/page3',{template:'This is page3'})
.otherwise({redirectTo:'/'});
})
5. Fügen Sie ng-view an der entsprechenden Stelle auf der Seite hinzu, um die geöffnete Seite zu hosten

ng-view>

[Optionale Attribute im Routing-Parameterobjekt]
1. Vorlage: Benutzerdefinierte HTML-Vorlage, die in ng-view geladen werden
2.tempalteUrl: Externe HTML-Vorlage importieren Um Konflikte mit externem HTML zu vermeiden, müssen Sie den Code nur im Textkörper belassen 3.redirectTo: Weiterleitung zu einer bestimmten Seite, wird im Allgemeinen in .otherwise(); verwendet
4.controller: Controller-Funktion, die auf der aktuellen Vorlage ausgeführt wird, einen neuen Bereich generieren

Das heutige theoretische Wissen wird hier zuerst geteilt. Ich hoffe, es kann Ihnen helfen. ~~~ Ich bin ein Neuling, vielen Dank für Ihre Unterstützung!

Autor: Xizhao Hope

Quelle:

Das obige ist der detaillierte Inhalt vonZusammenfassung des allgemeinen Wissens für den Einstieg in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn