Aller au contenu

Comment utiliser le modèle de conception Model View Controler avec AngularJS

Découvrez le modèle de conception Model View Controler dans le Framework JavaScript AngularJS.

Apprenez aussi à utiliser les modèles MVVM et IoC.

Tout est dans la vidéo ci-dessous.

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

Comment utiliser le modèle de conception Model View Controler avec AngularJS

Bonjour et bienvenu sur Développement Facile.

Angular JS – Présentation et fonctionnalités

Ensemble on continue à découvrir AngularJS, donc surtout vous allez apprendre à utiliser tout le potentiel du framework AngularJS donc là c’est petit peu, on va rentrer en douceur dans le fonctionnement AngularJS donc son installation, les différentes fonctionnalités.

Présentation Angular JS

Alors AngularJS à quoi il sert ? C’est un Framework comme je vous l’ai dit dans la dernière vidéo JavaScript Open source développé par Google, il simplifie littéralement la création de SPA, single page application, en français, des applications mono page, des applications sur une seule page Web, vous n’avez pas besoin de recharger la page Web quand vous naviguez dans cette application, c’est uniquement des zones de l’interface Web qui sont rechargées en fonction de telle ou telle action de l’utilisateur.

L’objectif AngularJS est de fournir tous les outils nécessaires, vous fournir tous les outils nécessaires au développeur pour créer ce type d’application, il apporte également une structure permettant de développer, de créer des architectures d’applications vraiment très robustes, très évolutives, et maintenables dans le temps très facilement, vous pouvez travailler en équipe.

AngularJS repose sur le modèle de conception MVC modèle vue contrôleur donc bien évidemment je vais vous expliquer ce qu’est le modèle de conception MVC, comment l’utiliser à votre avantage dans votre développement et comment l’utiliser avec AngularJS tout simplement.

L’organisation MVC

L’organisation MVC ça permet d’organiser votre application en trois parties, le modèle d’un côté, la vue ou les vues de l’autre et le contrôleur, suivant la taille de vos applications vous pouvez avoir très bien plusieurs contrôleurs, plusieurs vues et plusieurs modèles, tout dépend de la taille de votre application et de sa complexité. Le modèle contient toutes les données à afficher il ne possède pas de logique, en gros, votre modèle c’est comme si c’était votre base de données, il contient des informations qui peuvent provenir d’une base de données, d’un fichier XML ou des informations renseignées par l’utilisateur. Ensuite vous avez la vue qui elle s’occupe d’afficher toutes les informations à l’utilisateur, pour faire simple, la vue, c’est interface, c’est les graphismes, c’est le design, c’est aussi simple que ça. Bien évidemment si l’utilisateur effectue des actions sur cette vue, il y a un formulaire à renseigner, ou si c’est un jeu des actions du héros, la vue transmet toutes ces informations au contrôleur et bien évidemment on utilise avec MVC un système d’évènements donc le modèle observer qui permet de communiquer par évènements, de la vue au contrôleur, contrôleur modèle, du modèle à la vue, etc. avec les évènements c’est vraiment très puissant, en plus JavaScript c’est un langage événementiel c’est vraiment très puissant. Et vous avez le contrôleur c’est l’élément central de votre application, le contrôleur c’est toute l’intelligence, la logique de votre application, c’est lui qui va être informé, l’utilisateur a renseigné le formulaire, il a cliqué sur tel ou tel bouton, il va mettre à jour les informations dans le modèle, et il va dire telle vue doit se mettre à jour, il faut utiliser telle information, il transmet toutes les informations, le contrôleur c’est vraiment l’intelligence de votre application.

Extension de l’organisation MVC

Alors vous avez des extensions de l’organisation MVC, l’avantage de ce modèle de conception c’est vraiment de séparer votre application en différents éléments avec des responsabilités très précises et très distinctes, vous séparez les éléments, vos trois éléments, contrôleur, modèle et vue, et ils communiquent entre eux par des événements donc ça vous permet d’avoir un code très structuré, si vous travaillez en équipe, un développeur peut travailler sur les vues, un autre développeur sur le modèle, et un troisième développeur sur le contrôleur, vous vous mettez d’accord sur le nom des événements à envoyer et chaque écoute les éléments qui le concerne, la vue les éléments qui le concernent et envoi comme le contrôleur des événements nécessaires ça vous permet travailler en équipe très facilement.

AngularJS s’inspire du modèle de conception MVVM modèle View View Model, ça définit une organisation similaire au modèle MVC avec une notion de binding. Le binding ça permet de synchroniser les données du modèle et son affichage dans la vue, si la vue est mise à jour on informe, on met à jour le modèle, si le modèle est mis à jour d’une autre façon, on met à jour la vue directement, l’utilisation des modèles de conceptions MVC et MVVM n’est pas suffisante pour organiser une application entière, comme je vous l’ai dit, il y a d’autres modèles de conceptions donc des notions de service, observer également donc pour encapsuler toutes les fonctionnalités métiers techniques, utiliser des services et ça permet de regrouper les éléments qui peuvent être réutilisés dans plusieurs grandes applications AngularJS, vous avez pas besoin de réinventer la roue à chaque fois, pour une application, vous développez des services, service de connexion utilisateur, vous pouvez le réutiliser ailleurs, service d’inscription de votre utilisateur dans tel ou tel élément, vous pouvez le réutiliser dans d’autres applications.

IoC avec Angular JS

C’est ce qui fait vraiment la puissance du modèle du framewrok AngularJS et du modèle MVC et vous avez également IoC, donc pour éviter au développeur de gérer tout le cycle de vie des objets AngularJS, leurs créations, leurs descriptions, les contrôleur modèle et service, il y a le modèle de conception IoC donc inversion of contrôle qui va vraiment vous simplifier la vie, donc ce modèle de conception c’est un composant, il n’est pas responsable de la récupération des dépendances, mais il s’occupe de déclarer toutes les dépendances, il va déclarer une instance du modèle, du contrôleur, des vues et il va transmettre ses instances et après ce sera à vous de les utiliser donc inversion contrôle, vous donnez toute la configuration de l’objet créé, et modèle de conception IoC, vous créez votre objet, vous renvoyez une instance que vous pourrez réutiliser donc ce qui veux dire ce que vous lisez ici, ça veut dire que le développeur n’a pas besoin instancier les éléments d’une application, ni leurs dépendances c’est IoC qui va s’en occuper avec Angular JS, voilà, c’est aussi simple que ça. C’est vraiment génial ce modèle de conception IoC.

Les tests unitaires avec Angular JS

Vous pouvez effectuer des tests unitaires avec AngularJS donc la séparation des responsabilités et grâce au modèles de conceptions MVC vous permet de tester facilement votre application et de faire des tests unitaires, vous avez deux types de test avec AngularJS, vous pouvez tester soit un élément de l’application, le contrôleur ou un service, ou alors vous pouvez faire des tests, ça s’appelle and to and, c’est-à-dire pour tester votre fonctionnalité de l’application de bout en bout du début à la fin, depuis l’exécution du contrôleur, en passant par les services, jusqu’aux ressources externes utilisées vous pouvez tout tester.

Votre plan d’action !

Ça vous permet évidemment, les tests unitaires de détecter très rapidement des bugs potentiels dans votre application, donc votre plan d’action si vous l’avez pas déjà fait dans la dernière vidéo, téléchargez et installez le framework AngularJS, à travers cette vidéo vous avez vu vraiment un aperçu du potentiel d’AngularJS. Bien évidemment vous savez que les cours développement facile sont toujours orientés très pratiques, il y a toujours besoin d’un minimum de théorie, on s’improvise pas menuisier ou plombier du jour au lendemain même si on fait que la pratique, il y a un minimum de théorie donc là vous avez reçu deux cours théoriques, c’est vrai, c’est de la théorie, c’est important pour vous amener, vous présenter le potentiel d’AngularJS en douceur, et vraiment les prochains tutoriels, vous allez avoir des exemples de code source commentés pour telle ou telle fonctionnalité et pas à pas, vous allez découvrir comment utiliser la puissance du framework AngularJS donc si vous souhaitez des tutoriaux très particulier sur AngularJS, découvrir des fonctionnalités, apprendre à les utiliser dans votre développement, posez simplement vos questions en dessous de cette vidéo, si vous voulez recevoir automatiquement les nouveaux cours AngularJS renseignez le formulaire ci-dessous donc vous recevrez non seulement des cours sur AngularJS et des cours sur d’autres Framework bien évidemment, des cours très complets, maintenant si vous voulez aller beaucoup plus loin, bénéficier de l’expertise développement facile pour vous aider dans vos développements, les codes source etc. vous avez un lien juste au-dessus de moi, vous cliquez simplement dessus et vous serrez redirigés dans une deuxième vidéo ou je vous explique vraiment tout ce que vous allez découvrir, toutes les étapes du développement d’applications complexes, que ce soit des web app, donc des applications compatibles Smartphone, Android iOs, ou des tablettes pareil iPad ou Android, des applications pour le Web donc vraiment vous allez tout découvrir dans cette deuxième vidéo, comment les modèles de conceptions vont simplifier votre développement avec JavaScript, HTML 5, comment créer des architectures de code solide, donc comment utiliser Framework phaser pour créer très facilement des jeux vidéo, compatibles Smartphone et tablettes, vous allez également découvrir les techniques très avancées pour travailler en équipe, pour créer votre code deux à trois fois plus rapidement, bien évidemment l’équipe d’experts développement facile vous accompagne en répondant à toutes vos questions, tout ça c’est dans la deuxième vidéo cliquez simplement sur le lien au-dessus de moi et vous allez accéder à tous ces éléments dans la deuxième vidéo je vous explique dans le détail, je vous dis à très bientôt.

[/ppmtoggle][/ppmaccordion]

Posez vos questions sur le Framework AngularJS et les modèles de conception

Utilisez la zone commentaire pour poser vos questions sur AngularJS 30à l’équipe Développement Facile

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