Archives par mot-clef : angularjs

Soyons clairs, je démarre direct avec ce qui revient le plus souvent. Les messages où je ne prends même plus la peine de lire jusqu’au bout et où je n’envisage même plus de répondre tellement j’en vois. C’est pas hyper sympa de ma part, mais si je dois répondre à tout ça, je peux oublier d’avoir encore le temps d’écrire cette chronique. J’utilise deux jQuery différents mais ça marche pas Oui oui, je vois ce genre de messages environ 3 ou 4 fois par jour, tous flux cumulés. Souvent 1.4.2 et 1.5. Et encore parfois, c’est 3 versions. J’ai le souvenir de 4 versions (genre 1.4, 1.4.1, 1.4.2 et 1.5 de mémoire) une fois mais je ne retrouve pas le post. J’utilise Mootools et jQuery ensemble, est-ce que ça gène si je souhaite aussi utiliser ExtJS Non, après tout, rajoutes y aussi AngularJS, EmberJS, … Continuer la lecture

Dans ce billet je vais vous parler un peu des choses marrantes, belles que je vois passer pendant mes veilles jQuery. J’ouvre d’ailleurs ce billet avec une citation de l’ami Cahnory : jQuery ne date pas de la veille C’est pas spécialement drôle pour le « commun des mortels » mais quand comme moi vous passez un très grand certain nombre d’heures par semaine à assurer une veille sur jQuery, tout de suite, c’est plus drôle. De belles rencontres, tout d’abord dans mon lectorat, donc parmi vous. Les personnes Entre Julien Guèzennec (http://www.b2bweb.fr), un des premiers avec qui j’ai eu des contacts dès le début de mon entrée dans le monde du JS. Un mec super sympa plein de bonne humeur. Anne-Gaelle Colom, qui m’a accordé l’immense plaisir d’une interview, en plus de me fournir matière à chroniquer régulièrement. Et encore mieux, … Continuer la lecture

J’avais fait une pause récemment sur mes tricks AngularJS pour revenir un peu sur jQuery. Voilà donc une nouvelle astuce. Utiliser ngOptions Pour vos listes de sélection, ne gérez surtout pas vos options avec ngRepeat. C’est une grosse erreur. Parce que pour définir la valeur sélectionnée, ça peut vite être chiant. Et surtout si vous voulez affecter le résultat à un modèle. Dans ce dernier cas, AngularJS vous ajoutera aussitôt une option supplémentaire assez moisie dans ce genre <option value="? string:id-2 ?"></option> Je ne saurai vous expliquer pourquoi il génère ça mais avouez que ça va vite poser soucis dans votre application.

Franchement des fois, la bonne prise de tête pour suivre l’enchaînement des scopes. Pour ça il y a une super extension pour Chrome, nommée Batarang. Il y a deux vidéos, en anglais, qui expliquent particulièrement bien comment fonctionne l’outil (intégré dans les Developer Tools).  Je vous incite à les regarder, je ne saurais mieux faire : Pour un total de 10 minutes de vidéo, ça vaut le coup de les investir. Ça m’a fait gagner un temps fou.

Quand vous affichez un template avec AngularJS, il peut arriver que vous voyez les expressions s’afficher avant qu’elles soient bindées. Cet effet peut-etre du à un léger ralentissement au moment du lancement de l’appli. On appelle ça un « flicker effect ». Pour éviter ceci, vous pouvez jouer avec la directive ngCloak. C’est bête comme bonjour et ça limite l’impact sur vos utilisateurs. En gros cette directive balance un style css display: none sur la zone ciblée.

Dans la série des billets sur les petites astuces AngularJS, je vous propose ceci aujourd’hui : pouvoir arrêter d’écouter un évènement. Le besoin est le suivant : Vous souhaitez utiliser le patern pub/sub pour gérer un évènement. Le problème est que vous ne souhaitez pas le faire durer dans le temps. Par exemple, que votre callback soit appelé une seule fois et pas plus. L’astuce est simple. C’est la fonction de création du listener qui retourne la fonction que vous devez appeler pour ne plus écouter cet évènement. Voilà un exemple : var unregister = $scope.$on('MonEvent', function (event) { unregister(); // le code de votre callback }); Cette astuce marche aussi bien sur $watch que sur $on. Vous pouvez retrouver un peu plus de détails sur cette fonctionnalité en jetant un oeil sur ce ticket lui aussi avec des exemples de code.

Alors celle-là, elle a été comique. La situation est simple. Vous avez un contrôleur qui est utilisé dans une vue, comme ceci : <script> function monCtrl ($scope) { } </script> <div ng-controller="monCtrl"></div> Mais cette vue est dynamique puisque vous la chargez grâce au système de routes. Et là dans votre code, vous avez fait ceci : angular.module('monMod', []).config([ '$routeProvider', function ($routeProvider) { $routeProvider. when('/main', { templateUrl : 'tpl/main.html', controller : monCtrl }) otherwise({ templateUrl : 'tpl/error.html' }); } ]); Et vous obtenez une superbe double instanciation de votre contrôleur. Virez donc le contrôleur de la route, ça ira tout de suite mieux 😉 Au passage, vous aurez compris que la mise en place de la directive ng-controller est nécessaire à la mise en route naturelle d’un contrôleur. Donc si celui-ci ne s’exécute pas, c’est que vous ne l’appelez pas 😉 Deux en une, vous êtes gâtés.

Je me lance dans une série de billets sur AngularJS (vous l’aurez compris). J’ai appris pas mal de choses sur ce framework suite à presque deux mois de travail intensif avec. Vu qu’il y a des trucs où j’ai pas mal galéré, ça serait dommage de pas partager. Ce sont parfois juste des trucs discrets dans la documentation, des vraies astuces, des retours d’expérience. Il y a de tout et pas forcément des trucs de fous. Une petite dizaine d’astuces sont déjà prêtes à être publiées. La première vient cet après-midi vers 15h.

Soyons honnêtes, ce premier BeerJS parisien, c’était sympa ! Donc merci à tous ! Il y a eu pas mal de RT de l’évènement, j’en ai parlé sur la mailing list de ParisJS, sur Twitter, et ici sur mon blog. A 2, 3 jours de l’évènement, c’était un pari serré pour réussir à mobiliser. On s’est tout de même retrouver à une petite douzaine au plus chaud de la soirée. On a pas mal parlé JS, mais pas que. Ça a parlé moto, binouse, vins, écoles, téléphonie ou encore bonne bouffe. Parfois même plus que JS. Côté du langage, il y a eu du jQuery, de l’AngularJS, du EmberJS, on a discuté très brièvement de Meteor et GWT. Et bien sûr, on a fait un max de pub pour ParisJS à ceux qui ne connaissaient pas. Je ne voulais pas trop « organiser » … Continuer la lecture

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 … Continuer la lecture