Apprenez à utiliser les constantes avec AngularJS.
Les constantes comme dans n’importe quel langage vous seront très utiles.
Tout est expliqué dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment créer et utiliser les constantes avec AngularJS
Bonjour et bienvenu sur Développement Facile.
AngularJS – Les constantes
Ici Matthieu expert en développement applicatif, dans cette nouvelle vidéo vous allez continuer à améliorer vos compétences avec le Framework AngularJS, donc un framework créé par l’équipe Google, très puissant pour créer vos applications JavaScript HTML 5.
Dans ce cours vous allez apprendre à utiliser les constantes avec AngularJS, à quoi ça sert ? Comment les utiliser ?
Les constantes avec AngularJS c’est comme les constantes dans les autres langages en JavaScript, en PHP, ça peut une chaîne de caractères, un nombre, un objet et ça en lecture seule les constantes. Elles sont déclarées dans un module et elles vous permettent de sauvegarder par exemple, des valeurs de configuration par exemple une URL vers une API, souvent les constantes sont utilisées pour sauvegarder des valeurs de configuration.
Pour déclarer constante c’est vraiment très simple, il suffi d’utiliser la méthode constante d’un module, donc module.constante le nom de votre constante API_URL et sa valeur, voilà c’est aussi simple que ça en fait une constante.
Pour être utilisée, une constante doit être injectée en utilisant directement son nom, vous utiliser le nom de la constante que vous avez définie, par exemple vous déclarez un contrôleur avec une constante et bien vous avez module.controller oController, ensuite votre fonction vous appelez le scope, enfin, vous avez votre variable scope en entrée et votre constante là pour avec l’injecteur de dépendance qui retrouve votre constante, vous utilisez son nom directement API URL.
Les constantes sont enregistrées au début de l’initialisation d’une application AngularJS, elles peuvent donc être injectées directement dans la méthode config d’un module.
Voici un exemple, vous avez un module, un service http que vous souhaitez personnaliser, vous pouvez utiliser module.config fonction et là le nom de votre constante, j’insiste bien par son nom que vous utilisez la constante.
Exemple pratique AngularJS
Les constantes AngularJS vous l’avez vu c’est vraiment très simple à comprendre, il ne faut pas chercher midi à 14 heures, donc vous allez passer à un exemple pratique de code source tout de suite.
Alors comment déclarer des constantes avec AngularJS ?
Comme vous allez le voir, il n’y a rien de plus simple, sur votre module que vous avez déclaré ici AngularJS, vous appelez la méthode .constant, le nom de votre constante, la valeur de votre constante, pour le domaine, une deuxième constante que vous créez et sa valeur voilà, c’est aussi simple que ça.
Après comment vous faites pour l’utiliser ?
Ici vous utilisez une constante domaine API sur la création d’un service, un service d’URL et donc le service possède la propriété api URL, donc vous créez votre URL de votre api actuellement, donc ici ce serait www.developpement-facile.com, le chemin vers l’API, en principe ont mais un / et la ça va renvoyer l’URL de l’API construite et vous avez deux constantes que vous pouvez réutiliser comme vous le souhaitez dans le code, par exemple on peut la mettre dans le titre, on va mettre le nom domaine, du domaine dans le titre plus, voilà, et ensuite par exemple, vous pouvez réutiliser dans le titre, l’API, plus API, ensuite il suffit de, vous voyez l’affichage donc comment effectuer l’affichage ?
Tout simplement URL, un scope. L’URL qui est défini dans un contrôleur ici main contrôleur c’est o URL donc o l’URL c’est le service, vous récupérez la propriété de ce service API URL et ça vous effectue l’affichage.
Comme vous l’avez vu tout à l’heure, le titre on à l’API, API elle est ici dans la méthode title, title est réutilisé ici, donc on a bien notre constante API qui est affichée ici, pareil pour le domaine, le domaine il est affiché dans page title, qui est définis ici plus le domaine donc c’est affiché ici, donc si je change la valeur de ma constante elle va changer à plusieurs endroits, et le chemin.prod, donc regardez je vais recharger j’ai juste changer les valeurs des constantes et automatiquement tout ça va se mettre à jour, .prod, programmation facile prod, programmation facile, prod programmation-facile, programmation-facile, /def, /api, /prod, vous avez des constantes c’est hyper simple à utiliser avec AngularJS et derrière vous pouvez les réutiliser de la façon aussi simple que je viens de faire devant vos yeux, donc maintenant à vous d’utiliser la puissance des constantes AngularJS dans vos applications.
Votre plan d’actions !
Alors maintenant c’est à vous de jouer ! Comme d’habitude vous trouverez en téléchargement sous ce cours vidéo le code source complet et commenté, donc à votre tour de faire les exercices donc d’utiliser les constantes dans votre développement.
Si vous avez des questions comme d’habitude posez les directement sous ce cours vidéo, l’équipe développement facile vous répondra avec grand plaisir et maintenant il y a un formulaire sous cette vidéo, sous cette vidéo vous renseignez votre prénom, votre adresse e-mail vous cliquez sur le bouton recevoir et vous allez recevoir les prochains cours directement dans votre boîte mail, donc c’est très pratique pas besoin de venir tout en sur le site, directement dans votre boîte mail, vous recevrez les prochains cours sur AngularJS, Ionic framework, jQuery etc.
Et par contre si vous êtes développeurs, vous êtes ambitieux, vous allez apprendre des techniques très précises de développement, très avancées vous êtes free-lance, vous voulez augmenter, améliorer votre capacité de développement, cliquez simplement sur le lien juste au-dessus de moi, sur l’image vous serez redirigé dans vers une deuxième vidéo ou vous allez apprendre à créer des Web App, vous codez une seule fois et en un clic, façon de parler évidemment, il y aura quelques click, vous déployez votre application sur tous les Smartphones, toutes les tablettes, que ce soit Apple ou Android ou Windows Phone.
Et bien évidemment cas de difficulté les experts de l’équipe développement facile ils sont là, ils sont à votre disposition, vous avez un exemple, suite à un cours vous avez un code source que vous ne comprenez pas, vous n’arrivez pas utiliser, vous envoyez un message en joignant votre code source et l’expert le plus qualifié, il y a plusieurs experts dans l’équipe développement facile, ils ont tous plus de 10 années d’expérience dans différent langage, il prendra votre code source, il va vous le corriger, il va vous donner des explications supplémentaires, pour que vous puissiez comprendre l’utilisation du concept et être autonomes et si nécessaire il va vous renvoyer un autre exemple de code source, vous recevrez directement tout ça votre boîte mail donc on peut pas faire plus simple.
Cliquez simplement sur le lien, sur l’image, je retrouve toutes ces dans la deuxième page à tout de suite.
[/ppmtoggle][/ppmaccordion]
Exemple d’utilisation des constantes avec AngularJS
Retrouvez le code source commenté de l’exemple de la vidéo sur les constantes utilisées dans AngularJS
