On continu ensemble à découvrir l’architecture avec AngularJS. Dans ce cours, apprenez à créer et utiliser les dépendances IoC.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment créer une architecture applicative avec AngularJS et les dépendances IOC
Bonjour et bienvenu sur Développement Facile.
AngularJS – Architecture avec les dépendances
Ici Mathieu expert en développement applicatif, dans cette nouvelle vidéo vous allez aller plus loin dans la création d’une architecture avec AngularJS.
Dans le dernier cours vous avez commencé à découvrir la notion de containers donc créer plusieurs containers c’est-à-dire, plusieurs modules pour votre application avec AngularJS.
Et bien là, vous allez apprendre à utiliser les dépendances c’est-à-dire, entre modules pour échanger des informations entre plusieurs modules grâce à AngularJS, c’est à dire ça va vous permettre d’avoir des architectures très solides, par exemple, sur une application complexe de développer en équipe, plusieurs développeurs seront par exemple sur un module d’un jeu vidéo, donc sur un niveau d’un jeu vidéo, sur le module du moteur d’affichage etc.
Architecture applicative avec ANgularJ
Alors comment ça se passe ?
Comme vous le savez, en tout cas, si vous avez vu les derniers cours, l’injection de dépendances fait partie du modèle de conception IoC pour éviter les dépendances entre les éléments d’une application, c’est-à-dire une application, les éléments d’une application, ils doivent avoir très peu de dépendances entre eux, ça permet qu’ils soient souples pour communiquer, faire ce qu’ils ont à faire, concrètement déplacer, voir échanger des informations si c’est nécessaire avec les autres modules, d’où le modèle utilisation du modèle de conception IoC. Un composants n’est donc plus responsable de la récupération de cette dépendance, il est uniquement responsable de la déclaration de celle-ci, il s’occupe juste de déclarer les dépendances mais après il y a un composant tiers qui est là pour lui fournir les dépendances, ces récupération-là, il les déclarent juste et on va lui fournir ses dépenses.
AngularJS utilise le modèle de conception IoC pour gérer les dépendances à l’intérieur d’une application et vous avez donc le service dollar injector qui se charge de les résoudres.
Alors concrètement pour vous qu’est-ce que ça va changer ?
Déjà il faut savoir que le mécanisme d’injection de dépendances c’est vraiment un point central d’AngularJS, il faut absolument que vous compreniez ce modèle de conception IoC inversion off contrôle donc vous pouvez l’utiliser dans tous les composants destinés dans une fonction Factory donc une fonction Factory, en principe c’est, comme vous l’avez vu c’est utilisé pour créer des filtres mais pour pleins d’autres choses également, vous pouvez utiliser faites ce mécanisme injection dépendances dans le contrôleur, les services, des filtres que je viens vous dire, vous avez bien évidemment, comme vous allez dans le cours précédent, les méthodes run et config qui profitent aussi de l’injection de dépendances, pour configurer un module avant son exécution, la méthode config et run pour atteindre un traitement pendant l’exécution du module, c’est un petit rappel du cours précédent.
La création d’un contrôleur module.Contrôleur le nom du contrôleur qui sera utilisé dans le code HTML o contrôleur et la fonction qui sera appelée avec le scope et des paramètres. Module.Config avec une fonction fournie, route provider en entrée, module.run avec en entrée la variable $ http d’une fonction, et après http.Provider.Interceptor.Push, ça c’est des exemples d’utilisation de dépendances.
La résolution d’une dépendance se base sur son nom et vous avez le service dollar injector qui recherche dans le module courant et dans les modules dont dépend le module courant, vous avez un module, s’il a des dépendances avec un autre module, service dollar injector va rechercher cette dépendance, il va aussi rechercher dans les éléments fournis par AngularJS un élément déclaré avec ce nom-là, c’est vraiment $injector qui à partir du nom, va effectuer une recherche dans le module, dans les modules dépendants pour trouver cette instance finalement.
Il faut savoir que la résolution par nom ne fonctionne pas en cas de minification des fichiers JavaScript donc ça c’est très important à savoir, si vous utilisez des services pour compresser les fichiers JavaScript, ça ne fonctionnera pas, sauf vous avez des paramètres de fonctions Factory qui seront minificiées donc leur noms peut-être potentiellement changé et l’injecteur, si le nom change, il arrivera plus à résoudre les dépendances, vous pouvez utiliser les services de minification de fichiers mais il ne faut pas que le nom soit changé parce qu’injector va être perdu.
Oui forcément il fonctionne sur une recherche par le nom, mais il y a une solution et heureusement, sinon on aurait des fichiers de un mega, deux, trois méga, vous pouvez quand même minificier vos fichiers JavaScript en utilisant cette solution avec une syntaxe module.controler contrôleur le scope entre crochets en fait, vous définissez la syntaxe entre crochets, ce code déclare un contrôleur dépendant de scope qui représente le modèle et le user info et à la place d’une fonction Factory, vous allez utiliser un tableau passé en paramètre, c’est ce que je viens de vous dire, entre crochets c’est un tableau avec la liste des noms des dépendances au format chaîne de caractères, puis votre fonction Factory, regardez l’exemple :
module.controler o controlerr le nom du contrôleur c’est utilisé dans le code HTML, le tableau donc entre crochets, scope c’est-à-dire la liste des noms des dépendances sous forme de chaîne de caractères, scope user info et ensuite votre Factory avec scope et user avant ce serai user service.
Pour que vous puissiez assurer la compatibilité de la déclaration des dépendances avec la minification des fichiers JavaScript, vous ajoutez l’attribue ng-strict qui réduit à côté de l’attribut ng-app, exécuter donc dans votre balise body ng-app c’est le nom de votre module, de votre application, juste à côté vous ajoutez un attribut ng-strict-di et ça va assurer la compatibilité, la déclaration des dépendances pendant la phase de minification de l’application de vos fichiers JavaScript.
De toute façon si vous avez des dépendances qui sont mal déclarées, AngularJS va déclarer une exception, quand vous avez réutiliser les codes sources par exemple, vous les avez adaptés, code source que je vous fournit sur développement facile, vous les avez adaptés dans vos applications, vous avez peut-être fait une erreur de déclaration de dépendances, à chaque fois vous avez une exception qui est déclarée, ça vous le voyez dans votre logiciel de debug.
Vous pouvez bien évidemment aussi utiliser l’injecteur comme service et déclarer une dépendance vers dollar injector, voici un exemple module.controler o contrôleur fonction o scope et dollar injector, et pour récupérer l’instance d’un élément vous avez la méthode get du service var user info $ injector.get user info, là vous allez, avec ce code-là, récupérer l’instance de l’élément user info grâce à injector.get.
Votre plan d’actions !
Alors maintenant c’est à vous de jouer, votre plan d’action comme d’habitude, vous avez plusieurs codes source livrés avec ce cours il est vraiment très important pour que vous puissiez progresser rapidement, de reprendre ce code source, vous pouvez télécharger code source commenté sous ce cours, et surtout de l’adapter, de le comprendre pour l’adapter à vos applications, si vous avez des questions, posez les directement sous ce cours vidéo, l’équipe développement facile sera ravie de vous répondre, de vous fournir toutes les explications nécessaires et maintenant il y a un formulaire là juste en dessous de cette vidéo donc vous renseignez sur ce formulaire simplement votre prénom, et votre adresse mail, et vous allez recevoir les nouveaux cours, gratuitement, des nouveaux cours sur AngularJS, jQuery, les modèles de conceptions, tout ça, vous recevrez directement les nouveaux cours gratuitement dans votre boîte mail.
Maintenant si vous voulez progresser à la vitesse de l’éclair, être accompagné, cliquez simplement sur le lien cliquable, juste au-dessus de moi et vous redirigez vers une deuxième vidéo, une deuxième page ou les experts développement facile vous accompagnent, vous, personnellement pour vous aider à acquérir rapidement des compétences élevées en programmation.
C’est-à-dire ils sont là, si vous avez des questions, ou vous comprenez pas un exemple de code, vous avez du mal à l’utiliser, vous leurs posez simplement une question, vous joignez votre code source, les experts développement facile qui ont plus de 10 ans d’expérience, l’expert le plus qualifié vous répondra à votre question, s’en occupera personnellement, corrigera de code source, vous donnera toutes les explications nécessaires pour que vous puissiez progresser rapidement, donc cliquez simplement sur l’image sur le lien juste au-dessus de moi.
Tout est expliqué en détail dans la deuxième page, je vous dis à tout de suite.
[/ppmtoggle][/ppmaccordion]
Télécharger l’exemple d’injection de dépendance dans AngularJS
Retrouvez le code source commenté de l’utilisation des dépendance avec AngularJS.
Téléchargement du code source 17 architecture les dependances
