Après les premières vidéos de présentation de AngularJS vous allez rentrer dans le vif du sujet en créant une première application et découvrir la puissance ce framewok.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment installer Angular JS et créer rapidement votre application avec AngularJS
Bonjour et bienvenu sur Développement Facile.
Angular JS – Création d’une application
Dans cette nouvelle vidéo vous allez continuer à découvrir et à apprendre à utiliser le Framework AngularJS, maintenant, comme promis vous allez rentrer dans la pratique et créez votre première application avec ce Framework fabuleux AngularJS.
Vous allez voir, on vous allez y aller petit à petit je vais tout vous expliquer vous aller voir un exemple de code source détaillé, expliqué il n’y a aucun problème.
Déjà je ne sais pas si vous l’avez fait ou pas donc il suffit de télécharger et d’installer AngularJS depuis le site officiel donc je vous rappelle l’URL, normalement vous avez dû le faire en regardant les deux derniers cours, donc je vais passer assez vite là-dessus.
Ensuite pour l’intégrer dans le code HTML de votre page Web vous avez d’autres solutions, soit vous hébergez le fichier AngularJS sur votre serveur et donc vous mettez le lien vers votre serveur tout simplement, le lien JavaScript, ou alors vous utilisez le CDN de Google. Je vous conseille franchement d’utiliser le CDN de Google si vous pouvez déjà vous aurez toujours un fichier à jour, un fichier optimisé en poids, donc un fichier JavaScript minimisé, et vous profitez de la puissance des serveurs Google donc avec des temps de réponse extrêmement rapides et vu que de plus en plus de sites utilisent les serveur CDN de Google, si l’utilisateur a été sur un autre site qui utilise un serveur CDN de Google il aura déjà Angular JS dans le cache, il arrive sur votre site, votre site se chargera encore plus rapidement parce que le fichier sera déjà dans le cache.
Vous avez l’URL pour utiliser Angular JS en version 1.3.4 donc au moment où vous regarderez cette vidéo, il y aura peut-être eu des nouvelles versions d’AngularJS de sorties, il suffira de changer le numéro de version c’est aussi ça, là vous utilisez la librairie de Google, si vous vous rendez sur le site, je n’ai pas l’adresse en tête, mais vous tapez dans le moteur de recherche Google CDN Angular JS vous avez le lien, le code directement à rajouter.
Champ d’action Angular JS
Déjà vous allez dans votre code HTML définir le champ d’action d’AngularJS, vous avez une partie HTML où vous définissez certaines balises, des attributs supplémentaires, pour dire AngularJS tu dois faire le traitement dans ces balise et vous avez une partie JavaScript qui lui, avec le contrôleur, le modèle, contenir ces éléments et communiquer les différents éléments aux vues, ce sont vos fichiers HTML, en gros, vous avez un attribut ng-app qui va vous permettre de spécifier une partie de la page HTML qui est gérée par AngularJS, en principe vous associez cet attribue à la balise body donc ça prend tout votre code HTML mais vous pouvez très bien associer cet attribut à un ensemble de balises div donc une zone, une certaine partie de votre interface HTML, qui est gérée par AngularJS et le reste vous pouvez le gérer avec un autre framework il n’y a aucun problème, ça c’est à vous de voir en fonction de votre application tout simplement.
Champ d’action Angular JS
Voici un exemple de code source très simple, donc dans body vous avez une zone qui n’est pas gérée par AngularJS, après vous avez div avec l’attribue np-app mon application donc dans cette div, c’est une zone gérée par AngularJS c’est aussi simple que ça vraiment quand je vous dis AngularJS il est facile à utiliser avec la bonne méthode il est vraiment facile à utiliser.
Une application Angular JS
Le modèle il est représenté par un objet ou une valeur JavaScript, donc dans le cadre de ce cours vidéo, on va créer un objet var user avec une propriété nom la valeur Mathieu, une propriété site la valeur développement facile donc vraiment modèle de données très simple, le contrôleur c’est aussi une classe JavaScript ce que je vous ai dit au début de ce cours, la page HTML c’est plus votre vue, et fichier JavaScript c’est modèle et contrôleur et donc il prend en paramètre l’objet scope, ça vous permet de simuler des éléments de la vue très simplement, dans la vue vous aurez différentes variables que vous pourrez renseigner en modifiant votre modèle, avec le contrôleur et scope, vous modifiez votre modèle c’est automatiquement répertorié dans votre vue, dans votre affichage de votre page HTML, vous avez un exemple de code source bien évidemment dans ce cours, on va rentrer plus en détail dans l’exemple de code source, on va prendre un cas très complet, donc comme je vous l’ai dit les propriétés, les fonctions ajoutées par le contrôleur à l’objet scope sont accessibles par la vue, c’est-à-dire dans votre page HTML, vous allez avoir des variables entre double cote avec le nom, donc user.name, user.site et dès que le modèle sera renseigné pour être modifié, ce sera mis à jour dans votre page HTML c’est aussi simple que ça, donc la déclaration d’un contrôleur se fait en utilisant un module Angular JS qui va représenter votre application, donc vous déclarez votre application. Angular.Module votre application et après .Contrôleur ça vous permet de déclarer votre contrôleur, o contrôleur c’estce que vous allez retrouver dans un attribut de votre page HTML, contrôleur single, c’est la fonction JavaScript qui est associée au contrôleur tout simplement. Comme je vous l’ai dit, la vue c’est une page HTML qui vous permet d’afficher les données du modèle.
Voici un exemple de vue, de code HTML que vous avez là, vous avez ng controleur sur votre div, donc l’attribut ng contrôleur pour dire que le contrôleur, son champ d’action c’est cette div là, et vous avez entre double cote user.nom, user.site, les données de votre modèle qui seront affichés dans votre page HTML tout simplement.
Comme je vous l’ai dit, c’est ce qui est écrit, la syntaxe double crochets, ça créé un lien entre votre vue et votre modèle et donc c’est du DATA building donc la mise à jour de données automatiquement si le modèle la vue est mise à jour, si la vue change le modèle est mis à jour, pouvez faire plusieurs types de binding, c’est que vous allez voir prochainement, donc le binding one way, à chaque modification de la propriété par le contrôleur, la vue est automatiquement mise à jour, mais si vous mettez à jour la vue, le modèle ne sera pas mis à jour dans le one way.
Exemple pratique Angular JS
Vous avez d’autres types de binding que je vous présenterai dans la prochaine vidéo, tout de suite vous allez passer à un exemple concret de code source pour voir va le code JavaScript d’un côté le code HTML de l’autre et voir le résultat donné, donc voici le code source pour créer votre première application avec AngularJS la première chose à faire, c’est d’inclure le fichier du Framework AngularJS la version 1.3, donc c’est la version minimisée donc il est complètement illisible ce fichier donc la version minimisée ça permet d’optimiser les temps de chargements que le fichier JavaScript se charge plus rapidement sur le navigateur du client, donc c’est pour ça qu’on utilise celle-là, vous pouvez utiliser la version CDN comme je vous ai expliqué dans la vidéo ensuite la classe main, le fichier main, on désactive le cache qui va permettre de contenir le code d’exécution AngularJS, il est très court c’est votre première application, une application très simple, qu’est-ce que vous faites ? Là vous avez la zone qui n’est pas gérée par AngularJS et là la zone qui est gérée par AngularJS, pourquoi ? Rappelez-vous dans le cours avec l’attribut ngv app AngularJS toute cette zone est gérée par AngularJS, vous avez le contrôleur ici, ng-controleur o contrôleur que vous retrouvez appeler AngularJS o contrôleur ici, et là les variables donc l’objet user.La propriété name, et user .La propriété site que vous appelez que AngularJS va automatiquement remplacer par les variables adéquates, donc là vous avez votre module ou tout simplement vous déclarez l’application AngularJS ici, o contrôleur ici, et vous appelez la fonction contrôleur single, il va renseigner l’objet que la propriété name Mathieu, la propriété site développement facile c’est aussi simple que ça, et donc quand vous effectuez l’affichage, ça mettra hello Mathieu du projet développement facile, donc hello Mathieu ça a été remplacé ici, du projet le site développement facile, vous avez vu à quel point AngularJS est très abordable, vraiment très facilement en quelques lignes de code JavaScript, là il y en a 3 lignes de code JavaScript, 3 lignes de code HTML, 2 attributs et la ligne et c’est fait, votre application est faite.
Votre plan d’actions !
Votre plan d’action déjà commencez par télécharger le code source complet commenté sous cette vidéo, si vous avez des questions posez-les également sous cette vidéo, l’équipe développement facile vous répondra directement, ou alors me les transmettra et je vous répondrais, et vous avez sous cette vidéo un formulaire, vous renseignez, le formulaire ci-dessous avec votre nom et votre adresse e-mail et vous recevrez les prochains cours, donc dédiés par exemple au framework phaser, AngularJS, le développement d’applications sur mobiles, sur smartphones, formulaire juste en dessous, par contre si vous voulez aller beaucoup plus loin, cliquez sur le lien là juste au dessus de moi, vous serez dirigé vers une deuxième vidéo, dans la deuxième vidéo vous allez découvrir déjà comment créer des architectures d’applications très solides, robustes et facilement évolutives, vous apprendre à travailler en équipe pour créer vos applications performantes, recréer des applications qui s’exécutent à la fois sur les Smartphones, que ce soit Apple ou Android et sur les tablettes, que ce soit également Apple ou Android donc des Web App, vous allez apprendre à développer cela, vous allez découvrir la puissance, les stratégies utilisées par les experts en développement, par exemple le framework phaser, des techniques avec le Framework AngularJS tout ça pour simplifier littéralement votre développement, je ne vous en dit pas plus, tout est dans la deuxième vidéo, tout est expliqué de A à Z en détail donc cliquez sur le lien juste au-dessus moi, je vous retrouve tout de suite dans la deuxième vidéo à tout de suite.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple d’application AngularJS
Retrouvez le code source commenté de l’application AngularJS vue dans la vidéo
Téléchargement du code source 03 application angularJS
