Inclure tous les fichiers javascript dans un répertoire dans un fichier html dans angularjs? Avec un grognement?

Dans mon application AngularJS, j'ai plusieurs fichiers js de contrôleurs.

Ces contrôleurs ( one.ctrl.js , two.ctrl.js , ... ) doivent être inclus dans mon fichier index.html .

  • AngularJS ng-click StopPropagation
  • Comment utiliser ng-animate en 1.2 angulaire?
  • Liaison de données bidirectionnelles dans les directives AngularJS
  • $ ViewContentLoaded ne lance pas
  • Devrais-je utiliser «retour» avec ma fonction de rappel en Javascript?
  • Répétition du nom du module pour chaque composant du module
  • Structure de l'annuaire:

     app/ js/ controllers/ one.ctrl.js two.ctrl.js 

    Actuellement, les fichiers js ci-dessus sont inclus dans le fichier index.html comme suit.

    Index.html:

     <!-- other html components --> <script src="js/controllers/one.ctrl.js"/> <script src="js/controllers/two.ctrl.js"/> </body> </html> 

    Il y aura plus de fichiers *.ctrl.js qui doivent être inclus dans index.html .

    J'ai besoin d'un moyen d'inclure automatiquement tous les fichiers *.ctrl.js dans le répertoire des controllers dans index.html .

    Résultats:

    D'après certaines questions SO,

    Charger des fichiers JavaScript et CSS dans des dossiers dans AngularJS

    Comment puis-je inclure tous les fichiers JavaScript dans un répertoire via un fichier JavaScript?

    J'ai constaté qu'il ne peut pas être fait automatiquement et nécessite des scripts côté serveur ou des outils de construction.

    Ma question:

    Actuellement, j'utilise yeoman qui inclut un grunt pour l'outil de construction. Alors, ma question est: comment ces fichiers javascript dans un répertoire peuvent-ils être automatiquement inclus dans un fichier html?

  • Angular.js retarde l'initialisation du contrôleur
  • AngularJS convertissant mon ng-href url "slash" en "% 2f"
  • Utilisation de méthodes auxiliaires lors de la mise en page avec JS angulaire
  • Champ d'en-tête de demande Access-Control-Allow-Headers n'est pas autorisé par Access-Control-Allow-Headers
  • Obtenir des données de Spring MVC dans Angular JS dans l'appel de la vue initiale
  • Comment décider quand utiliser ngView ou ngInclude?
  • 3 Solutions collect form web for “Inclure tous les fichiers javascript dans un répertoire dans un fichier html dans angularjs? Avec un grognement?”

    Vous pouvez utiliser le plugin grunt-include-source

    En l'utilisant, vous pouvez définir des modèles comme ceux-ci:

     html: { js: '<script src="{filePath}"></script>', css: '<link rel="stylesheet" type="text/css" href="{filePath}" />', } 

    Dans votre fichier html qui sera étendu pour inclure tous vos fichiers source js et css présents dans votre emplacement source qui peuvent être configurés dans la tâche grunée

    Répondre à la question générale d'ajouter des fichiers sources à index.html à la demande et automatiquement et en élaborant l'utilisation de grunt-include-source .

    Ceci est pour la structure de dossier suivante:

     MyProject | +-- index.js +-- Gruntfile.js +-- package.json +-- //other files | +--+ app +-- //app files (.html,.js,.css,.*) 
    1. Installez avec npm i -D grunt-include-source grunt-contrib-watch .

    2. Dans votre Gruntfile.js , ajoutez grunt.loadNpmTasks('grunt-include-source');

    3. Ensuite, vous devez ajouter un tas de tâches à votre Gruntfile.js , après quoi il devrait ressembler à ceci:

       module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), //... watch: { //... includeSource: { // Watch for added and deleted scripts to update index.html files: ['app/**/*.js','app/**/*.css'], tasks: ['includeSource'], options: { event: ['added', 'deleted'] } } }, includeSource: { options: { //This is the directory inside which grunt-include-source will be looking for files basePath: 'app' }, app: { files: { //Overwriting index.html 'app/index.html': 'app/index.html' } } } }); //... grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-include-source'); //... //Include sources, run the server, open the browser, and watch. grunt.registerTask('default', ['includeSource', 'watch']); }; 
    4. Dans votre index.html , ajoutez ceci ( le chemin du fichier Gruntfile.js ici dans le chemin de base défini dans Gruntfile.js ):

       <!-- include: "type": "css", "files": "**/*.css" --> <!-- /include --> <!-- include: "type": "js", "files": "**/*.js" --> <!-- /include --> 
    5. Enfin, sur la ligne de commande:

       grunt 

    Cela devrait commencer toutes les tâches en séquence, et votre index.html devrait être mis à jour en conséquence lorsqu'un JS ou CSS est ajouté ou supprimé.

    C'est ainsi que votre index.html pourrait ressembler à un petit nombre de fichiers:

     <!-- include: "type": "css", "files": "**/*.css" --> <link href="styles.css" rel="stylesheet" type="text/css"> <!-- /include --> <!-- include: "type": "js", "files": "**/*.js" --> <script src="_routes/routes.js"></script> <script src="scripts/app.js"></script> <!-- /include --> 

    Des liens:

    Vous pouvez utiliser quelque chose comme ceci:

     (function loadScript() { var head = document.getElementsByTagName("head")[0]; var done = false; var directory = 'libraries/'; var extension = '.js'; var files = ['functions', 'speak', 'commands', 'wsBrowser', 'main']; for (var file of files){ var path = directory + file + extension; var script = document.createElement("script"); script.src = path; script.onload = script.onreadystatechange = function() { // attach to both events for cross browser finish detection: if ( !done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") ) { done = true; // cleans up a little memory: script.onload = script.onreadystatechange = null; // to avoid douple loading head.removeChild(script); } }; head.appendChild(script); done = false; } })(); 
    JavaScript rend le site Web intelligent, beauté et facile à utiliser.