Résumé des fonctions les plus couramment utilisées d'AngularJS_AngularJS

AngularJS simplifie le développement d'applications en présentant aux développeurs un niveau d'abstraction plus élevé. Comme pour d’autres techniques d’abstraction, une certaine flexibilité est perdue. En d’autres termes, toutes les applications ne sont pas adaptées à AngularJS. AngularJS se préoccupe principalement de la création d'applications CRUD. Heureusement, au moins 90 % des applications WEB sont des applications CRUD. Mais pour comprendre ce qui convient à la construction avec AngularJS, vous devez comprendre ce qui ne convient pas à la construction avec AngularJS.

Par exemple, les jeux, les éditeurs d'interface graphique, les applications avec des opérations DOM fréquentes et complexes sont très différents des applications CRUD, et ils ne conviennent pas pour être construits avec AngularJS. Dans des situations comme celle-ci, il serait peut-être préférable d'utiliser une technologie plus légère et plus simple comme jQuery.

Tag ng-repeat de sortie de la première itération

ng-repeat combine parfaitement la table ul ol et d'autres balises avec des tableaux en js

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

Vous pouvez même préciser l'ordre de sortie :

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

Deuxième liaison dynamique de la balise ng-model

Toute balise HTML avec une entrée utilisateur et une valeur peut être liée dynamiquement à des variables dans js, et il s'agit d'une liaison dynamique.

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

Pour les variables liées, vous pouvez utiliser {{}} pour référencer directement

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

Si vous êtes familier avec fiter, vous pouvez facilement sortir dans le format dont vous avez besoin

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

Troisième événement de clic de liaison Événement ng-click

En utilisant ng-click, vous pouvez facilement lier des événements de clic à une étiquette.

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

Bien sûr, le principe est que vous devez définir votre propre méthode pressMe dans le domaine $scope.

Contrairement à la méthode onclick traditionnelle, vous pouvez même passer un objet à la méthode ng-click, comme ceci :

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

Et bien sûr la balise ng-dblclick

La quatrième instruction de branche : ng-switch on, ng-if/ng-show/ng-hide/ng-disabled tags

Les instructions de branche vous permettent d'écrire des jugements logiques sur l'interface.

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

Cinquième grammaire de vérification : ng-trim ng-minlength ng-maxlength requis ng-pattern et autres balises

Pour la zone de saisie du formulaire, vous pouvez utiliser la balise ci-dessus pour vérifier la saisie de l'utilisateur.
Vous savez déjà ce qu’ils signifient littéralement.

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

Vous pouvez utiliser $scope.yourForm.inputText.$error.required pour déterminer si la zone de saisie est vide

Vous pouvez utiliser $scope.yourForm.inputText.$invalid pour déterminer si le contenu d'entrée satisfait à ng-pattern, ng-maxlength, maxlength

Le contenu d'entrée que vous obtenez via $scope.userNum a les espaces de début et de fin supprimés en raison de l'existence de ng-trim.

La sixième balise ng-options de la liste déroulante

ng-options est une balise spécialement créée pour les listes déroulantes.

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

La liste déroulante affiche person.name Lorsque vous en sélectionnez un, vous pouvez obtenir le person.id que vous avez sélectionné via votre Sélection.

Septième : Contrôlez la balise de style ng de CSS

ng-style vous aide à contrôler facilement vos attributs CSS

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

Vous pouvez modifier l'effet souhaité en attribuant une valeur à myColor, comme ceci :

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

Le huitième objet $http pour les requêtes asynchrones.

AngularJS fournit un objet similaire au $.ajax de jquery pour les requêtes asynchrones.
Les opérations asynchrones sont très respectées dans AngularJS, donc les opérations $http sont toutes asynchrones, contrairement à jquery.ajax qui fournit également des paramètres asynchrones.

$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;
});

Si vous faites une requête POST, les données dans params seront placées à la fin de l'URL pour vous, et les données dans data seront placées dans le corps de la requête.

Ce qui précède a partagé avec vous les huit fonctions les plus couramment utilisées d'AngularJS. J'espère que cela vous sera utile !