Article de blog ippon

Préview de mon article sur une directive de carte angularJS que je vais bien réussir à publier sur le blog d’ippon… En cours de soumission, c’est déjà ça.

Développement d’une carte sous Angular JS.

En quelques années AngularJS est devenu le framework javascript de référence. L’apprentissage de ce framework est rapide, mais la création de nouveaux composants via des directives est plus complexe.

Nous allons voir comment développer un composant de favoris sur les villes et départements de France en directive Angular. L’utilisateur doit pouvoir sélectionner des départements sur une carte de France puis sélectionner des villes dans ceux-ci pour les ajouter à une liste de favoris.

Quelques considérations spécifiques au projet : le client travaille uniquement en France métropolitaine et considère la Corse comme un seul département (toutes mes excuses).

De plus, certains départements n’ont aucune ville à mettre en favori, et doivent donc être cachés.

Tags : javascript, angularjs, directive, scope, twitter bootstrap, modale, angular-ui, Rest

La structure de données :

Nos données de départ sont fournies via un service REST sous forme de liste de départements avec leurs villes. Un champ “favori” booléen indique la présence ou l’absence de la ville dans les favoris, et un département est donc favori si au moins une de ses villes est favorite :

  1. [
  2. { nom : « Calvados »,
  3.  code : « 14 »,
  4.  villes : [
  5. { nom : « Caen »,
  6.  code : « 14000 »,
  7.  favori : true
  8.        },
  9. // … autres villes du département
  10. ],
  11.  // … autres départements

}


Le but est de présenter de manière visuelle simple cette structure au client.

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s