Dans ce deuxième cours dédié aux bases du framework AngularJs, apprenez à utiliser le système de scope et le binding.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment utiliser efficacement les scopes, l’héritage et le binding avec AngularJS
Bonjour et bienvenu sur Développement Facile.
Encore un nouveau cours dédié au fabuleux framework de Google Angular JS, dans le cours précédent vous avez commencé à découvrir et à utiliser surtout les bases d’ Angular JS, là vous allez aller plus en avant, en continuant, c’est la deuxième partie du cours dédié aux bases Angular JS, comment l’utiliser dans des exemples vraiment très pratiques.
Scopes d’Angular JS
Là vous allez découvrir le système de scope Angular JS, en fait vous avez un système de scope, donc plusieurs scopes, plusieurs niveaux de « this » de scope, vous l’appelez comme vous voulez et donc ça vous permet de gérer les données, modifier les données de votre modèle et accessoirement de modifier l’affichage de votre vue, des scopes ça expose des données aux vues.
Le scope est passé en paramètres de chaque contrôleur, et vous pouvez ensuite gérer les propriétés ou les fonctions qui sont accessibles chez la vue grâce à ce paramètre scope.
Donc comme je vous l’ai dit les scopes s’organisent selon une structure hiérarchique, ils possèdent une relation d’héritage, vous avez le scope parent et des scope enfants. Juste en dessous, bien évidemment du scope enfant vous pouvez remonter au scope parent si vous avez besoin de certaines données et les scopes enfants héritent des propriétés des scope parents, c’est normal c’est de l’héritage, si vous ne connaissez pas l’héritage, il y a des cours consacrés à la notion d’héritage sur développement facile, donc il y aura un lien sous cette vidéo vers un cours dédié à l’héritage. Chaque application Angular JS a un scope global, le rootScope, c’est le root, il est là et ensuite vous avez les scopes enfants donc le root scope est déclaré au niveau de l’attribut NG – app. Comme je vous l’ai dit tous les scopes enfants ont accès aux root scope, c’est que vous allez voir à travers un exemple de code source.
Comme je vous l’ai dit, pour chaque contrôleur, Angular JS va créer un scope et chaque scope a accès aux scope parents, ce qui fait que vous accédez aux scopes parents vous pouvez bien évidemment accéder aux propriétés et aux fonctions de ces scopes, dans les vues concernées, voici un exemple d’utilisation d’un contrôleur avec un scope donc ça vous permet de modifier les données, classique, exemple de code source, vous l’avez un petit peu vu dans le dernier cours donc je vais aller assez vite sur cette partie.
Vous avez la notion d’héritage, vous avez title dans le code source title qui est au niveau de ng-app application et ng controller o contrôleur title, et en dessous le contrôleur avec retitle, c’est à dire vous aurez deux fois le même titre dans l’application, mais c’est vous montrer la notion d’héritage et page title. Ils sont dans le deuxième div ng contrôleur o contrôleur et l’enfant du contrôleur o contrôleur title.
La propriété dollars parents d’un scope permet d’accéder aux scope parents, vous utilisez dollars parents ici dans votre o contrôleur pour activer o contrôleur principal, voilà vous avez l’exemple de code source qui s’affiche, dollars scope.Dollars parents.title, ça va vous permettre d’accéder donc du scope enfant de remonter au scope parent et de modifier dans les données le titre directement.
Binding Angular JS
Vous avez les notions de binding dans Angular JS sont très importantes, ça permet si il y a une donnée qui est modifiée dans le modèle, de mettre à jour la vue, et inversement s’il y a une donnée dans la vue qui est mise à jour par l’utilisateur, de mettre à jour le modèle, les données simplement donc la notion de binding ça permet de synchroniser une donnée du modèle et l’affichage de cette donnée, d’un côté modèle, d’un autre côté la vue, avec le binding ça permet de synchroniser les deux, qu’elles correspondent, non la vue ne gère pas les données, ne stock pas les données c’est bien le modèle par contre il faut qu’elles communiquent, une vue et le modèle, donc il y a trois de binding dans Angular JS, dans le dernier cours, ou juste celui d’avant, vous avez vu la notion de binding one way, c’est-à-dire que lorsque le modèle est mis à jour la vue est automatiquement mise à jour, ça ne fonctionne pas dans l’autre sens, dans un seul sens, modèle vers la vue. Le mode binding to web, vous avez pareil modèle et mise à jour, la vue est mise à jour mais inversement lorsque l’utilisateur modifie une valeur d’un champ, d’un formulaire html donc dans la vue par exemple, le modèle est mis à jour donc ça communique dans les deux sens entre la vue et le modèle, et vous avez le modèle one Time vous avez une donnée dans le modèle dans la vue, le modèle est mise à jour, la vue est mise à jour, mais ça communique une seule fois, vous pouvez désactiver la relation de binding, si vous remodifiez modèle le modèle, la vue ne sera pas remise à jour, ça peut être très pratique ces trois principes de binding, ça répond à la majorité de ce que vous pourriez avoir besoin dans une application, donc en fonction de la communication entre le modèle et vos vues que vous souhaitez vous choisissez un certain type de binding.
Vous l’avez vu dans les cours précédents, pour afficher la valeur d’une propriété du modèle dans la vue, vous utilisez la syntaxe double cote le nom de votre propriété, dans la vue quand Angular JS va interpréter le code HTML, il va voir ce marqueur il va le remplacer par la valeur du modèle tout simplement. Vous avez l’attribut ng-bind, qui permet aussi d’afficher une donnée en renseignant le nom de la propriété du modèle à afficher comme valeur de l’attribut. A l’affichage en fait, si vous utilisez l’exemple double crochet value entre les balises p, il y a une passe qui est faite, votre page HTML est affichée dans un premier temps c’est extrêmement rapide, l’utilisateur ne le verra pas, mais ça se passe comme ça, votre page HTML est affichée dans un premier temps il y a écrit double cote value, ensuite Angular JS refait une passe et met à jour les données, alors que si vous utilisez l’attribut ng-bind value, la première passe, le paragraphe sera vide, ça n’apparaitra pas, et quand Angular JS va refaire une passe, il va faire apparaître votre balise donc ça évite d’avoir dans des applications complexes, à un moment où l’utilisateur voit des value user.nom.site, des choses bizarres d’utiliser ng bind – attribut comme ça utilisateur il voit, vous pourrez mettre chargement en cours, dès que c’est fini, vous faites afficher votre interface.
C’est que je viens de vous dire, je viens de vous expliquer le fonctionnement, tout simplement donc je vous laisserai lire le texte, c’est ce que je viens tout juste de vous expliquer.
Les deux syntaxes permettent de faire du binding one way, les deux syntaxes que vous avez eu soit en mettant la propriété directement entre des balises soit en utilisant l’attribut ng-binding, donc si une modification est effectuée par le contrôleur sur le modèle cette modification est automatiquement répercutée sur la vue, binding one way, et si la valeur est modifiée au niveau de la vue elle n’est pas prise en compte par le modèle, donc ça c’est que vous avez vu, le binding one way c’est idéal si vous souhaitez afficher une donnée du modèle sans qu’elle soit modifiable par l’utilisateur, c’est vous qui modifiez la donnée du modèle, dès qu’elle est modifiée, elle est remise à jour dans la vue mais si par exemple si un formulaire utilisateur modifie cette donnée, elle ne sera pas modifiée dans le modèle, c’est du binding one way, une seule route de communication dans un seul sens tout simplement.
Exemple pratique Angular JS
Voici un exemple pratique, comme ça je vais vous montrer en direct sur un exemple de code source comment fonctionnent les différents types de binding, ça va mieux vous parler.
Voici l’exemple de code source qui accompagne ce cours sur les scopes Angular JS, c’est à dire comme le code source précédent vous avez votre zone, donc là vous avez une zone supplémentaire de connexion c’est pour vous montrer un petit peu ce qu’il est possible de faire c’est un petit aperçu du prochain cours, surtout ce qui vous nous intéresse, c’est cette zone ng bind value value qui est bien remplacée par une valeur affichée via Angular JS, qui est renseignée ici, la value elle est renseignée ici, voilà si je rajoute ça, que je recharge la page, vous avez deux façons d’afficher une valeur avec Angular JS soit entre double crochets, double cotes, soit avec ng bind et value avec les avantages par rapport l’une et l’autre bien évidemment, et vous avez la possibilité de remonter aux scopes parents aussi, ce que vous avez vus dans le cours donc ça, ça ne change pas vous connaissez, par contre ce qui est intéressant c’est de remonter aux scopes parents login erreur là vous avez login user qui est appelé ici, lorsque l’utilisateur soumet le formulaire, vous appelez login user et vous remontez aux scopes parents pour récupérer la valeur valide login qui est ici donc vous voyez bien que ce n’est pas le même scope, il faut remonter aux scopes parents d’où la notion de dollars parents, dollars scope, dollars parents, pensez toujours à l’héritage vous êtes ici login user, dans ce contrôleur login contrôleur ici, et vous avez accès à ces variables-là, par contre voulez modifier login valide, vous remontez d’un cran pareil pour login erreur et c’est exactement ce qui se passe, dollar scope.Dollars parents login valide dollars scope dollars parents login erreur, ça, ça ne change pas vous avez l’habitude, vous l’avez vu dans le cours précédent, création du module Angular JS, création des contrôleurs, on créé les contrôleurs ng contrôleur pareil l’application Ng application ça vous avez l’habitude, je n’y revient pas, ce qui est vraiment important dans ce code source, c’est ng bing value deux façons de remplacer des valeurs avec Angular JS, donc qui est renseigné ici, une seule fois et ça remplace automatiquement les deux valeurs, et le faite d’accéder aux parents pour afficher ou non la bonne propriété donc par exemple je vais effectuer l’affichage de login error volontairement donc ça va passer par ce code sur le submit, ici identifiant mot de passe oublié, donc je rentre des identifiants tout simplement se connecter, erreur de connexion vérifier votre mot de passe, parce qu’on est bien passé par le scope parents, tout simplement, une fois que vous avez compris la logique d’ Angular JS, vous allez voir c’est très simple d’utiliser tout le potentiel de ce Framework.
Votre plan d’action !
Alors maintenant c’est à vous de jouer comme d’habitude vous avez le code sont disponible sous ce cours vidéo, vous pouvez le télécharger, il est commenté, le réutiliser dans vos applications si vous avez des questions posez les directement sous ce cours vidéo l’équipe développement facile vous répondra tout en détail pour que vous puissiez comprendre le principe de fonctionnement et si vous voulez recevoir tous les cours, il suffit de renseigner le formulaire juste en dessous de cette vidéo avec votre prénom votre adresse mail, vous recevrez des cours sur le framework phaser, sur Angular JS, tout ce qui est nécessaire pour créer des applications performantes et si vous voulez aller au niveau supérieur découvrir la création avancée des stratégies très avancées dans la création d’applications performantes donc cliquez simplement sur le lien, l’image là juste au-dessus de moi, vous serez redirigé vers une deuxième vidéo ou je vous explique tout, par exemple comment créer des architectures d’applications solides, comment développer des webapps en codant une seule fois et en déployant sur toute les plate-formes, que ce soit des Smartphones, Apple ou Android, des tablettes Apple ou Android, ou sur le Web donc vous allez découvrir les Framework, les stratégies de développement qui permettent ça et en plus cerise sur le gâteau l’équipe développement facile sera aux petits soins avec vous, c’est-à-dire si vous avez un exemple de cours, de code source et une fonctionnalité que vous souhaitez implémenter et que vous n’y arrivez pas il suffira de joindre votre code source, l’équipe développement facile regardera, corrigera votre code source et vous le renverra avec des explications supplémentaires pour que vous soyez autonomes, donc les experts développement facile vous accompagnent dans votre apprentissage de la méthode développement facile, donc tout est expliqué dans la deuxième vidéo cliquez simplement sur le lien, 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échargez l’exemple d’utilisation du $scope de AngularJS
Retrouvez le code source commenté que vous avez vu dans la vidéo.
