web-dev-qa-db-fra.com

Comment puis-je ajouter un commentaire (pour les développeurs, pas en sortie HTML) à un modèle Angular?

Je suis habitué aux modèles de style "moustache" les plus populaires où je peux ajouter un commentaire pour mes collègues avec:

{# The following code looks a bit odd, but here's why... #} Ces commentaires n'apparaissent évidemment pas dans la sortie - les utilisateurs ne les voient donc pas. Comment puis-je faire quelque chose de similaire dans Angular?

angularjscomments
28
mikemaccana

Angular n'a pas de support de commentaire de modèle intégré. Vous pouvez cependant créer une directive de commentaire pour le prendre en charge, comme ceci.

app.directive('templateComment', function () {
    return {
        restrict: 'E',
        compile: function (tElement, attrs) {
            tElement.remove();
        }
    };
});

Le balisage serait alors:

<template-comment>Put your comment here.</template-comment>

Vous pouvez également utiliser des commentaires html standard, puis les supprimer de votre code de production avant le déploiement.

Considérez cette tâche grognement, si vous souhaitez prendre en charge les commentaires de bloc - https://github.com/philipwalton/grunt-strip-code Spécifiez un commentaire de début et un commentaire de fin, et votre bloc de commentaires sera supprimé du code de production, en supposant que vous ajoutiez cette tâche à votre cible de déploiement. Utilisez-le comme modèle pour votre processus de génération, si vous n'utilisez pas Grunt. ....

32
Pauli Price

Vous pouvez utiliser la syntaxe normale pour les commentaires sans symboles spéciaux tels que <!-- Order verification, and authorization -->, vous pouvez alors réduire le format html (grognement + htmlmin)

htmlmin: {
      dist: {
        options: {
          collapseWhitespace: true,
          collapseBooleanAttributes: true,
          removeCommentsFromCDATA: true,
          removeOptionalTags: true,
          removeComments: true,
          ignoreCustomComments: [ /[<>\:\[\]\#]+/ ]

        },
        files: [{
          expand: true,
          cwd: '<%= yeoman.dist %>',
          src: ['*.html', 'views/**/*.html'],
          dest: '<%= yeoman.dist %>'
        }]
      }
    },
5
Denis N