Comment créer facilement des SPA Single Page Application avec AngularJS

Découvrez une présentation du fabuleux framework Angular JS.

Et avec ce framework, apprenez à réaliser une « Single Page Application ».

Tout est dans la vidéo ci-dessous.

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

Comment créer facilement des SPA Single Page Application avec AngularJS

Bonjour et bienvenu sur Développement Facile.

Voici une nouvelle série de tutoriels consacrés au fabuleux Framework Angular JS, il vous permet d’architecturer toutes vos applications Web que ce soit pour les ordinateurs de bureau, les Smartphones, les tablettes, que ce soit sur Apple ou Android, de structurer vos applications, de donner une architecture très solide, c’est-à-dire Angular JS s’appuie sur plusieurs modèles de conceptions et notamment un modèle de conception très important qui se nomme MVC donc modèle vu contrôleur, donc à travers, ces prochaines semaines, vous allez apprendre à utiliser toute la puissance de Angular JS, de ce Framework, pour simplifier le développement de vos applications, les rendre beaucoup plus dynamiques, grâce notamment, vous savez, je ne sais pas si vous connaissez, si vous avez quelques notions avec Angular JS, ça va vous permettre de séparer la vue, donc l’interface, le modèle avec les données du contrôleur tout ce qui est mise à jour de la vue, envoi des événements, communication entre les vues, entre le contrôleur et le modèle, donc Angular JS ça permet de faire tout ça, il faut savoir que c’est un framework développé par Google et qu’il est vraiment très puissant.

Introduction

Alors déjà je vous ai fait une présentation d’Angular JS, il faut savoir qu’actuellement, depuis quelques années déjà vous vous en êtes sûrement rendu compte, le Web est en constante évolution, les sites Internet sont de plus en plus dynamiques, il y a de plus en plus d’échange entre le serveur d’un côté donc ce qui héberge le site Internet et les interactions de l’utilisateur, il y a des ergonomies sur les sites qui sont de plus en plus poussés, il y a une utilisation de JavaScript de plus en plus importante, quand vous interrogez, vous êtes sur une seule page et vous interrogez le serveur, on ne va pas recharger la page à chaque fois, ça se passe en tâche de fond la communication donc avec Ajax, il y a des librairies de plus en plus performantes qui sont sorties comme jQuery qui vous simplifie le développement Web, avec jQuery, jQuery UI, jQuery mobile vous pouvez créer des interfaces Web très facilement, communiquer le serveur donc soit avec une base de données via l’appel de fichiers PHP ou de fichiers textes, de fichiers XML d’une façon beaucoup plus simplifiée grâce à des Framework très poussés comme jQuery, il y a prototype, il y a Dojo tooltype, énormément de Frameworks et au fur et à mesure une nouvelle génération de sites Internet s’est développée, les applications Web SPA pour Single Page Application, des applications sur une seule page mono Web comme on dit.

SPA – Single Page Application

Qu’est-ce que c’est une application mono page, l’objectif c’est de proposer une application qui s’inspire des applications lourdes classique, c’est à dire vous êtes sur Internet vous avez une application dans votre navigateur qui est identique comme si vous exécutez une application dans votre téléphone portable, ou dans votre tablette, donc des applications qui viennent de l’App Store, Google play, Windows Play, et donc comme je vous l’ai dit, SPA c’est une seule page, on recherche pas la page entièrement mais uniquement des bouts pages en fonction des interactions de l’utilisateur, donc le rôle du navigateur c’est lui qui agit comme l’application et donc il y a une seule page et en fonction de telle ou telle action de l’utilisateur on recharge, on modifie que des parties de page seulement. C’est le navigateur qui gère tous les mécanismes de navigation entre les vues, la récupération des données, les zones de pages à mettre à jour, etc. le navigateur est vraiment très important dans des applications de type SPA. Bien évidemment c’est le serveur qui fournit toutes les ressources, templates de vues, les images, les graphismes, les données et fichiers CSS, fichiers JavaScript, fichiers XML, l’interaction avec une base de données, tout ça et pour accéder à ces données il y a besoin d’une API Web commune donc déjà les SPA ça permet, ça a plusieurs avantages les applications de monopages, il y a énormément d’avantages, déjà il n’y a pas d’applications à installer, donc pas besoin d’applications compatibles iOs Apple, pas besoin d’application compatible Android, pas besoin d’application compatible Windows ou compatible Linux, non, vous avez besoin uniquement d’un navigateur Web qui respecte les standards et c’est tout. Quand l’application est mise à jour donc sur le serveur Web, vous avez pas besoin de faire de à jour, que ce soit sur votre tablette, votre Smartphone ou votre ordinateur non, vous lancez votre navigateur automatiquement vous avez la dernière mise à jour de votre application, donc c’est vraiment l’évolution, l’avenir du Web, même l’avenir des ordinateurs de bureau, il n’y a qu’à voir avec le Google chrome OS, c’est-à-dire c’est comme si vous aviez une application mais tout est en ligne, par exemple vous avez Google Doc, vous créez vos document Word, Excel, même vos pages de présentation comme Power Point directement en ligne avec des applications en ligne, vous n’avez plus d’OS, d’operating system, donc type Windows ou Mac à installer sur votre machine, avec Google chrome OS vous ouvrez votre navigateur et directement vous accédez à toutes vos applications online, c’est vraiment génial.

Exemple de SPA

Qu’est-ce que vous avez comme exemple d’application mono page ? La plus connue c’est bien évidemment Gmail, vous l’utilisez peut-être, personnellement je l’utilise énormément, c’est une application, vous appelez, c’est Gmail.com. je crois de mémoire et à chaque fois la page n’est pas rechargée, vous rechargez si vous cliquez sur les messages, si vous regardez c’est du côté gauche, boîte de réception ça charge uniquement cette zone, vous cliquez sur message envoyé, sa charge uniquement cette cette zone, pour les brouillons pareil, donc c’est vraiment une application SPA qui est mise à jour en fonction des actions de l’utilisateur, vous avez également One Drive de Microsoft donc c’est un service de stockage de fichiers en ligne, vous pouvez naviguer dans les répertoires sans jamais recharger la page, c’est génial, c’est comme si vous naviguiez dans votre Windows, dans votre arborescence des fichiers vous pouvez faire des copier coller, des supprimer fichiers, renommer les fichiers, mais vous rechargez jamais la page, donc OneDrine, DropBox, tout ça c’est des utilisation de SPA extrêmement poussées, ça fait appel à des bibliothèques comme jQuery, Angular JS, JavaScript il est énormément sollicité, on utilise énormément les possibilités du navigateur, vous avez l’application WordPress, tout simplement qui a des, pas entièrement mais certaines fonctionnalités comme le glisser déposer d’images, des petites fonctionnalités comme ça qui fonctionne sous ce principe, d’utiliser fortement le JavaScript vous avez également un jeu de Sudoku en ligne, il suffira simplement de regarder, cliquer sur le lien, Sudoku en ligne sous forme de de SPA tout simplement.

SPA : Le défi technique !

SPA c’est vraiment un nouveau défi technique, le développement d’une application monopage ça représente plusieurs enjeux techniques, comme je vous l’ai dit, il faut obligatoirement utiliser du JavaScript pour mettre en place les mécanismes nécessaires au fonctionnement d’une SPA, d’une page monopage, la navigation restant sur la même page, l’assemblage des données et les templates de vues, ça demande énormément d’utilisation de JavaScript donc de communication avec le navigateur, tout ça doit être très rapide, JavaScript il a des contraintes très fortes, déjà le développement, il a pas le langage de programmation orientée objet, il faut le simuler on peut un peu coder tout n’importe comment avec JavaScript donc faut vraiment une méthode, la méthode développement facile, une méthode qui vous permet de vous orienter pour créer des applications, des architectures très solides, donc pour aider les développeurs dans la création de ce type d’applications, il y a plusieurs Framework qui ont été créés, et notamment Angular JS qui est l’un des plus populaires et des plus prometteur, et en plus c’est Google, le géant Google qui est derrière Angular JS, vous pouvez l’utiliser gratuitement, il est très performant.

Votre plan d’action !

Vous pouvez commencer par télécharger et installer le framework Angular JS, il y a le lien juste en dessous de cette vidéo, vous l’installez, vous le téléchargez, vous regardez un petit peu le site, il est en anglais bien évidemment c’est pour ça que je fais tous ces tutoriels en français pour vous aider, les prochains tutoriels justement seront consacrés à l’utilisation, à l’installation de framework Angular JS, vous allez apprendre à utiliser tout le potentiel Angular JS justement pour aller plus loin dans la création de vos applications, créer des applications SPA, c‘est vraiment l’avenir du Web, donc j’insiste énormément dessus, si vous avez des questions ou si vous voulez apprendre certaines techniques particulières, certaines fonctionnalités avec Angular JS, posez simplement vous questions, là juste en dessous de cette vidéo, l’équipe développement facile les lira, me les transmettra et je créerais les tutoriels dont vous avez besoin pour progresser dans votre développement d’applications Web pour mobile, Smartphone, et tablette.

En attendant il y a un lien cliquable, vous pouvez vous inscrire en renseignant soit le formulaire juste en dessous de cette vidéo, vous recevrez automatiquement les prochains cours gratuitement, c’est tout simple, par contre si vous voulez aller beaucoup plus loin, par exemple il y a l’équipe d’experts développement facile qui sera à votre entière disposition pour répondre à toutes vos questions que ce soit sur Angular JS, le développement d’applications compatibles Smartphone, tablette, le Web, la création de Web App, donc apprendre à créer deux à trois fois plus rapidement avec les modèles de conceptions, à utiliser des Framework très puissants comme phaser, Angular JS, tout ça pour créer une architecture d’applications très solide, vous cliquez simplement sur le lien là juste au-dessus de moi, vous serez redirigés dans une deuxième vidéo ou je vous explique tous de A à Z, tout ce que vous allez découvrir, que vous allez apprendre, tout l’accompagnement dont vous bénéficiez pour créer simplement, très facilement en équipe des applications Web très performantes, des Web App donc compatibles Smartphone, que ce soit sur iOs Apple ou Android, les tablettes pareil que ce soit sur Apple ou Android, tout cela est dans la deuxième vidéo cliquez simplement sur le lien au dessus de moi, je vous retrouve tout de suite dans la deuxième vidéo, à bientôt.

[/ppmtoggle][/ppmaccordion]

Téléchargez Angular JS

Cliquez ici pour télécharger et installer AngularJS

Posez vos questions sur les fonctionnalités de Angular JS

Utilisez la zone commentaire pour poser vos questions sur le framework Angular JS, l’Équipe Développement Facile vous répondra.