Zusammenfassung der am häufigsten verwendeten Funktionen von AngularJS_AngularJS

AngularJS vereinfacht die Anwendungsentwicklung, indem es Entwicklern eine höhere Abstraktionsebene bietet. Wie bei anderen Abstraktionstechniken geht auch hier etwas Flexibilität verloren. Mit anderen Worten: Nicht alle Anwendungen sind für AngularJS geeignet. AngularJS befasst sich hauptsächlich mit der Erstellung von CRUD-Anwendungen. Glücklicherweise sind mindestens 90 % der WEB-Anwendungen CRUD-Anwendungen. Um jedoch zu verstehen, was für die Erstellung mit AngularJS geeignet ist, müssen Sie verstehen, was für die Erstellung mit AngularJS nicht geeignet ist.

Zum Beispiel unterscheiden sich Spiele, grafische Schnittstelleneditoren und Anwendungen mit häufigen und komplexen DOM-Operationen stark von CRUD-Anwendungen und sind nicht für die Erstellung mit AngularJS geeignet. In solchen Situationen ist es möglicherweise besser, eine leichtere, einfachere Technologie wie jQuery zu verwenden.

Erstes iteratives Ausgabe-NG-Repeat-Tag

ng-repeat kombiniert perfekt table ul ol und andere Tags mit Arrays in js

<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>

Sie können sogar die Reihenfolge der Ausgabe festlegen:

<li ng-repeat="person in persons | orderBy:'name'">

Zweite dynamische Bindung des ng-model-Tags

Jedes HTML-Tag mit Benutzereingaben und einem Wert kann dynamisch an Variablen in js gebunden werden, und es handelt sich um eine dynamische Bindung.

<input type="text" ng-model='password'>

Für gebundene Variablen können Sie {{}} verwenden, um direkt auf

zu verweisen

<span>you input password is {{password}}</span>

Wenn Sie mit fiter vertraut sind, können Sie problemlos in dem von Ihnen benötigten Format ausgeben

<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

Drittes verbindliches Klickereignis ng-click Ereignis

Mit ng-click können Sie Klickereignisse ganz einfach an ein Label binden.

<button ng-click="pressMe()"/>

Die Voraussetzung ist natürlich, dass Sie Ihre eigene pressMe-Methode in der $scope-Domäne definieren müssen.

Im Gegensatz zur herkömmlichen Onclick-Methode können Sie sogar ein Objekt an die ng-Click-Methode übergeben, wie folgt:

<ul>
<li ng-repeat="person in persons">
<button ng-click="printf(person)"/>
</li>
</ul>

Und natürlich das ng-dblclick-Tag

Die vierte Zweiganweisung: ng-switch on, ng-if/ng-show/ng-hide/ng-disabled Tags

Zweiganweisungen ermöglichen es Ihnen, logische Urteile über die Schnittstelle zu schreiben.

<ul>
<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>

Fünfte Verifizierungsgrammatik: ng-trim ng-minlength ng-maxlength erforderlich ng-pattern und andere Tags

Für das Eingabefeld im Formular können Sie den Tag oben verwenden, um die Benutzereingabe zu überprüfen.
Sie wissen bereits, was sie wörtlich bedeuten.

<form name="yourForm">
<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>
</form>

Sie können $scope.yourForm.inputText.$error.required verwenden, um festzustellen, ob das Eingabefeld leer ist

Sie können $scope.yourForm.inputText.$invalid verwenden, um zu bestimmen, ob der Eingabeinhalt ng-pattern, ng-maxlength, maxlength erfüllt

Bei dem Eingabeinhalt, den Sie über $scope.userNum erhalten, wurden die führenden und nachgestellten Leerzeichen aufgrund der Existenz von ng-trim entfernt.

Das sechste Dropdown-Feld ng-options tag

ng-options ist ein Tag, der speziell für Dropdown-Boxen erstellt wurde.

<select ng-model="yourSelected" ng-options="person.id as person.name in persons"></select>

Das Dropdown-Feld zeigt person.name an. Wenn Sie einen von ihnen auswählen, können Sie die person.id abrufen, die Sie über yourSelected ausgewählt haben.

Siebtens: Kontrollieren Sie das NG-Style-Tag von CSS

ng-style hilft Ihnen, Ihre CSS-Attribute einfach zu steuern

<span ng-style="myColor">your color</span>

Sie können den gewünschten Effekt ändern, indem Sie myColor einen Wert zuweisen, etwa so:

$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};

Das achte $http-Objekt für asynchrone Anfragen.

AngularJS stellt für asynchrone Anforderungen ein Objekt bereit, das dem $.ajax von jquery ähnelt.
Asynchrone Vorgänge werden in AngularJS hoch geschätzt, daher sind $http-Vorgänge alle asynchron, im Gegensatz zu jquery.ajax, das auch asynchrone Parameter bereitstellt.

$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do anything what you want;
});

Wenn Sie eine POST-Anfrage stellen, werden die Daten in „params“ für Sie an das Ende der URL gestellt und die Daten in „data“ werden in den Anfragetext eingefügt.

Das Obige hat Ihnen die acht am häufigsten verwendeten Funktionen von AngularJS vorgestellt. Ich hoffe, es wird Ihnen hilfreich sein!