Directives AngularJS : ng-init, ng-app, ng-model et ng-repeat

Qu’est-ce qu’une directive dans AngularJS ?

A La directive Dans AngularJS, une directive `ng-model` est une commande qui ajoute de nouvelles fonctionnalités au code HTML. Lorsqu'AngularJS analyse le code HTML, il recherche d'abord les directives présentes dans la page, puis interprète le code en conséquence. Un exemple simple de directive AngularJS, que nous avons vu dans les chapitres précédents, est la directive `ng-model`. Cette directive permet de lier notre modèle de données à notre vue.

À noter: Vous pouvez intégrer du code AngularJS basique dans une page HTML grâce aux directives ng-init, ng-repeat et ng-model, sans avoir besoin de contrôleurs. La logique de ces directives se trouve dans le fichier AngularJS fourni par… GoogleLes contrôleurs sont des constructions de programmation AngularJS de niveau supérieur qui permettent d'implémenter la logique métier, mais comme mentionné précédemment, la présence d'un contrôleur n'est pas obligatoire pour qu'une application soit considérée comme une application AngularJS.

Mais comment un navigateur peut-il finir par en exécuter un ?

Fonctionnement des directives AngularJS en HTML

Comme nous l'avons défini dans l'introduction, une directive AngularJS est un moyen d'étendre les fonctionnalités de HTMLLorsque la page se charge, le compilateur AngularJS parcourt le DOM, compare chaque élément aux directives enregistrées et associe le comportement qu'il trouve.

AngularJS Le système intègre des dizaines de directives, auxquelles s'ajoutent celles que vous pouvez enregistrer vous-même. Les quatre directives expliquées ci-dessous avec des exemples concrets – ng-app, ng-init, ng-model et ng-repeat – sont celles que les débutants rencontrent en premier. Avant ces exemples, notez les quatre manières d'écrire une directive.

Quels sont les quatre types de directives AngularJS ?

Une directive n'est pas toujours un attribut. Le compilateur AngularJS peut en identifier une par nom d'élément, d'attribut, de classe ou par commentaire, et chaque directive déclare les formats qu'elle accepte via son restrict propriété. La valeur par défaut est EAAinsi, la syntaxe des éléments et des attributs fonctionne, sauf indication contraire. La valeur est primordiale lors de la création d'une directive personnalisée, car le compilateur ignore toute forme exclue par la valeur de restriction.

💡 Astuce: Privilégiez la syntaxe des éléments et des attributs. Référence officielle des directives AngularJS Les formulaires de classe et de commentaire sont considérés comme des options héritées. Les exemples ci-dessous utilisent tous la syntaxe des attributs.

ng-app dans AngularJS

Cette directive sert à initialiser une application AngularJS. Lorsqu'elle est présente dans une page HTML, elle indique à AngularJS que cette page est une application AngularJS.

Exemple d'application ng

L'exemple ci-dessous montre comment transformer une application HTML classique en une application AngularJS.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="">

    Tutorial Name : {{ "Angular" + "JS"}}

</div>

</body>
</html>

⚠️ Mise en garde: L'annonce conserve l'original chrset="UTF 8", exactement comme publié. L'attribut correct est charset="UTF-8".

Code Explication:

1. La directive « ng-app » est ajoutée à notre balise div pour indiquer que cette application est une application AngularJS. Notez que la directive « ng-app » peut être appliquée à n'importe quelle balise, y compris la balise body.
2. Puisque nous avons défini cette application comme une application AngularJS, nous pouvons désormais utiliser les fonctionnalités d'AngularJS. Dans notre cas, nous utilisons des expressions pour simplement concaténer deux chaînes de caractères.

Si le code s'exécute correctement, le résultat ci-dessous s'affiche.

Sortie :

Le résultat affiché correspond clairement à l'expression, rendue possible par la définition de l'application comme une application AngularJS. La directive suivante fournit ses données.

ng-init dans AngularJS

Ceci sert à initialiser les données de l'application. Il peut arriver que votre application ait besoin de données locales ; la directive ng-init permet de le faire.

Exemple de ng-init

Dans cet exemple, nous allons créer une variable appelée « TutorialName » à l'aide de la directive ng-init et afficher la valeur de cette variable sur la page.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

Code Explication:

1. La directive ng-init est ajoutée à notre balise div pour définir une variable locale appelée « TutorialName » et la valeur qui lui est donnée est « AngularJS ».
2. Nous utilisons des expressions dans AngularJS pour afficher le résultat de la variable nommée « TutorialName » qui a été définie dans notre directive ng-init.

Si le code s'exécute correctement, le résultat ci-dessous s'affiche.

Sortie :

Dans la sortie,

• Le résultat montre clairement la sortie de l'expression qui contient la chaîne « AngularJS ». Cela est dû à l'attribution de la chaîne « AngularJS » à la variable « TutorialName » dans la section ng-init.

La directive suivante renvoie les données de l'écran vers le modèle.

ng-modèle dans AngularJS

Enfin, nous avons la directive ng-model, qui est utilisée pour lier la valeur d'un contrôle HTML aux données de l'application.

Exemple de modèle ng

Dans cet exemple,

• Nous allons créer 2 variables appelées « quantité » et « prix ». Ces variables vont être liées à 2 contrôles de saisie de texte.
• Nous allons ensuite afficher le montant total basé sur la multiplication des valeurs de prix et de quantité.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

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

    People : <input type="number" ng-model="quantity">

    Registration Price : <input type="number" ng-model="price">

    Total : {{quantity * price}}

</div>

</body>
</html>

Code Explication:

1. La directive ng-init est ajoutée à notre balise div pour définir 2 variables locales ; l’un est appelé « quantité » et l’autre « prix ».
2. Nous utilisons maintenant la directive ng-model pour lier les zones de texte « Personnes » et « Prix d'enregistrement » à nos variables locales « quantité » et « prix » respectivement.
3. Enfin, nous montrons le Total via une expression, qui est la multiplication des variables de quantité et de prix.

Si le code s'exécute correctement, le résultat ci-dessous s'affiche.

Sortie :

• Le résultat montre clairement la multiplication des valeurs pour les personnes et le prix d'inscription.

Désormais, si vous modifiez les valeurs de « Personnes » et de « Prix d’inscription » dans les champs de texte, le total se modifie automatiquement.

• Le résultat ci-dessus illustre la puissance de la liaison de données dans AngularJS, obtenue grâce à l'utilisation de directive du modèle ng.

Le dernier des quatre gère plusieurs valeurs simultanément.

ng-répétition dans AngularJS

Ceci est utilisé pour répéter un élément HTML. L'exemple ci-dessous montre comment utiliser le directive ng-répétition.

Exemple de ng-répétition

Dans cet exemple,

• Nous allons avoir un tableau de noms de chapitres dans une variable tableau et
• puis utilisez la directive ng-repeat pour afficher chaque élément du tableau en tant qu'élément de liste

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

Code Explication:

1. La directive ng-init est ajoutée à notre balise div pour définir une variable appelée « chapitres » qui est une variable tableau contenant 3 chaînes.
2. L'élément ng-repeat est utilisé en déclarant une variable en ligne appelée « noms » et en parcourant chaque élément du tableau des chapitres.
3. Enfin, nous montrons la valeur de la variable locale en ligne « noms ».

Si le code s'exécute correctement, le résultat ci-dessous s'affiche.

Sortie :

• La sortie ci-dessus montre simplement que la directive ng-repeat a pris chaque valeur du tableau appelé « chapitres » et a créé des éléments de liste HTML pour chaque élément du tableau.

Ces quatre éléments couvrent le démarrage, les données, la liaison et la répétition. La liste ci-dessous indique la suite.

Autres directives AngularJS intégrées couramment utilisées

Les quatre directives ci-dessus constituent l'ensemble de départ, et non la bibliothèque complète. Chaque entrée ci-dessous est un attribut que vous appliquez directement à l'élément qu'il contrôle.

• ng-bind : Insère une valeur de portée dans le texte d'un élément sans afficher brièvement les accolades brutes au chargement.
• ng-if : Supprime l'élément du DOM lorsque son expression est fausse, et le recrée lorsqu'elle est vraie.
• ng-show et ng-hide : TogglLa visibilité est gérée avec CSS. L'élément reste dans le DOM, ce qui réduit le coût des basculements répétés.
• ng-class : Ajoute ou supprime des classes CSS d'une expression, permettant ainsi au style de suivre le modèle.
• ng-click : Exécute une expression ou une fonction de portée lorsque l'utilisateur clique sur l'élément.
• ng-controller : Ajoute un contrôleur à un bloc de balisage une fois que la page dépasse la taille de ng-init.
• ng-disabled et ng-readonly : Définissez l'attribut de formulaire correspondant chaque fois que leur expression est vraie.

La FAQ ci-dessous répond aux questions qui suivent le plus souvent cette liste.

FAQ