[ Application 58] « Scanne ton Employé » Journal de développement au jour 3

scanneIntroduction


Aujourd’hui, on continue sur la vue nouveau.html, et on mets en place la vue liste.html.

Durée : 3h30 .

Pour tester l’application au jour 3 , cliquer ici.

Rappel de l’architecture de l’application  :


système angular api scannersystème angular api scanner-page-001

 

Fonctionnalités ajoutées dans la vue nouveau.html:


  • Possibilités d’imprimer la carte avec le code barre grâce à la fonction $scope.imprimerDiv().
  • Restriction de clics sur les boutons « Imprimer la carte » ou « sauvegarder » si l’id n’a pas été créé auparavant ( et donc que nouvelEmploye.identifiant soit inexistant ->ng-disabled= »!nouvelEmploye.identifiant « 
  • Analyse de l’objet Google Map récupéré par autocomplete.js, finalement, je ne récupère que formatted_address dans l’objet nouvelEmploye, on pourrait aussi récupérer seulement la ville ou le code postal ou etc …
  • Ajout du style « overflow:auto » sur la div de la carte, pour que cela ne dépasse pas sur mobile.

Fonctionnalités ajoutées dans la vue liste.html:


  • Affichage de la liste des employé dans une table HMTL, provenant du back end Firebase.
  • Ajout du style « overflow:auto », pour que la table ne soit pas horrible sur mobile.

Voici le look d’un enregistrement au format JSON sur Firebase, c’est très pratique !  (On voit qu’au jour 3 il manque encore la date de naissance, qui est un objet que je n’ai pas encore formaté dans la vue nouveau:

rscanner

Chaque nouvel employé est ajouté dans le tableau d’objets JSON employes sur Firebase, en ligne !

 

Ajout de modules AngularJs 1.5 avec BOWER:


  • Ajout du module angular-notifier pour toutes les notifications dans l’application(Remplace les alert de js).
  • Ajout du module Firebase pour le gérer back-end, vu qu’on ne traite qu’un seul tableau (array) nommé employes au pluriel sur le back end firebase,  on ajoute au contrôleur seulement $firebaseArray(Voir le code)

 

Lire la suite

Publicités