Aller au contenu

Les bases essentielles à connaître pour utiliser AngularJS : les modules, le controleur, les vues

Découvrez les bases du framework AngularJS.

Dans ce cours vous verrez d’abord la partie théorique avec les modules et les controllers  puis un exemple complet de code source.

Tout est dans la vidéo ci-dessous.

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

Les bases essentielles à connaître pour utiliser AngularJS : les modules, le controleur, les vues

Bonjour et bienvenu sur Développement Facile.

 

Voici un nouveau cours consacré au fabuleux Framework Angular JS, dans le cours précédent vous avez vu justement, vous avez appris à créer votre première application avec Angular JS qui est, moi j’adore ce Framework développé par Google, dans ce cours vous allez découvrir les bases, il y aura une partie théorique avec les bases, bases de fonctionnements, ce que vous pouvez faire ou pas avec Angular JS, et une grosse partie pratique avec un exemple de code source commenté et des changements pour que vous voyez les modifications tout ça en direct.

 

Les modules Angular JS

 

Alors les modules donc dans Angular JS vous avez une notion de module qui vous permet d’encapsuler les différents éléments votre application Angular, vous avez un contrôleur, plusieurs contrôleurs, des vues, des modèles, plusieurs modèles en fonction de la taille de votre application donc la création d’un module s’effectue tout simplement avec la méthode module de l’objet Angular, donc ça vous permet de créer un module donc le code Angular.module le nom o application et des paramètres si vous souhaitez en transmettre ou pas, chaque élément de l’application, votre application est déclarée dans un module que ce soit l’application, le contrôleur, le modèle etc. et vous avez plusieurs méthodes notamment pour déclarer un contrôleur la méthode contrôleur, vous avez la méthode Factory également.

 

Le suivant code suivant vous voyez qui s’affiche à l’écran, ça va vous permet de créer un module qui se nomme o application avec la déclaration nommée o contrôleur donc on utilise la méthode Angular.module pour créer votre application et après la méthode .Contrôleur, o contrôleur ce sera dans la div ng-controller donc dans une div dans votre code HTML tout simplement avec controller single, c’est dans une fonction JavaScript, voilà c’est ce qui s’affiche à l’écran j’ai pris un peu plus de temps avec -App pour associer le contrôleur côté JavaScript et coté vue, en fait l’affichage des éléments ou traitement des éléments de la vue tout simplement, donc voilà un exemple du chargement du module application, de code, HTML donc ngv-app vous pouvez le mettre sur n’importe quel balise HTML généralement on le met sur la balise body ou une balise div, comme je vous l’ai dit dans la dernière vidéo, c’est en fonction de vos besoins, c’est à vous de voir.

 

Un controleur Angular JS

 

Le contrôleur lui, va fournir les données, et il va réagir en fonction des actions que l’utilisateur a effectué sur les vues, donc dans Angular JS un contrôleur s’occupe d’initialiser l’état du modèle, il expose le modèle et les fonctions à la vue via l’objet scope, avec l’objet scope vous mettez à jour les données du modèle et ensuite ces informations sont affichées dans votre vue à l’endroit où vous le souhaitez, il y a une réaction aux changements avec la notion de Angular JS de binding donc là vous avez un exemple de code source de contrôleur. Scope.config, par exemple vous récupérez une configuration stockée dans le stockage local HTML 5 scope.config c’est une donnée, scope.event vous pouvez ajouter des événements, enlever des évènements toujours c’est des données donc vous construisez l’intelligence, la logique de votre application, ensuite ng.module Angular.module application, vous créez votre application, .Contrôleur vous créez votre contrôleur, rappelez-vous dans Angular JS il y a le modèle de conception IOC, Inversion On Contrôle, vous avez juste à dire, voyez le code source, c’est.Contrôleur, o contrôleur, contrôleur single donc vous donnez la fonction à utiliser, les différents paramètres et IOC ça va s’occuper d’instancier votre contrôleur avec les paramètres que vous avez définis et vous renvoyez une instance, derrière vous pouvez utiliser scope pour gérer vos données donc c’est la puissance Angular JS.

 

Pour conserver des contrôleurs simples et maintenables, vous avez le choix, soit vous créez un contrôleur par vue, donc vous avez différentes zones dans votre page HTML, dans votre application SPA, plusieurs zones, vous pouvez créer un contrôleur par zone, si vous avez une zone très complexe vous pouvez même créer plusieurs contrôleurs pour cette zone par fonctionnalités en fait, ça, c’est votre expérience de développeurs qui vous parlera et surtout la complexité de votre application, dans une application comme Gmail, il n’y a pas seulement, je pense qu’il y a plus de contrôleurs, il y en a un pour cette zone et peut être deux, trois pour cette zone-là, il faudrait voir le code source c’est comme ça que je ferai.

Par exemple si vous avez une application Web, une page Web classique vous avez un contrôleur pour l’entête, un contrôleur pour une zone de liste, un contrôleur pour une zone de détails et un contrôleur pour un pied de page de défini, donc des contrôleurs qui interagissent avec les différentes vues, et qui mettent à jour les données du modèle.

 

Exemple pratique d’Angular JS

 

Maintenant voici un exemple pratique de code source vous allez découvrir la création de plusieurs contrôleurs, de plusieurs zones, des contrôleurs qui vont gérer plusieurs zones dans la vue.

C’est partit.

Dans ce code source vous allez un petit peu plus pousser l’utilisation d’Angular JS petit à petit vous montez en puissance, je passe vite l’inclusion du framework Angular JS, le fichier JavaScript main pour gérer le contrôleur et le modèle Angular JS, là c’est une zone qui n’est pas gérée par Angular JS et là, la zone est gérée par Angular JS toujours avec ng-app, ça c’est expliqué dans le dernier cours, vous avez votre contrôleur main contrôleur, la vue view contrôleur ici avec page et title, et o contrôleur user.name. Un contrôleur principal, un autre contrôleur et un troisième contrôleur avec des variables différentes à afficher donc si vous avez compris le principe du précédent cours avec Angular JS celui-là va être très simple, vous créez votre application, application Angular JS ici, ensuite main contrôleur, vous appelez la fonction main contrôleur qui est ici et vous la reliée à votre code HTML ici, view contrôleur est relié ici et avec cette fonction qui est ici, tout simplement et ensuite vous avez o contrôleur qui est relié tout simplement ici, lorsque vous créez le module o contrôleur et vous appelez contrôleur single donc soit vous appelez la fonction JavaScript et la partie attribut HTML de la même façon ou vous pouvez carrément donner un nom différent garder l’attribut ng contrôleur o contrôleur et la fonction JavaScript s’appelle contrôleur single, ensuite vous avez différentes variables à renseigner, c’est exactement le même principe, dans main contrôleur vous pouvez accéder au title, pourquoi ? Dans le cours je vous ai expliqué la notion d’héritage, lui c’est le contrôleur père qui englobe tous les enfants ici donc il peut très bien accéder à ces trois variables à toutes ces variables et les modifier, ce qui fait directement application développement facile, ensuite vous avez view contrôleur qui est ici, il modifie page Tittle donc rien d’extraordinaire et le contrôleur single qui modifie tout simplement l’objet user après bien évidemment comme je vous l’ai expliqué dans le cours, vous pouvez ajouter dans la configuration enlever des objets de configuration, mettre une fonction quand la configuration est terminée, récupérer une configuration à partir du stockage HTML 5 local donc ça c’est vraiment en fonction de votre application que vous allez gérer tout cela, soit dans le contrôleur main contrôleur ou dans le contrôleur single, suivant l’apporté que vous souhaitez avoir avec votre configuration, contrôleur single il peut accéder uniquement à cette variable sinon il est obligé d’utiliser le parent pour remonter plus haut, alors que main contrôleur peut accéder à toutes les variables, comme je vous l’ai dit, l’intérêt c’est de compartimenter votre application avec plusieurs contrôleurs qui gèrent plusieurs zones de votre page HTML, c’est aussi simple que ça, donc comme résultat vous avez application développement facile ici, utilisation Angular JS ici et hello Mathieu du projet développement facile. Pourquoi il y a des CSS différents ? Justement la réponse est dans la question, on a utilisé des feuilles de style CSS pour créer un affichage différent donc title est juste remplacé par la donnée, la valeur de la donnée, donc application développement facile et page Tittle utilisation d’Angular JS et ensuite vous avez le style CSS qui s’applique à la balise H1 et à la balise H2, d’où un affichage différent, une vue, une interface différente donc voilà un nouvel exemple de code Angular JS vous voyez que c’est très simple je ne vais pas dire que c’est enfantin mais pour l’instant c’est très abordable.

Votre plan d’action !

 

Alors votre plan d’action de comme d’habitude vous trouverez le code source complet en téléchargement sous ce cours vidéo, si vous avez des questions posez-les simplement sous cette vidéo, l’équipe développement facile vous répondra avec grand plaisir, et maintenant si vous voulez recevoir tous les cours que ce soit sur phaser, Angular JS donc gratuitement il y a un formulaire sous cette vidéo, il y a un formulaire qui est apparu au-dessus de cette vidéo il suffit de renseigner votre nom, votre adresse e-mail et vous recevrez tous ces cours dans votre boîte mail, et si vous voulez aller beaucoup plus loin il y a un lien au-dessus de moi, il suffit de cliquer sur ce lien ou sur cette image et là vous avez allez être dirigé dans une deuxième vidéo ou vous allez découvrir de A à Z, étapes par étapes comment créer des applications performantes, des Web app qui soient compatibles à la fois, donc vous codez une seule fois et vous déployez votre application sur tous les périphériques, Smartphones, Aplle ou Android, tablette Apple ou Android, même Windows phone et le Web donc en codant une seule fois donc vous allez découvrir par exemple le Framework phaser, Ionic framework, des stratégies très avancées de développement et en plus l’équipe développement facile répond à toutes vos questions c’est-à-dire que si vous vous demandez comment implémenter tel ou tel exemple de cours dans votre application, vous avez des difficultés vous poser une question, vous joignez votre code source l’équipe développement facile corrige votre code source, vous le renvoi corrigé et vous donne des informations supplémentaires, cliquez simplement sur l’image au-dessus de moi on se retrouve dans la deuxième vidéo à tout de suite.

[/ppmtoggle][/ppmaccordion]

Code source de l’exemple de code sur les bases d’AngularJS

Retrouvez le code source commenté sur les bases d’angularJS

Téléchargement du code source 04 bases angularJS

Cliquez ici pour télécharger le code source 04 bases angularJS

Posez vos questions sur les modules et les controllers du framework AngularJS

Utilisez la zone commentaire pour poser vos questions sur l’implémentation du modèle de conception dans 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 >>