Dołącz wszystkie pliki javascript w katalogu do pliku html w angularjs? z pomrukiem?

Question

W mojej aplikacji AngularJS mam wiele plików kontrolnych js.

te kontrolery (one.ctrl.js, two.ctrl.js, ...) musi być włączone w moim pliku index.html.

Struktura katalogów:

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

Obecnie powyższe js pliki są zawarte w index.html pliku w następujący sposób.

index.html:

<!-- other html components --> 

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

Istnieje będzie więcej *.ctrl.js pliki, które są wymagane, aby zostać włączone index.html.

Potrzebuję sposobu automatycznego włączenia wszystkich plików *.ctrl.js do katalogu controllers do index.html.

Ocena:

Od niektórych SO pytania,

Load JavaScript and CSS files in folders in AngularJS

How can I include all JavaScript files in a directory via JavaScript file?

I stwierdził, że nie może odbywać się automatycznie i wymaga pewnych Server Side włączony lub zbudować narzędzi.

Moje pytanie:

Obecnie używam yeoman które obejmują grunt dla budowania narzędzia. Moje pytanie brzmi: Jak te pliki javascript w katalogu mogą być automatycznie dołączane do pliku html?

Answer 1

Można użyć grunt-include-source wtyczki

Używając go można definiować szablony, takie jak:

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

w pliku html, który zostanie rozszerzony o wszystkie swoje js źródłowych i plików css obecne w lokalizacja źródła, które mogą być skonfigurowane w zadaniu grunt

Answer 2

można użyć coś takiego:

(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; 
} 
})(); 

Answer 3

Odpowiedzi na ogólne pytanie dotyczące dodawania plików źródłowych do pliku index.html na żądanie i automatycznie oraz opracowania na temat korzystania z grunt-include-source.

to do następującej strukturze katalogu:

MyProject 
| 
+-- index.js 
+-- Gruntfile.js 
+-- package.json 
+-- //other files 
| 
+--+ app 
    +-- //app files (.html,.js,.css,.*) 

1. Instalacja z npm i -D grunt-include-source grunt-contrib-watch.

2. w twojej Gruntfile.js, dodać grunt.loadNpmTasks('grunt-include-source');

3. Następnie trzeba dodać kilka zadań do swojej Gruntfile.js, po którym powinno to wyglądać tak:

   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. w twojej index.html, dodać to (ścieżka pliku tutaj wygląda wewnątrz ścieżki podstawowej ustawionej w Gruntfile.js):

   <!-- include: "type": "css", "files": "**/*.css" --> 
   <!-- /include --> 
   <!-- include: "type": "js", "files": "**/*.js" --> 
   <!-- /include --> 
   

5. Wreszcie, w wierszu poleceń:

   grunt 
   

ten powinien rozpocząć wszystkie zadania w kolejności, a index.html należy odpowiednio aktualizowany, gdy dodaje się JS lub CSS lub usunięty .

ten sposób swoją index.html może wyglądać z małą liczba plików:

<!-- 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 --> 

linków:

• https://www.npmjs.com/package/grunt-include-source
• https://ajsblackbelt.wordpress.com/2014/07/07/free-from-include/
• https://jhipster.github.io/tips/002_tip_include_js_grunt.html