Logo AngularJS

Tricks AngularJS : template de directive

Flattr this!

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>' +
                '<div id="prt_modal_background" class="modal-backdrop fade in hide"></div>' +
                '<div id="prt_modal" class="modal hide">' +
                '<div class="modal-header">' +
                '<button type="button" class="close" id="btn_close" data-dismiss="modal" aria-hidden="true">×</button>' +
                '<h3>Create</h3>' +
                '</div>' +
                '<div class="modal-body">' +
                //end modal body
                '</div>' +
                '<div class="modal-footer">' +
                '<a href="#" id="btn_save" class="btn btn-primary">Save & select</a>' +
                '</div>' +
                '</div></div>',
            link       : function (scope, element, attrs) {
                var btn_create = angular.element(document.getElementById('btn_create')),
                    btn_save = angular.element(document.getElementById('btn_save_partner')),
                    btn_close = angular.element(document.getElementById('btn_close')),
                    modal = angular.element(document.getElementById('prt_modal')),
                    modal_background = angular.element(document.getElementById('prt_modal_background')),
                    openModal = function () {
                        modal.removeClass('hide');
                        modal_background.removeClass('hide');
                    },
                    closeModal = function () {
                        modal.addClass('hide');
                        modal_background.addClass('hide');
                    };

                btn_create.bind('click', openModal);
                btn_save.bind('click', function () {
                        closeModal();
                });
                btn_close.bind('click', closeModal);
            }
        };
    });

Oui j'ai essayé de travailler avec ça... Et encore, j'ai nettoyé le corps de la modal du formulaire qu'elle contenait.

En utilisant la propriété templateURL, vous avez toute la partie sale qui saute pour être bien propre (et correctement indentée) dans un fichier séparé et votre JS n'est pas pollué par le template.

C'est un truc de base, valable dans bien des langages et bien des frameworks, mais c'est un rappel nécessaire de ne pas mélanger la logique avec l'affichage et inversement.

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 AngularJS, avec comme mot(s)-clef(s) , , , , . Vous pouvez la mettre en favoris avec ce permalien.
  • Cyrano

    Rien n’interdit d’avoir du code HTML propre et correctement aligné dans du JavaScript et de retrouver ce code dans la source générée dans la page avec une indentation et des retours chariots normaux, et j’aurais procédé comme ceci :

    //...
                template   : '\n'+
                             '  \n'+
                             '    \n'+
                             '      \n'+
                             '         \n'+
                             '      \n'+
                             '      \n'+
                             '        Open modal\n'+
                             '      \n'+
                             '    \n'+
                             '  \n'+
                             '   \n'+
                             '  \n'+
                             '    \n'+
                             '      ×\n'+
                             '      Create\n'+
                             '    \n'+
                             '    \n'+
                             /* end modal body */
                             '    \n'+
                             '    \n'+
                             '      Save & select\n'+
                             '    \n'+
                             '  \n'+
                             '\n',
    //...

    Ça n’enlève pas cependant l’intérêt qu’il peut y avoir à séparer affichage et traitement :)

  • Cyrano

    Bon ben désolé, l’insertion de code en commentaires a foiré, tu pourras peut-être rattraper le coup en éditant le post, je ne peux pas le faire moi-même. :(

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

      C’est fait 😉

      • Cyrano

        Ok, merci bien. ça n’affiche pas les balises mais bon, pour ceux qui voudraient saisir l’intérêt de ce que j’ai mis, il suffit de reprendre exactement le même code HTML qui est dans l’exemple du sujet de Mathieu et de le ré-aligner proprement en ajoutant les retours-chariots.

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

          Ah effectivement, j’ai juste changé le tag qui sert à entourer le code mais j’avais pas fait gaffe que les balises avaient été digérées. J’essaierais de prendre le temps ce weekend de remettre ça propre

Articles liés