web-dev-qa-db-fra.com

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

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

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

Structure du répertoire: 

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

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

index.html: 

<!--   other html components   -->

<script src="js/controllers/one.ctrl.js"/>
<script src="js/controllers/two.ctrl.js"/>
</body>
</html>

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

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

Constatations:

De certaines SO questions,

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é que cela ne peut pas être fait automatiquement et nécessite des outils de script ou de génération côté serveur.

Ma question:

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

javascriptangularjsgruntjs
23
TheKojuEffect

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 développé pour inclure tous vos fichiers source js et css présents dans votre emplacement source qui peuvent être configurés dans la tâche grunt

13
akskap

Répondre à la question générale de l'ajout de fichiers sources à index.html à la demande et automatiquement et élaborer sur l'utilisation de grunt-include-source .

C'est pour la structure de dossiers 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 cela 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 regarde ici à l'intérieur du 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 démarrer toutes les tâches dans l'ordre, et votre index.html devrait être mis à jour en conséquence lorsqu'un JS ou CSS est ajouté ou supprimé.

Voici à quoi pourrait ressembler votre index.html Avec 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 -->

Liens:

6
Jayant Bhawal

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;
 }
})();
1
Hasan A Yousef