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

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

A La directive dans AngularJS est une commande qui donne de nouvelles fonctionnalités à HTML. Lorsque Angular parcourt le code HTML, il trouvera d'abord les directives dans la page, puis analysera la page HTML 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 est utilisée pour lier notre modèle de données à notre vue.

Remarque : Vous pouvez avoir du code angulaire de base dans une page HTML avec les directives ng-init, ng-repeat et ng-model sans avoir besoin de contrôleurs. La logique de ces directives se trouve dans le fichier Angular.js fourni par Google. Les contrôleurs sont les constructions de programmation angulaire de niveau supérieur qui permettent la logique métier, mais comme mentionné, pour qu'une application soit une application angulaire, il n'est pas obligatoire d'avoir un contrôleur.

Comment créer des directives dans AngularJS

Comme nous l'avons défini en introduction, les directives AngularJS sont un moyen d'étendre les fonctionnalités de HTML.

Il y a 4 directives définies dans AngularJS.

Vous trouverez ci-dessous la liste des directives AngularJS ainsi que des exemples fournis pour expliquer chacune d'entre elles.

ng-app dans AngularJS

Ceci est utilisé pour initialiser une application Angular.JS. Lorsque cette directive est en place dans une page HTML, elle indique essentiellement à Angular que cette page HTML est une application angulaire.js.

Exemple de np-app

L'exemple ci-dessous montre comment utiliser la directive ng-app. Dans cet exemple, nous allons simplement montrer comment faire d'une application HTML normale une application angulaireJS.

ng-app dans 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>

Explication du code :

  1. La directive « ng-app » est ajoutée à notre balise div pour indiquer que cette application est une application angulaire.js. Notez que la directive ng-app peut être appliquée à n'importe quelle balise, elle peut donc également être placée dans la balise body.
  2. Parce que nous avons défini cette application comme une application angulaire.js, nous pouvons désormais utiliser la fonctionnalité angulaire.js. Dans notre cas, nous utilisons des expressions pour simplement concaténer 2 chaînes.

Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

ng-app dans AngularJS

La sortie montre clairement la sortie de l'expression qui n'a été rendue possible que parce que nous avons défini l'application comme une application angulaire JS.

ng-init dans AngularJS

Ceci est utilisé pour initialiser les données de l'application. Parfois, vous pouvez avoir besoin de données locales pour votre application, cela peut être fait avec la directive ng-init.

Exemple de ng-init

L'exemple ci-dessous montre comment utiliser la directive 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.

ng-init dans 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="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

Explication du code :

  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 la sortie du nom de variable « TutorialName » qui a été défini dans notre directive ng-init.

Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

ng-init dans AngularJS

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.

ng-modèle dans AngularJS

Et 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. L'exemple ci-dessous montre comment utiliser la directive ng-model.

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

ng-modèle dans 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="" 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>

Explication du code :

  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 est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

ng-modèle dans AngularJS

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

Désormais, si vous accédez aux zones de texte et modifiez la valeur du prix Personnes et Inscription, le Total changera automatiquement.

ng-modèle dans AngularJS

  • La sortie ci-dessus montre simplement la puissance de la liaison de données dans angulaireJs, qui est obtenue grâce à l'utilisation du directive du modèle ng.

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

ng-répétition dans 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="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

Explication du code :

  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 est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

ng-répétition dans AngularJS

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

Résumé

  • Les directives sont utilisées pour étendre les fonctionnalités du HTML. Angular fournit des directives intégrées telles que
    • ng-app – Ceci est utilisé pour initialiser une application angulaire.
    • ng-init – Ceci est utilisé pour créer des variables d'application
    • ng-model – Ceci est utilisé pour lier les contrôles HTML aux données d'application
    • ng-repeat – Utilisé pour répéter des éléments en utilisant angulaire.