Aller au contenu

Créez l’arborescence de votre application AngularJS orientée performance !

Apprenez à organiser les fichiers de votre application dans une arborescence efficace.

Tout est dans la vidéo ci-dessous.

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

Créez l’arborescence de votre application AngularJS orientée performance !

Bonjour et bienvenu sur Développement Facile.

 

AngularJS – Organisation des fichiers

Ici Matthieu expert en développement applicatif, donc vous allez continuer à découvrir tout le potentiel du framework de Google s’appelle AngularJS, j’adore ce Framework il est vraiment génial très puissant, j’aime bien utiliser les modèles de conceptions dans des applications, les modèles de conception c’est un peu le Saint Graal, c’est ce qui vous permet de passer au niveau supérieur, de développer avec une grande aisance, une grande facilité, donc là il y a un point très important mais que souvent on oublie en tant que développeur, moi le premier j’ai fait cette erreur il y a quelques années maintenant, il y a plusieurs années mais je suis passé par là, j’ai fait cette erreur, c’est-à-dire l’organisation d’une application sur un disque dur, l’organisation des fichiers, il ne faut pas se leurrer, quand vous créez un jeu ou une application, vous aurez des dizaines et des dizaines de fichiers, donc ça peut aller jusqu’à plus de 100 fichiers pour un jeu très facilement et c’est très important de pouvoir retrouver ses petits comme on dit, si vous avez 100 fichiers n’importe où sur votre disque dur, pour créer votre application, surtout si vous travaillez en équipe ça va être très difficile. Il vous faut une organisation de fichiers stables, efficaces, qui permettent, lorsque vous travaillez avec d’autres développeurs, en équipe, que chacun s’y retrouve très rapidement.

 

Architecture applicative avec AngularJS

Alors comment faire ?

Comme je vous l’ai dit, avec AngularJS, même avec un autre framework, vous êtes libre d’organiser les fichiers source dans les répertoires, le nombre de répertoires que vous souhaitez, mais le but c’est de conserver une lisibilité, une organisation efficace pour travailler en équipe et pour vous y retrouver quand vous avez des centaines de fichiers sources.

Vous devez utiliser des structures types, des arborescences applicatives types, je vais vous donner une organisation de l’arborescence pour une application simple. Pas une application ou il n’y a qu’un seul module mais une application relativement simple, déjà vous avez votre fichier index.html qui correspond à la page principale de votre application ou de votre jeu.

Ce fichier déclare toutes les références, les includes des fichiers CSS, des fichiers JavaScript, il définit la portée d’AngularJS, il décrit la structure HTML de votre application, ensuite vous avez un dossier include, et dans ce dossier include vous avez les répertoires CSS, JavaScript, qui contient le répertoire CSS il va contenir toutes les feuilles de style.

Vous avez au niveau racines, un répertoire image qui va contenir toutes vos images utilisées, et si vous avez énormément d’images, créez un sous répertoire dans le répertoire image avec un sous répertoire icône, un sous répertoire logo, un sous répertoire bannière, c’est très important d’architecturer vos applications sous forme de répertoires, les uns fabriqués en dessous des autres, ça vous permettra de vous y retrouver très rapidement ou un autre développeur qui travaille avec vous de s’y trouver très rapidement.

Vous avez aussi dans le répertoire include, dont je vous ai dit le répertoire CSS, le répertoire JavaScript, vous avez le répertoire font qui comporte tous les fichiers de police.

Vous avez aussi un répertoire Framework avec tous les frameworks que vous utilisés, mais au lieu de mettre tous les Framework au même endroit dans votre répertoire CSS, et un sous répertoire JavaScript, JS ou JavaScript ça dépend comment vous souhaitez l’appeler, dans CSS vous aurez par exemple bootstrap3, dans JS, le framework AngularJS, le framework, je ne sais pas jQuery, ect. Ça va contenir toutes les librairies JavaScript et CSS que vous utilisez dans votre application.

Ensuite vous avez le dossier app qui contient tout ce qui concerne l’application AngularJS, app application, il contient le fichier main JS, qui effectue l’initialisation, la création des modules, il contient aussi constant.js qui s’occupe de déclarer toutes les constantes de votre module, de votre application, et ensuite il y a les différents éléments votre application AngularJS, qui sont organisés dans des dossiers différents, vous avez un dossier pour les contrôleurs, les directives, les filtres, les services, les vues, donc respectivement dans le dossier contrôleur vous aurez tous les contrôleurs, dans le dossier directive, toutes les directives, dans le dossier filter, tous les fichiers qui concernent les filtres, dans le dossier service tous les fichiers JavaScript qui contiennent un service dans les vues, bien évidemment, tous les fichiers qui concernent les vues.

Ensuite pour les directives certaines d’entre elles peuvent utiliser des templates, très simple, il  suffit que vous créez un dossier template qui contiendra tous ces templates, voilà le principe de fonctionnement c’est de créer des dossiers qui contient tous les fichiers du même thème, comme ça, ça vous permet de vous y retrouver très rapidement.

Dans le cas d’une application beaucoup plus complexe comme un jeu vidéo, comme une application, très complexe, vous aurez le même type d’arborescence mais vous allez ajouter un petit truc en plus. C’est-à-dire que le dossier app va contenir un sous-dossiers par fonctionnalités, dans d’une application plus complexe, vous aurez plusieurs modules et bien vous allez créer un sous-dossiers déjà, par modules et vous aurez plusieurs fonctionnalités dans votre application vous allez créer des sous-dossiers par fonctionnalités, bien évidemment, dans ce sous-dossier de fonctionnalités, vous aurez tous vos fichiers qui seront organisés par sous-dossiers, contrôleur directive, filter, service, et vues.

Vous pouvez aussi avoir un dossier principal nommé common, main ou core, suivant vos préférences en tant que développeur professionnel, et il contient par exemple l’ensemble des éléments communs à toutes vos applications, notamment il y a des directives, des filtres qui sont communs à toutes les fonctionnalités, ce sera dans ce répertoire common, core ou main, vous avez également le fichier main.js dedans, et la déclaration des constantes.

 

Exemple pratique AngularJS

Je vous montre un exemple pratique, voilà un exemple typique, pour que vous voyez visuellement d’organisation d’une application, c’est aussi simple que ça.

Alors la création de l’arborescence de votre application est vraiment très importante, bon je conçois dans les petites applications, vous en aurez pas forcément besoin, vous pouvez mettre vos fichiers, vos dossiers un petit peu comme vous voulez, mais lorsque vous allez créer des grosses applications complexes, des gros jeux très complexes avec plusieurs dizaines de fichiers, ça peut monter facile à 40, 50, 60 fichiers que ce soit des fichiers HTML, des fichiers JavaScript, vos différents Framework, les fichiers de données, JSON, XML, il est absolument indispensable que vous organisiez, vous créez une arborescence logique, donc juste avant vous avez pris, découvert la version un petit peu théorique et après ce sera à vous, vous partez de la théorie de ce que vous avez appris dans ce cours développement facile pour créer une arborescence AngularJS optimisée et à partir de la théorie, vous le mettez en pratique et vous l’adaptez selon votre ressenti, ce que je vous ai présenté dans développement facile je l’ai adapté selon le type d’application, mes préférences, donc là on est dans le répertoire racine, il y a le fichier index.html qui permet de lancer l’application donc chargement des données que vous avez vu cette application dans un cours précédent des données du cache ou alors directement depuis un fichier Ajax et ensuite, vous avez les données, un dossier image avec toutes les images d’une application, vous pouvez même faire des sous répertoire bannière, logo, appli, ça c’est à vous de voir si vous avez énormément d’images, et include ça c’est tout le reste.

Votre application app, j’y reviendrais dans un instant, les CSS, le style CSS de votre application, donc là il n’y en a qu’un seule fichier, c’est une petite application et les Framework, vous aurez différents frameworks, vous pouvez même créer des sous répertoire CSS et JavaScript, si vous souhaitez séparer les frameworks, bien évidemment, pensez à le changer dans votre code source ici, sinon ça ne fonctionnera pas, très important. Là je recharge la page tout fonctionne, parce que le répertoire a été mis à jour, donc là vous aurez dans JavaScript framework, JavaScript tous vos frameworks JavaScript, là par exemple bootstrap3 dans CSS, vous avez vos frameworks, vos fichier CSS à part, ce n’est pas un framework, donc vous les séparez, l’APP, vous avez les contrôleurs, les directives dans les directives un répertoire avec tool et template, vous avez les filtres, les services, toutes les vues, si vous avez beaucoup de vues dans votre application vous pouvez faire des sous répertoire également, et la main.JS c’est votre application globale, le fichier global qui va lancer l’application.

C’est ce fichier par exemple qui va déclarer un module AngularJS, plusieurs contrôleurs et ensuite vous aurez d’autres fichiers par exemple, les fichiers avec toutes les Factory, là vous créez un nouveau dossier Factory, tout ça, ça dépend vraiment du type de votre application, plus elle est complexe, plus c’est nécessaire de créer des répertoires. Ça c’est vraiment à vous de voir, ce que je vous conseille c’est une arborescence optimisée, ça va vous permettre de gagner du temps à vous et à votre équipe si vous travaillez à plusieurs développeurs, en équipe sur la même application, je peux vous garantir que vous allez gagner énormément de temps parce que votre application sera organisée selon une arborescence logique, donc de toute façon vous avez tout en téléchargement dans le code source sous cette vidéo, comme ça vous pourrez retrouver ce type, ce modèle d’arborescence typique, après c’est à vous de jouer, vous partez de la théorie, de ce que vous avez reçu dans ce cours, vous le mettez en pratique et vous l’adaptez selon vos conventions de développement, les conventions que vous avez définies avec votre équipe, vos préférences personnelles.

 

Votre plan d’actions !

Votre plan d’action, vous pouvez télécharger le code source, ce n’est pas le code source qui va vous aider mais ça va vous permettre d’avoir une structure type sous les yeux directement reproductible dans vos applications, et là le but c’est dans vos prochaines applications, même dans l’application que vous développez actuellement, définissez votre arborescence, votre organisation de fichiers optimisés.

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, maintenant c’est à vous de jouer donc vous avez sous ce cours vidéo, un formulaire renseignez simplement votre prénom, votre adresse mail, cliquez sur le bouton recevoir et vous recevrez directement par e-mail les prochains cours que ce soit sur AngularJS, Ionique framework, jQuery etc. et si vous voulez aller beaucoup plus loin dans votre expertise, en moins de 30 jours, booster vos compétences en développement applicatif, cliquez simplement sur le lien, sur l’image juste au-dessus de moi et vous allez être dirigés dans une deuxième vidéo, dans une deuxième page ou vous allez découvrir comment, à partir du même code source, créer une Webapp que vous déployez en one click, en un seul clique sur tous les périphériques, sur les Smartphones, des tablettes, soit sous iOs Apple, Android, Windows phone, le même code source ça permet de créer une application sur tous les périphériques, c’est que vous allez découvrir, comment faire dans la deuxième vidéo en cliquant sur le lien juste au-dessus de moi.

Vous allez aussi profiter de l’expertise de l’équipe développement facile, l’équipe développement facile se met à votre service, si vous avez une question ou des difficultés à utiliser un code source, un exemple de code source dans vos projets, vous envoyez un simple message avec votre code source à l’équipe développement facile et l’expert le plus qualifié, il y a plusieurs experts dans l’équipe développement facile, certains leur domaine de prédilection, lui le plus qualifié va répondre à votre question, corriger votre code source, vous donner des conseils, des compléments d’explications et si nécessaire, vous renvoi un exemple de code source supplémentaire et vous recevrez tout ça dans votre boîte mail, c’est aussi simple que ça.

Cliquez simplement sur le lien, sur le lien cliquable, sur l’image juste au-dessus de moi, je vous retrouve tout de suite dans la deuxième page pour tout vous dire dans le détail, à tout de suite.

[/ppmtoggle][/ppmaccordion]

Télécharger l’exemple d’arborescence pour votre application

Retrouver arborescence de l’application qui vous a été présenté dans la vidéo

Téléchargement du code source 21 arborescence application

Cliquez ici pour télécharger le code source 21 arborescence application

Présentez l’arborescence de votre application.

Utilisez la zone commentaire pour présenter l’arborescence de votre applications

 

 

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 >>