Instructions pour les notes d'apprentissage de base d'AngularJS_AngularJS

AngularJS étend les attributs HTML via des directives.

Directives AngularJS
Les directives AngularJS sont des attributs HTML étendus avec le préfixe ng-.

La directive ng-app est utilisée pour initialiser l'application AngularJS.

La directive ng-init est utilisée pour initialiser les données de l'application.

La directive ng-model est utilisée pour lier les valeurs des contrôles HTML (tels que input, select, textarea, etc.) aux données de l'application.

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

La directive ng-app indique également à AngularJS que l'élément dc6dce4a544fdca2df29d5ac0ea9906b dans lequel elle se trouve est l'élément racine de l'application AngularJS, c'est-à-dire la portée.

Liaison de données

Dans l'exemple ci-dessus, {{ firstName }} est une expression de liaison de données AngularJS.

Dans la liaison de données AngularJS, les expressions AngularJS utilisent les données AngularJS pour se mettre à jour de manière synchrone.

　{{ firstName }} met à jour les données de manière synchrone via ng-model="firstName".

<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number"  ng-model="quantity">
Costs:  <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>

Remarque L'utilisation de la directive ng-init est très courante dans le développement AngularJS. Dans la section Contrôleurs, vous découvrirez de meilleures façons d'initialiser les données.
Répéter l'élément HTML
La directive ng-repeat est utilisée pour créer de manière répétée un élément HTML :

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
 <ul>
  <li ng-repeat="x in names">
   {{ x }}
  </li>
 </ul>
</div>

Utilisez la directive ng-repeat sur un tableau d'objets :

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
 <li ng-repeat="x  in names">
  {{ x.name + ', ' + x.country }}
 </li>
</ul>

</div>

Remarque AngularJS est très adapté aux opérations CRUD de base de données (c'est-à-dire créer, lire, mettre à jour et supprimer). Imaginez si ces objets provenaient d'une base de données ?

directive ng-app

La directive ng-app définit l'élément racine de l'application AngularJS.

Lorsque la page Web est chargée, l'instruction ng-app démarrera automatiquement (initialisera automatiquement) l'application. Autrement dit, initialisez et guidez automatiquement l'exécution de l'application AngularJS.

Dans les chapitres suivants, vous apprendrez comment attribuer une valeur à la directive ng-app (par exemple, ng-app="myModule") pour l'associer au module.

directive ng-init
　La directive ng-init est utilisée pour initialiser les valeurs de l'application AngularJS.

Généralement, il n'est pas nécessaire d'utiliser l'instruction ng-init, utilisez plutôt un contrôleur ou un module pour effectuer le travail d'initialisation.

Vous découvrirez les contrôleurs et les modules dans les chapitres suivants.

directive ng-model
La directive ng-model est utilisée pour lier les valeurs des contrôles HTML (tels que input, select, textarea, etc.) aux données de l'application.

La directive ng-model peut également être utilisée :

Fournissez la vérification des données (telles que le numéro de vérification, l'adresse e-mail, les champs obligatoires).
Fournissez l'état des données (telles que invalides, sales, touchées, erreur).
Fournit des classes de style CSS pour les éléments HTML.
Liez les éléments HTML aux formulaires HTML.

directive ng-repeat

La directive ng-repeat est utilisée pour générer un élément HTML correspondant pour chaque élément de la collection de données (ou tableau).

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.