Instructions AngularJS

AngularJS vous permet d'utiliser ce qui est appelé "Instructionsnouvelles propriétés pour étendre HTML.

AngularJS dispose d'un ensemble d'instructions intégrées, qui peuvent fournir des fonctionnalités à votre application.

AngularJS also allows you to define your own instructions.

Instructions AngularJS

AngularJS instructions are extended HTML attributes with the prefix ng-.

lors du chargement de la page web, The instruction initializes the AngularJS application.

Instruction ng-init The instruction initializes application data.

ng-model Les instructions lient la valeur des contrôles HTML (input, select, textarea) aux données de l'application.

Please read about all AngularJS instructions in our AngularJS directive reference.

instance

<div ng-app="" ng-init="firstName='Bill'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</ul>

Essaye-le personnellement

lors du chargement de la page web, the instruction also tells AngularJS that the <div> element is the 'owner' of the AngularJS application.

data binding

in the previous example {{ firstName }} An expression is an AngularJS data binding expression.

Data binding in AngularJS binds AngularJS expressions with AngularJS data.

{{ firstName }} with ng-model="firstName" bound together.

In the next example, two text fields are bound together by two ng-model instructions :

instance

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

Essaye-le personnellement

using Instruction ng-init is not common. You will learn how to initialize data in the chapter about controllers.

repeating HTML elements

ng-repeat Instruction to repeat HTML elements :

instance

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  {name:'Kai',country:'Denmark'}]
    <ul>
      {{ x }}
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

Essaye-le personnellement

ng-repeat the instruction actually clones each item in the collectionclone HTML elements once.

used for object arrays ng-repeat Instruction :

instance

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
{name:'Kai',country:'Denmark'}]
  <ul>
    <li ng-repeat="x in names">
  {{ x.name + ', ' + x.country }}
</li>
</ul>

Essaye-le personnellement

</div>

AngularJS est très approprié pour les applications CRUD (création, lecture, mise à jour, suppression) de base de données.

Imaginez si ces objets sont des enregistrements provenant d'une base de données.

lors du chargement de la page web, L'instruction ng-init définitInstruction ng-app.

Élément racinelors du chargement de la page web, ng-appL'instructionAuto-démarre

Application (initialisation automatique).

Instruction ng-init L'instruction ng-init définitValeur initiale.

Généralement, vous ne utiliserez pas ng-init. Vous utiliserez plutôt le contrôleur ou le module.

Vous découvrirez plus tard des informations sur les contrôleurs et les modules.

Instruction ng-model

ng-model Les instructions lient la valeur des contrôles HTML (input, select, textarea) aux données de l'application.

ng-model Les instructions peuvent également :

  • Fournir une validation de type aux données de l'application (numérique, e-mail, obligatoire)
  • Fournir un état aux données de l'application (non valide, sale, touché, erreur)
  • Fournir une classe CSS à un élément HTML
  • Lier un élément HTML au formulaire HTML

En savoir plus sur ng-model Informations sur l'instruction.

Créer une nouvelle instruction

En plus de toutes les instructions intégrées d'AngularJS, vous pouvez créer vos propres instructions.

Les nouvelles instructions sont créées en utilisant .directive créé par la fonction.

Pour appeler une nouvelle instruction, créez un élément HTML portant le même nom que l'instruction.

Lors de la nomination des instructions, vous devez utiliser le nom en camelCase,w3TestDirectiveMais pour l'appeler, vous devez utiliser un nom séparé par des tirets,w3-test-directive:

instance

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>Fait par une instruction!</h1>"
  });
});
</script>
</body>

Essaye-le personnellement

Vous pouvez appeler l'instruction de la manière suivante :

  • Nom de l'élément
  • Attribut
  • Classe
  • Commentaire

Les exemples suivants produiront le même résultat :

Nom de l'élément

<w3-test-directive></w3-test-directive>

Essaye-le personnellement

Attribut

<div w3-test-directive></div>

Essaye-le personnellement

Classe

<div class="w3-test-directive"></div>

Essaye-le personnellement

Commentaire

<!-- directive: w3-test-directive -->

Essaye-le personnellement

Limitation

Vous pouvez limiter votre instruction afin qu'elle ne puisse être appelée que par certaines méthodes.

instance

en ajoutant une valeur de "A" de restrict attribut, cette instruction ne peut être appelée que par l'intermédiaire d'attributs :

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Fait par une instruction!</h1>"
  });
});

Essaye-le personnellement

Les valeurs légitimes de restrict sont :

  • E représente le nom de l'élément
  • A représente les attributs
  • C représente les classes
  • M représente les commentaires

Par défaut, cette valeur est EACela signifie que les noms d'éléments et les noms d'attributs peuvent tous appeler des instructions.