Archives de catégorie : AngularJS

Il y a peu, j’ai rencontré un problème. Je travaillais sur une appli one-pae assez lourde avec AngularJS et j’avais besoin qu’elle soit accessible sur mobile ou en dégradé sur du IE8 par exemple. J’ai donc fait le choix du lazy loading de mes composants. Et là, la doc de AngularJS n’en parle tout simplement pas. Lazy loading Le lazy loading, c’est tout simplement le chargement d’éléments quand on en a besoin et non immédiatement. Ressource Je suis tombé sur ce site : http://ify.io/lazy-loading-in-angularjs/. Il explique bien la solution mais j’ai plusieurs soucis avec celle-ci : j’utilise curl ; j’utilise UI-Router. Curl J’ai utilisé mon outil de comparaison de loaders de scripts pour déterminer ce que j’avais besoin et en l’occurrence, curl est mon favori. De ce côté là inverser $script par curl n’est pas compliqué pour un sou. Il suffit … Continuer la lecture

Pour ceux qui ont réussi à avoir une place, vu que c’est blindé, il y a une soirée AngularJS demain chez Viadeo. La précédente et première édition fut une super soirée où Thierry Lau nous a fait une présentation des plus complètes et efficace sur le framework. Puis on s’est fait un petit BeerJS improvisé derrière. Je fais cet article pour deux raisons : que vous sachiez qu’il y a des meetups « réguliers » sur AngularJS à Paris, que c’est gratuit et pour le moment ça part dans le sympa ; que je serai parmi les conférenciers demain en présentant « un an d’applications en prod avec AngularJS ». Bien entendu, je mettrai les slides à disposition, accompagné d’un billet de blog pour expliquer tout ça 😉

Salut à tous ! Comme vous le savez désormais, je suis assez attaché à la mise en place de retrouvailles régulières autour d’une bière (ou autre mais plutôt bière) pour parler de notre boulot. C’est pourquoi je n’ai pas organisé le prochain BeerJS. Bon après cette phrase débile, il y a tout de même plusieurs motivés qui se sont débrouillés pour monter le BeerJS de février. Réservez donc votre soirée du 25 février. Thème du soir, on parlera AngularJS. Pas de slides, pas de démo, à priori, juste une bonne bière et des gens passionnés. Débutants, experts, intermédiaires ou juste curieux sont tous les bienvenus. J’espère qu’il y aura aussi des connaisseurs des autres frameworks qui seront présents. Paul, il se reconnaîtra  j’espère t’y croiser. J’espère parce que je ne suis pas encore sûr de pouvoir être présent. Donc dans la joie et … Continuer la lecture

Je reviens sur mes tricks AngularJS, j’en ai toujours sous la main et je continuerai de vous en donner de temps en temps en fonction de mon apprentissage de ce framework. Template de directive Évitez d’utiliser la propriété template dans la création de directives, préférez y templateURL. Pour la simple et bonne raison que vos directives vont régulièrement avoir tendance à évoluer. Charger un fichier HTML contenant un template est plus propre qu’essayer de le décrire dans une chaîne au milieu de votre code JS Je vous laisse jeter un oeil à un exemple simple de directive proche de l’illisibilité : angular .module('Modal', []) .directive('partner', function () { return { restrict : 'C', replace : false, transclude : true, scope : { }, template : '<div><table>' + '<tr><td>' + '<div class="autocompletewidget"></div>' + '</td><td style="vertical-align: top;"><button type="button" id="btn_create" class="btn btn-primary">Open modal</button></td></tr>' + '</table>' + … 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.