Skip to content

Instantly share code, notes, and snippets.

@skelz0r
Last active August 29, 2015 14:13
Show Gist options
  • Save skelz0r/80a41c9ef24b16879c3a to your computer and use it in GitHub Desktop.
Save skelz0r/80a41c9ef24b16879c3a to your computer and use it in GitHub Desktop.
Ionic Base exo

Ionic base

Objectif

Avoir une application de management d'utilisateurs:

  • Liste des utilisateurs ;
  • Ajout d'un utilisateur ;
  • Suppression d'un utilisateur ;
  • Détail d'un utilisateur.

Le tout sera versionné sous git et poussé sur github pour des reviews efficaces.

Workflow

  1. A chaque nouvelle étape (ie exo), faire une nouvelle branche : exo/1 et dès que c'est fini, ouvrir une pull request sur le repo github ;
  2. Pingez un autre dev pour la review
  3. Dès que les deux parties sont d'accord, go merge et faire l'exercice suivant

Ressources

Exos

1. Création d'un service users

Créer un service 'Users' qui aura les méthodes suivantes:

  • init() : génère une liste de 5 utilisateurs
  • getList(): retourne la liste des utilisateurs

On utilisera l'api de randomuser

Chaque utilisateur aura:

  • un fullName ;
  • un avatarUrl ;
  • un address.

Conseil: utiliser le service $http

2. Affichage de la liste des utilisateurs

Créer une vue pour afficher la liste des utilisateurs du service 'Users'

On utilisera le design Avatar list.

3. Ajout d'un utilisateur

Ajouter un CtA pour ajouter un utilisateur à la liste courante. Pour ceci, il faut d'abord ajouter une méthode au service 'Users':

  • add() : ajoute un utilisateur à la liste.

4. Pull to refresh

Implémenter un pull to refresh qui revient à l'état initial de l'application.

5. Implémenter un loading le temps de l'affichage des utilisateurs

Le temps que la liste des users soit remplies, il faut afficher un écran de loading, à l'aide de la directive $ionicLoading.

Afin de détecter que le load des utilisateurs est bien terminer, il faut implémenter une promesse sur la méthode getList() du service 'Users'.

L'interface est donc, dans le controller:

Users.getList().then(function(users) {
  $scope.users = users;
});

La documentation des promesses en angular se trouve ici : $q

6. Ouverture d'un user

Lors du tap sur un des users de la liste, ouvrir une vue avec plus de détails sur l'utilisateur.

7. Suppression d'un user

Pouvoir supprimer un utilisateur.

8. Réorganiser les users

Pouvoir réorganiser les utilisateurs de la liste.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment