Logo JavaScript

AngularJS, module GUI.Notify

Flattr this!

Je vous parlais il y a peu d'AngularJS. Et notamment mon projet de plugin/module de notifications pour ce framework, le tout basé sur Twitter Bootstrap.

Etant donné qu'il n'y a pas de politique à proprement parler sur la façon de construire un plugin "graphique" pour AngularJS, j'ai construit un module (au sens strict du framework).

GuiNotify fait des choses simples :

  • Afficher une notification là où vous le souhaitez (réglable via CSS) ;
  • Afficher plusieurs notifications en simultané ;
  • Faire persister l'affichage de celles-ci ;
  • Pouvoir fermer une notification au choix ;
  • Fermer toutes les notifications courantes en un seul clic.

Rien de bien original, mais pour ceux qui souhaitent s'initier à AngularJS (module, modèle, contrôleur, vues, services, directives, filtres), j'y utilise toutes les composantes de ce framework.

Au passage, j'ai fait en sorte que ce code soit complètement validé par JSLint, vous avez toutes les en-têtes de validation en début de fichier comme d'habitude. La version minifiée fournie aussi sur le dépôt ne fonctionne pour le moment pas, il semblerait que le process UglifyJS soit incompatible, je corrige ça asap.

Vous pouvez trouver le projet sur GitHub. Je vais très prochainement y mettre aussi quelques exemples d'utilisation en attendant que je fasse un "site dédié" comme pour mon plugin jQuery pour Open Street Map. Ce coup-ci, j'essaierai de le faire bilingue, j'ai cru comprendre que c'était une jolie boulette de ne pas avoir fait de doc anglophone sur le plugin OSM. D'ailleurs, elle est en cours d'écriture.

N'hésitez pas à commenter et forker, je suis preneur aussi des suggestions d'amélioration, c'est sous licence MIT, vous pouvez donc en faire ce que vous voulez 😉

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans JavaScript, avec comme mot(s)-clef(s) , , , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.
  • http://www.yrezgui.com Yacine Rezgui

    C’est au niveau des injections de services dans ton contrôleur.
    Le minifier renomme les paramètres de la fonction donc AngularJS n’arrive pas à injecter les services que tu demandes. Il faut que tu injectes séparément (voir l’exemple $inject Annotation).

    Il manque juste une démo et ton petit projet rocks :)

    • http://www.mathieurobin.com/ Mathieu

      J’avais effectivement vu passer cette info mais je l’avais pas retenu sur le moment. Merci de me l’avoir remis sous les yeux, je vais essayer de régler ça ce weekend. Sachant que j’ai volontairement nommé ça GUI.Notify, parce qu’il y a d’autres GUI.* en préparation 😉

  • DjebbZ

    Tu peux injecter les dépendences avec $inject, mais tu peux aussi écrire ton controller « normalement », c’est à dire avec la syntaxe
    .controller('GUINotifyCtrl', ['$scope', function($scope) { // ton code ici }]);

    Cette syntaxe un peu bizarre permet d’éviter de polluer le global namespace complètement (tu pourras te débarrasser de GUI dans la global namespace), et d’injecter les dépendences (le ‘$scope’) et de passer la réussir la minification, vu que tes dépendences sont dans un array. Du coup même si Uglify change les noms de variables dans tes fonctions, il ne touche pas à l’array de dépendences. Tant que tu écris tes dépendences et tes paramètres de fonctions dans le même ordre, pas de problème pour Angular.

    La doc officielle est pas très cohérente à ce sujet, mais la page http://docs.angularjs.org/guide/di explique bien la syntaxe (section « Inline Annotation »).

Articles liés