Dans ce nouveau cours sur AngularJS, vous allez apprendre à créer des liens et gérer les styles CSS à la volée.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment ajouter des liens dynamiques et modifier le style CSS avec AngularJS
Bonjour et bienvenu sur Développement Facile.
Voici un nouveau cours sur Angular JS pour que vous aussi, vous pouvez bénéficier de tout le potentiel dans d’Angular JS dans vos applications et d’utiliser sa puissance pour simplifier votre développement, créer des architectures d’applications solides. Aujourd’hui dans ce cours, vous allez découvrir les liens, comment créer des liens avec Angular JS et gérer les styles donc modifier les classes CSS à la volée sur certains éléments de votre vue.
Création des liens avec Angular JS
Déjà pour les liens vous avez l’attribut ng-href qui vous permet de générer une URL dynamique dans un lien HTML, que ce soit pour créer un lien HTML ou pour afficher une image vous pouvez utiliser cet attribut donc vous avez cette solution de code source pour utiliser l’attribut ng-src ou ng-href pour afficher, soit une image soit générer un lien HTML. Avec les attributs ng-href ou ng-src l’avantage c’est que l’image ou le lien ne sera rendu visible qu’une fois l’interprétation du lien effectuée, vous pouvez bien me dire oui on a besoin de cet attribut Matthieu, on peut très bien mettre la propriété directement dans SRC de l’image ou dans le href, on peut directement mettre le lien avec le double côte et la propriété du modèle et ce sera renseigné automatiquement, je vous dis, oui, ça fonctionne sauf que, comme je vous l’ai dit dans un précédent cours, d’abord la page HTML, votre page Web est affichée avec tous les doubles cotes, les propriétés du modèle Angular JS, donc ils ne sont pas interprétés c’est-à-dire que pendant 10 ms une demie seconde, je ne sais pas, bien vous aurez des liens qui ne fonctionneront pas si l’utilisateur clique dessus ça le renvoyer vers une erreur 404, ou des images qui ne seront pas affichées, d’où l’intérêt d’utiliser ces attributs ng-href et ng-src, votre image ou vos liens apparaîtront uniquement après l’interprétation faite par Angular JS ce qui évitera les erreurs 404 ou les erreurs d’affichages de vos images donc c’est vraiment très pratique ces attributs c’est ça leur principales utilités.
Le style des éléments avec Angular JS
Vous avez la possibilité de modifier des styles CSS en direct si je puis dire avec AngularJS donc dynamiquement, il suffit d’utiliser l’attribut ng-class en lui fournissant un objet JavaScript et cet objet JavaScript contiendra des propriétés CSS d’un côté avec les valeurs de l’autre, vous avez également l’attribut ng-style ce qui permet d’appliquer directement des styles CSS sur un élément en fournissant un objet JavaScript, c’est vraiment très pratique.
Voilà un exemple sur une div vous utilisez la propriété ng-style avec une fonction JavaScript chose couleur et chose couleur ça va renvoyer un objet JavaScript avec le nom des propriétés CSS, font Color, font Size et à côté les valeurs CSS, c’est un objet dans la propriété CSS et sa valeur et ça va mettre le texte en couleur et en gras dans l’exemple que vous allez voir juste après.
Voilà chose color le code scope chose couleur la fonction avec un objet, ça renvoie un objet JavaScript, font size la propriété CSS, sa valeur 23 pixels, font wild la propriété CSS sa valeur bold, la propriété CSS color sa valeur blow, c’est aussi simple que ça.
Exemple pratique Angular JS
On va voir tout ça à travers un exemple pratique, la construction des liens HTML, l’affichage d’une image grâce aux attributs Angular JS et également modifier des styles CSS d’un élément grâce à un élément CSS AngularJS c’est parti.
Alors voici l’attribut ng-SRC comme je vous l’ai expliqué, en fait vous mettez, vous pouvez mettre soit une partie de l’URL et le nom de l’image générée par une variable Angular JS donc statut qui est ici et donc ça vous affichera l’image comme ceci, ou alors vous pouvez carrément mettre l’URL complète de l’image de ce type et donc dans statut, vous complétez avec l’URL complète donc ça présente comme avantage, ça vous permet de, après vous pouvez faire un truc beaucoup plus évolué, un contrôleur beaucoup plus évolué en JavaScript justement, pour construire votre image et donc cette balise va apparaître uniquement dès que Angular JS aura interprété donc je recharge, voilà l’image est toujours présente, c’est instantané mais c’est différent si vous utilisez juste SRC donc ça marchera aussi mais il y a un temps d’interprétation ou l’image risque de ne pas être affichée donc c’est pour ça que je vous conseille d’utiliser l’attribut nG – SRC et avec l’URL de votre image directement, vous définissez avec scope.statut, c’est aussi simple que ça pour appliquer un style CSS sur une div donc cette div ici vous utilisez l’attribut nG style et vous l’associez tout simplement à une fonction JavaScript donc là vous avez le contrôleur view contrôleur on peut l’appeler o view contrôleur donc bien évidemment vous avez votre contrôleur ici o view contrôleur qui est dans cette div, donc comment ça se passe ?
Vous êtes dans le main contrôleur qui est ici donc le main contrôleur qui englobe tout ça, il manque une div pour le main contrôleur voilà, c’est corrigé qui englobe toute cette zone, le main contrôleur englobe toute cette zone et donc forcément chose color donc qu’est-ce que vous faites dans le main contrôleur ?
Chose couleur scope.Chose couleur, qui est ici égal une fonction c’est une fonction, font size vous reprenez les propriétés CSS et vous donnez une valeur par exemple on va mettre 33, on va mettre Green en vert, non là c’est font wile bold et là, la couleur grise à chaque fois vous reprenez une propriété CSS font size, font wile, etc. et vous mettez sa valeur, là le texte va apparaître en taille 33 et en vert, je peux mettre également red, ça fonctionnera pareil en taille plus petite 30, il suffit de recharger la page, il est en taille plus petite, 30.
Angular JS il est fabuleux pour ça, qu’il est très simple à utiliser, attribut src l’URL de votre image qui est ici, attribut nG style avec une fonction cette fois de chose color, vous faites chose. color la fonction et vous faites un return d’un objet CSS, propriété CSS et les valeurs donc je vais vous le mettre en commentaire, propriété CSS valeur et du coup vous avez votre image d’une part et votre texte avec le CSS que vous avez défini c’est vraiment aussi simple que ça.
Votre plan d’actions !
Maintenant c’est à vous de jouer, bien évidemment c’est en forgeant qu’on devient forgeron, donc sous cette vidéo, sous ce cours vidéo vous retrouverez le code source complet et commenté en téléchargement, vous pourrez le télécharger et le réutiliser dans vos projets, si vous avez des questions posez les directement sous ce cours vidéo, l’équipe développement facile, les experts développement facile vous répondra, et maintenant si vous voulez recevoir les prochains cours par e-mail, des cours sur AngularJS, sur le framework Phaser, jQuery, etc. vous renseignez simplement votre prénom, votre adresse e-mail sous cette vidéo et vous recevrez tous les éléments par e-mail et si vous voulez aller mais vraiment beaucoup plus loin, donc passer au niveau supérieur un cran à la vitesse supérieure si je puis dire, cliquez simplement sur l’image le lien juste au-dessus de moi vous serez redirigé dans la deuxième vidéo, dans la deuxième vidéo vous allez découvrir comment créer des architectures applicatives très solides, très robustes et évolutives dans le temps, facilement maintenable avec des mises à jour très simples, vous allez apprendre à travailler en équipe, à coder deux à trois fois plus rapidement, à utiliser tout le potentiel des Framework les plus puissants sur le marché comme AngularJS, Ionic framework, Phaser, donc tout ça c’est expliqué dans la deuxième vidéo bien évidemment, vous aurez un support avancé, personnalisé par l’équipe développement facile, avec un exemple, une fonctionnalité que vous avez découvert dans la méthode développement facile que vous n’arrivez pas à mettre en place dans votre projet, vous écrivez vous envoyez une question par l’interface de cours en fait tout simplement, en joignant votre code source, les experts développement facile un expert développement facile regarde votre code source, le corrige, vous le renvoi et vous envoi des explications supplémentaires pour s’assurer que vous soyez autonomes et que vous ayez bien compris comment utiliser cette fonctionnalité dans votre projet, vous avez vraiment un accompagnement au plus proche de vous par l’équipe d’experts développement facile donc tout ça c’est expliqué en détail dans la deuxième vidéo cliquez simplement sur le lien juste au-dessus de moi on se retrouve ensuite dans la deuxième vidéo.
[/ppmtoggle][/ppmaccordion]
Télécharger l’exemple vu dans la vidéo
Retrouvez le code source commenté sur AngularJS que vous avez vu dans la vidéo
