Aller au contenu

Comment structurer une application AngularJS avec les modules

Apprenez à architecturer votre code avec AngularJS et les modules pour gérer au mieux le développement de votre application.

Tout est expliqué dans la vidéo ci-dessous.

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

Comment structurer une application AngularJS avec les modules

Bonjour et bienvenu sur Développement Facile.

 

AngularJS – Architecture avec les modules

Encore un nouveau cours dédié à AngularJS, donc je me présente déjà, Matthieu expert en développement applicatif ce sera mieux d’être présenté.

Donc dans ce nouveau cours dédié à Angular, vous allez apprendre à créer l’architecture de votre application avec les modules.

Comme vous l’avez remarqué avec les précédents cours si vous les avez suivis, AngularJS il utilise des modèles de conceptions et globalement il utilise le modèle de conception modèle vue contrôleur, votre modèle pour gérer les données, les vues pour afficher ces données, et le contrôleur pour contrôler tout ça avec des événements, les écoutes d’événement etc., et le truc c’est que vous pouvez vite vous retrouver débordé avec AngularJS, ne plus trop savoir où donner de la tête et donc c’est important d’apprendre à créer une architecture solide avec les modules donc sous AngularJS.

 

Architecture applicative avec AngularJS

Pour structurer votre application avec AngularJS, justement vous avez la notion de modules, il faut considérer un module comme un container qui contiendra différents élément de votre application et en fonction de la complexité de votre application, si c’est une application simple vous aurez un seul container donc un seul module, si c’est une application vraiment complexe comme un jeu avec plusieurs niveaux etc., vous aurez plusieurs containers donc plusieurs modules, et chaque modules, chaque containers contient des contrôleurs, des filtres que vous avez vus précédemment, des directives, des services, des constantes.

Pour déclarer un module c’est ce que vous avez vu, depuis le début dans les précédents cours c’est Angular.Module et le nom votre module tout simplement.

Ensuite vous indiquez à AngularJS que c’est un module principal avec l’attribue NG-app, ça aussi vous l’avez vu dans les précédents cours, soit vous le mettez sur la balise body, soit sur la balise HTML, soit sur une autre balise tout ça, ça dépend vraiment de l’architecture de votre projet applicatif en fait donc sur la balise HTML ça donne, vous rajoutez l’attribut ng-app avec le nom de votre module ici c’est gestion formation. Et il faut savoir que les éléments d’un même module ils ont accès aux autres éléments de ce module grâce à la fonctionnalité d’injection de dépendances d’AngularJS, le pattern ioc inversion o contrôle que je vous ai détaillé dans un cours précédent.

Bien évidemment lorsque vous avez plusieurs modules vous pouvez définir des dépendances entre les modules pour les relier entre eux et tous les composants du module indépendant ont accès bien évidemment composants des dépendances, ça permet au module de communiquer entre eux, par exemple vous avez un exemple, le module gestion achat dépend du module nommé ng type achat, lorsque vous créez votre module angular.module gestion formation, il va dépendre d’un autre module que vous avez créé dans votre application qui s’appelle ng-type achat.

La fonction module ça créé un nouveau module, quand elle est utilisée avec deux paramètres ou elle écrase le modules si elle existe déjà, bien évidemment. Cette fonction est appelée avec un seul paramètre ça permet de récupérer un module existant, dans votre application qui est complexe vous avez besoin de récupérer un module, vous l’avez créé plus en amont l’application vous fait angular.module et le nom de votre module, ça va vous renvoyer le module qui existe déjà.

Bien évidemment un module possède plusieurs méthodes pour déclarer des éléments, vous pouvez déclarer un contrôleur dans un module avec la méthode contrôleur vous avez vu aussi, vous récupérez votre instance de modules angular.module gestion de formation, vous récupérez o module dans la variable module de votre instance du module et vous faite o module.controler vous créez votre contrôleur au niveau du contrôleur o contrôleur c’est ce que vous allez retrouver dans votre code html, et votre fonction, qui sera appelée.

Et en fonction de la complexité de votre application, vous devez déclarer un module ou plusieurs modules c’est très important pour une application complexe la diviser en plusieurs containers, plusieurs modules. Là vous avez un exemple avec les déclarations Angular.module gestion client qui dépend du module ng type achat, vous avez un deuxième module gestion formations qui lui aussi dépend du module ng type achat.

Alors comme je vous l’ai dit pour charger un module il faut utiliser l’attribut ng-app, donc ça vous le savez, par contre dans le processus d’initialisation d’une application AngularJS il configure le module puis il l’exécute, vous pouvez ajouter des actions sur ces deux étapes grâce à deux méthodes, config pendant la configuration du module et run pendant l’exécution d’un module donc là ça s’affiche à l’écran, vous faites module.config et votre fonction pour exécuter des traitements sur votre application, justement, avant l’exécution de votre application, vous définissez une configuration, donc ça vous permet de modifier certains éléments, bien évidemment.

 

Alors que la méthode run elle correspond au lancement de votre application, elle permet d’effectuer un traitement pendant l’exécution d’un module, pareil pour cette méthode, enfin module.run.

 

Votre plan d’actions !

Alors votre plan d’action, comme d’habitude vous pouvez télécharger le code source complet sous ce cours vidéo, je vous encourage, c’est vraiment très important de passer à l’action, vous devez passer à l’action tout de suite dès maintenant en reprenant les codes sources que je vous donne, que vous téléchargez et en les adaptant à vos applications. Si vous avez des questions posez les directement sous ce cours vidéo, l’équipe développement facile vous répondra avec grand plaisir vraiment, et maintenant, si vous voulez vous pouvez vous inscrire, vous avez un formulaire sous cette vidéo, inscrivez-vous renseignez votre prénom et votre adresse mail et vous recevrez gratuitement, c’est entièrement gratuit, des cours pour améliorer votre développement sur jQuery, AngularJS, différents frameworks, vous recevrez plusieurs cours pour améliorer votre capacité développement.

Et si vous voulez aller beaucoup mais vraiment beaucoup plus loin dans votre expertise et beaucoup plus rapidement en moins de 30 jours, accéder à un niveau développement élevé, il y a une bannière là juste au-dessus de moi, il suffit de cliquer dessus donc une image vous cliquez dessus vous serez redirigé dans une deuxième page ou je vous explique dans cette vidéo, toutes les stratégies, les techniques utilisées par les experts.

L’avantage c’est que les experts Développement Facile, ils ont plus de 10 années d’expérience l’équipe Développement Facile, dans plusieurs langages de programmation, sont là pour vous accompagner personnellement, vous accompagne personnellement, si vous avez une difficulté, vous bloquez sur un concept du cours et bien vous suffit que vous envoyez votre code source, ils vont regarder votre code source, vous corriger votre code source mais aussi vous expliquer pour que vous puissiez comprendre le concept et l’appliquer dans vos applications en toute autonomie, c’est très important, vous avez à la fois votre code source corriger, un exemple supplémentaire et les explications qui vont avec.

Donc et ça va vous permettre de créer des applications dont vous coderez une seule fois, vous déploierez votre web app. Grâce à Angular JS, Ionique Framework, sur tablette, smartphone, que ce soit sur android, apple, windows phone d’un simple clic, une fois que le code source est près, un simple clic et vous déployez sur tous les périphériques votre application.

Donc suffit de cliquer sur la bannière, sur l’image juste au-dessus de moi on se retrouve tout de suite dans la deuxième vidéo à tout de suite.

 

[/ppmtoggle][/ppmaccordion]

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

Retrouvez le code source commenté de l’exemple d’architecture d’une application AngularJS présenté dans la vidéo

Téléchargement du code source 16 - architecture les modules

Cliquez ici pour télécharger le code source 16 - architecture les modules

Présentez vous aussi vos architectures AngularJS

Utilisez la zone commentaire pour venir présenter vos applications 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 >>