Aller au contenu

Comment utiliser les directives les expressions les opérateurs arithmétiques AngularJS

Découvrez comment avec AngularJS vous pouvez faire interpréter des expressions directement dans le code HTML de votre page.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment utiliser les directives les expressions les opérateurs arithmétiques AngularJS

Bonjour et bienvenu sur Développement Facile.

 

AngularJS – Les directives et les expressions

Encore un nouveau cours sur AngularJS, c’est pour que vous puissiez utiliser vraiment tout le potentiel toute la puissance de ce framework dans votre développement, dans un précédent cours vous avez appris à utiliser des conditions, directement dans un attribut sur une valeur pour faire afficher, là c’était dans le cas pour afficher une zone directement HTML, une zone div avec les expressions.

Dans ce cours vous allez aller beaucoup plus loin, en découvrant toutes les expressions arithmétiques, les if, les conditions que vous pouvez utiliser directement dans un attribut, et vous allez découvrir l’utilisation des directives avec AngularJS.

C’est vraiment très pratique pour pousser votre développement un cran au-dessus et donc faire beaucoup plus de choses avec vos applications HTML 5 JavaScript.

 

Les directives avec AngularJS

Une directive c’est un fonctionnement défini, par exemple l’attribut ng-click c’est une directive donc sur un clic, il fait quelque chose, donc on attache la directive correspondante.

Par exemple dans l’exemple de code source que vous avez là, vous avez votre attribut ng-click égal à count égal à plus 1, à chaque fois que l’utilisateur clique sur le bouton la variable count est incrémentée de 1, elle s’incrémente, donc là vous avez mis en place une directive, à chaque clic, AngularJS associe l’incrémentation de count, par exemple.

 

Les expressions avec AngularJS

Vous avez les expressions également avec AngularJS. Comme vous avez vu rapidement dans un précédent cours, ça permet d’utiliser une syntaxe, simple et évoluée AngularJS pour faire des traitements directement dans votre fichier HTML d’une façon très simple.

Vous avez tous vos opérateurs arithmétiques que vous venez de voir à l’instant avec l’incrémentation de count, plus, moins, modulo, multiplié, divisé, et surtout vous avez les opérateurs de comparaison, égale égale, différent, supérieur, supérieur égal, inférieur, inférieur égal. Et vous avez les opérateurs booléens donc les conditions, et, ou, ou exclusif, l’appel à des fonctions du modèle et l’utilisation des tableaux est également possible.

Par exemple vous pouvez faire directement des additions dans votre code HTML entre double cote, comme vous voyez, vous faites 13+13, automatiquement AngularJS va associer, effectuer l’addition et va afficher directement 26, ça peut être vraiment très utile, très pratique pour effectuer des mini traitements directement dans votre code HTML d’une façon très rapide.

 

Exemple pratique AngularJS

Je vous montre rapidement un exemple de code source vous allez voir un peu le principe de fonctionnement en direct c’est parti.

Alors voici plusieurs exemples donc déjà je vais vous montrer un exemple très simple de directive et après un exemple d’une expression aussi très simple, je rajoute le commentaire, les expressions, donc vraiment les directives vous pouvez faire énormément de choses, dans les précédents cours, je vous ai montré des directives si totales>1, alors on affiche le contenu de la div.

Et bien là, la directive c’est, sur un bouton ng-click, à chaque clic sur le bouton, on récupère Count égal count plus 1 est initialisé valeurs 13 et à chaque fois on ajoute +1 et juste en dessous vous affichez la variable Count.

Donc ça c’est des directives très simples, mais après vous pouvez faire des directives beaucoup plus évoluées donc votre variable toujours ici, et sur un clic vous l’incrémentez, ce que ça donne elle est initialisée à 13 votre variable plus 1, plus 1, plus 1, si je recharge la page elle est initialisée à 13 et à chaque fois que j’appuie sur +1 ça incrémente tout simplement cette variable.

Donc ça c’est une première directive après vous avez des expressions 13 plus 13, bien ça va directement afficher 26 comme addition, si vous mettez 13 x 2, plus on va mettre on va rajouter plus 4, ça va directement effectuer le calcul et ça va mettre, afficher 30.

Donc les expressions, vous pouvez faire également énormément de choses, c’est vraiment à vous d’en profiter avec les directives, les expressions vous pouvez utiliser ou, et, not, ou exclusif, les soustractions, multiplications, division par exemple on peut diviser tout cela par deux, et ça fera tout simplement 15, donc là vous avez 30 d’affiché, le calcul va être effectué, et ça affiche 15, donc c’est une addition et résultats de l’opération.

Très simple à utiliser les expressions et les directives avec AngularJS, vraiment profitez-en.

 

Votre plan d’actions !

Maintenant comme d’habitude vous avez votre plan d’action, donc c’est à vous de jouer commencez déjà par télécharger le code source disponible sous ce cours vidéo, il est commenté, vous pouvez, comme ça réutiliser les directives, les expressions faire des essais dans vos projets directement.

Si vous avez des questions posez-les simplement sous cette vidéo l’équipe développement facile vous répondra avec beaucoup de précision pour que vous puissiez comprendre tous les concepts de cette vidéo et maintenant si vous voulez aller beaucoup plus loin c’est-à-dire recevoir les derniers cours sur AngularJS, sur le framework Phaser, renseignez en dessous de cette vidéo simplement votre prénom, votre adresse mail, et vous recevrez directement les prochains cours sur votre adresse mail.

Et maintenant vous êtes peut être professionnel, vous voulez le devenir, devenir un expert en développement Web, allez beaucoup plus loin dans le développement Web, cliquez sur le lien, sur l’image au-dessus de moi, vous allez être redirigé vers une deuxième vidéo ou vous allez apprendre déjà toute la méthode développement facile, les modèles de conceptions, comment développer deux à trois fois plus rapidement vos applications.

Donc avec tous les outils nécessaires donc je vous explique tout pas à pas, quels outils utiliser, comment les utiliser, comment travailler en équipe sur vos applications donc sans gêner, à plusieurs développeurs sur par exemple, le contrôleur, les vues, le modèle, sans vous gêner et qu’au final ça fasse une application performante donc stable surtout très stable, très robuste, très évolutive et maintenable dans le temps.

Donc tout ça c’est dans la deuxième vidéo, vous allez également découvrir comment créer des WebApp HTML JavaScript CSS pour les déployer automatiquement sur tous les Smartphones, tablettes, qui soit sur Android, sur Apple, Windows phone, cliquez simplement sur l’image au-dessus de moi, vous serez redirigé dans la deuxième vidéo ou vous allez découvrir toute la méthode développement facile, donc je vous dis à tout de suite dans la deuxième vidéo.

[/ppmtoggle][/ppmaccordion]

Télécharger l’exemple de code vu dans la vidéo

Retrouvez le code source commenté de l’utilisation des directives, des expressions et des opérateurs arithmétiques avec AngularJS

Téléchargement du code source directives expressions angularjs

Cliquez ici pour télécharger le code source directives expressions angularjs

Posez vos questions sur les directives et les expressions de AngularJS

Utilisez la zone commentaire pour poser vos questions sur ce cours dédié à AngularJS

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>