AngularJS: Créer une Web App en 5 minutes
1. Introduction :
Que vous soyez un débutant et vous commencez à créer votre propre site web ou un professionnel souhaitant apprendre à créer une application avec des interfaces performantes et ergonomiques, ce tutoriel est spécialement conçu pour vous aider à apprendre, en 5 minutes, les bonnes pratiques pour créer des applications web aussi rapidement et efficacement que possible.
2. Est-il facile de créer ma propre Web App?
Aujourd’hui, les sites où le JavaScript ne sert qu’à faire disparaître une balise <p> ou changer le style d’un <div> se font de plus en plus rares et sont pour la plupart des sites éditoriaux. On voit de plus en plus apparaitre des sites web poussés, et certains ressemblent à des applications bureau avec une ergonomie simple et une grande facilité de prise en main.
Heureusement, les besoins ont évolué, mais les outils aussi. jQuery qui, je pense, parle à tout le monde, se présente plus sous la forme d’une libraire, alors qu’AngularJS est un vrai framework : il va structurer votre code et vous imposer une architecture.
3. Site Web vitrine
Une entreprise locale, ACME, nous a demandé de créer son nouveau site www.acme.fr. Les zones de base du site seront :
- Pages
- Home
- Services
- Pricing
- About
- FAQ
- Contact
- Blog
- List of Posts
- View Post
Pour la construction d’un site Web statique de base, nous allons mettre en œuvre un thème de site Web gratuit basé sur Bootstrap . Pour cet exemple, nous allons utiliser, http://startbootstrap.com/modern-business . Nous devons télécharger le modèle de site Web et le décompresser.
La structure du fichier d’origine est comme on pourrait s’y attendre dans un tel modèle de site Web. Nous avons un dossier « css » et un dossier « js » et tout un tas de fichiers html.
Voici comment la page index.html du modèle de site gratuit s’affiche dans le navigateur:
4. AngularJS, c’est quoi exactement?
AngularJS a été créé en 2009 par une équipe de Googlers. En quelques années, il est devenu l’un des frameworks JavaScript les plus appréciés de la communauté pour créer des applications Single Page.
AngularJS est un framework côté client, développé en JavaScript, ce qui est obligatoire pour créer une application moderne à page unique (ou même un site internet). C’est un grand bond vers le futur de HTML et vers ce que HTML5 apporte. C’est également un grand bol d’air frais dans le monde des applications web modernes.
AngularJS est facile à implémenter
À la différence de jQuery, AngularJS est un véritable framework, il « impose » donc une certaine structure dans le code. C’est un framework MVC (Model View Controlleur) et aussi parfois appelé un framework MVW (Model View Wathever), votre logique doit être englobée dans des contrôleurs et des directives.
Voici la page index.html:
|
1 2 3 4 5 6 7 8 |
<html> <body> <span>this app is so cool</span> <p>it’s straight up magic</p> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script> </body> </html> |
Excellente architecture avec AngularJS
Nous allons créer des modèles pour les zones importantes du site.
Commençons par l’en-tête qui contient uniquement le menu, voici notre templates/header.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <!-- etc… --> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul> <li><a href="#/services">Services</a></li> <li><a href="#/pricing">Pricing Table</a></li> <li><a href="#/about">About</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> |
Nous allons aussi créer les pages internes par exemple « A propos ».
Commençons par créer un nouveau fichier partiels/about.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container"> <div class="row"> <div class="col-lg-12"> <span class="page-header">About <small>It's Nice to Meet You!</small> </span> </div> </div> <!-- etc., more information about the company…. --> </div> |
Maintenant revenons à notre index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <!-- Meta-Information --> <!-- etc… --> <!-- Vendor: Bootstrap Stylesheets http://getbootstrap.com --> <!-- etc… --> <!-- Our Website CSS Styles --> <link rel="stylesheet" href="css/main.css"> </head> <body ng-app="tutorialWebApp"> <!--[if lt IE 7]> <!-- etc… --> <![endif]--> <!-- Our Website Content Goes Here --> <div ng-include='"templates/header.html"'></div> <div ng-view></div> <div ng-include='"templates/footer.html"'></div> <!-- Vendor: Javascripts --> <!-- etc… --> <!-- Vendor: Angular, followed by our custom Javascripts --> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.min.js"></script> <!-- Our Website Javascripts --> <script src="js/main.js"></script> </body> </html> |
Une application est une collection de contrôleurs et de directives.
Dans notre HTML, on indique à quelle application on veut relier notre portion de DOM (une seule déclaration d’application par page).
La directive ng-app lie l’application Angular au corps html de notre page web.
|
1 |
<body ng-app="tutorialWebApp"> |
La directive ng-include permet de charger le fichier templates/header.html
|
1 |
<div ng-include='"templates/header.html"'></div> |
La directive ng-view fournit un conteneur dans lequel les routes chargeront le contenu de la page templates/*.html
|
1 |
<div ng-view></div> |
Nous allons tout simplement écrire un peu de Javascript dans le fichier js/main.js.
AngularJS est fourni avec un système de routing, qui permet de définir pour un certain pattern d’URL appelé, une certaine page à charger en AJAX et dont le résultat doit être rajouté dans une portion du DOM, défini grâce à la directive ng-view. On peut également y rattacher un contrôleur.
Par exemple, partials/page.html est chargé quand un utilisateur clique sur l’URL #/page.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/** * Main AngularJS Web Application */ var app = angular.module('tutorialWebApp', [ 'ngRoute' ]); /** * Configure the Routes */ app.config(['$routeProvider', function ($routeProvider) { $routeProvider // Home .when("/", {templateUrl: "partials/home.html", controller: "PageCtrl"}) // Pages .when("/about", {templateUrl: "partials/about.html", controller: "PageCtrl"}) .when("/faq", {templateUrl: "partials/faq.html", controller: "PageCtrl"}) /* etc… routes to other pages… */ // Blog .when("/blog", {templateUrl: "partials/blog.html", controller: "BlogCtrl"}) .when("/blog/post", {templateUrl: "partials/blog_item.html", controller: "BlogCtrl"}) // else 404 .otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"}); }]); |
Le contrôleur va permettre d’écrire son code et sa logique et il est relié à une partie du DOM, et tous les contrôleurs sont reliés à une application.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/** * Controls the Blog */ app.controller('BlogCtrl', function (/* $scope, $location, $http */) { console.log("Blog Controller reporting for duty."); }); /** * Controls all other Pages */ app.controller('PageCtrl', function (/* $scope, $location, $http */) { console.log("Page Controller reporting for duty."); // Activates the Carousel $('.carousel').carousel({ interval: 5000 }); // Activates Tooltips for Social Links $('.tooltip-social').tooltip({ selector: "a[data-toggle=tooltip]" }) }); |
Pour rattacher ensuite ce contrôleur au DOM, afin de lui donner un contexte d’exécution, on va utiliser la directive ng-controller dans notre HTML :
|
1 2 |
<div ng-controller="MyCtrl"> </div> |
Voici enfin le résultat de notre web app « Single Page »
Voir la démo en ligne
http://soufatn.github.io/angularjs-tutorial
Le code source est disponible sur GitHub
https://github.com/soufatn/angularjs-tutorial
3 réponses
[…] Capsules vidéos. Les exerciseurs. Outils de présentation. Google web designer. Boîte à outils. AngularJS: Créer une Web App en 5 minutes | Application Mobile Pour Les Nuls. […]
[…] Au-delà du langage de programmation, chaque plateforme propose un framework, notamment pour l’interface utilisateur. Les technologies propres à chaque environnement sont appelées natives. Maîtriser un environnement est déjà complexe. Installer PhoneGap Le fonctionnement de PhoneGap La performance. AngularJS: Créer une Web App en 5 minutes | Application Mobile Pour Les Nuls. […]
[…] Source: application-mobile-pour-les-nuls.fr […]