Premiers pas avec AngularJS

De $1

Introduction

AngularJS, au même titre que BackboneJS, emberJS, knockoutJS, etc. est un framework MVC actuellement très en vogue. Il apporte une certaine simplicité par son approche déclarative du MVC et ses puissantes fonctions de routage qui en font un framework de choix pour écrire des clients RestFul de web services.

Premiers pas

Regardons cette vidéo, sorte de "hello world" avec AngularJS, qui expose déjà un des principes de ce framework: "il est magique" et fait beaucoup de choses en coulisse. Regardez bien la comparaison avec jQuery pour effectuer les mêmes opérations.

Outils pour debugger un site utilisant AngularJS

Sans extensions, attention, c'est quasiment impossible à debugguer...

Allons un peu plus loin

Pour aller plus loin nous vous proposons de découvrir de nouvelles features d'angularJS impliquant JavaScript. Ce framework permet ende définir des "vues" (morceaux de page HTML avec structures de contrôles type boucles, et références à des modèles), des modèles (des objets JS définis dans des "contrôleurs") et des bindings entre les vues/modèles/contrôleurs et avec des données sur un serveur. Particularité notable d'angular, il définit de nouveaux attributs à ajouter dans les éléments HTML, qui permettent en quelque sorte de "programmer en HTML". 

Je propose de faire ensembles ce tutorial (il utilise les sources de la version angular d'un célèbre site de comparaison de frameworks JavaScript MVC : http://todomvc.com/examples/angularjs/#/). Donc testez cette démo, puis téléchargez les sources. Ensuite le but du jeu est de "refaire" pas à pas le tutorial présenté dans la vidéo suivante. On va le faire ensemble. Demandez à votre enseignant une copie de la vidéo sur clé USB si la bande passante wifi est insuffisante.

Tutoriels intéressants présentant les différentes parties d'angular

Suivre en vidéo cette série de tutoriels: https://www.youtube.com/watch?v=-7w3...7NpR70ncKjeUvW

Autres resources

Application Android qui contient toute une doc de référence d'AngularJS : très pratique !

Pour les plus curieux, je propose ce lien vers une comparaison entre les deux frameworks JS les plus en vue du moment : AngularJS (Google) et EmberJS. Cet article est intéressant car il contient des témoignages de développeurs qui ont réalisé de grosses applications : http://www.quora.com/Client-side-MVC...ipt-frameworks.

Présentation de plugins / directives custom pour Angular JS,

en particulier des datatables, pour faire de l'upload de fichier, etc. par exemple angular UI Bootstrap : 

Tutoriel montrant Netbeans + Angular + web services REST sur la table des Customers de la base sample

FAQ : Comment corriger les erreurs d'injection incompréhensibles ?

Quand je fais du angular ça va, je m'en sors bien, quand je dois débugger le code de mes élèves, c'est l'enfer, les erreurs d'injection sont très dures à trouver, etc...

C'est un problème courant avec Angular, ce message insuffisant pour trouver l'erreur, et ça fait une heure qu'on s'énerve dessus, etc... Voilà le message typique :

    Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:

    Error: [$injector:modulerr] Failed to instantiate module app due to:

    Error: [$injector:modulerr] Failed to instantiate module app.common due to:

    Error: [$injector:moduler......1)

... qui peut vous faire tourner en rond pendant longtemps.

Pourquoi : le module à injecter comporte une erreur ou n'a pas été trouvé !

La Solution :

  • Ouvrez angular.js
  • Allez aux lignes 71-72, et selon votre version, 

Vous devriez trouvez quelque chose comme :

#   message = message + '\nhttp://errors.angularjs.org/1.3.0-beta.8/' +

#          (module ? module + '/' : '') + code;
  • après la seconde ligne (72) ajoutez :
#   console.log(message);

A partir de là, Angular vous dira ce qui ne va pas dans les modules référencés, et vous pourrez continuer à travailler normalement.