將目錄中的所有javascript文件包含到angularjs中的html文件中？咕嚕咕嚕？

Question

在我的AngularJS應用程序中，我有很多控制器js文件。

這些控制器（ one.ctrl.js ， two.ctrl.js ， ... ）需要包含在我的index.html文件中。

目錄結構：

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

目前，上面的js文件包含在index.html文件中，如下所示。

index.html的：

<!--   other html components   -->

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

將有更多的*.ctrl.js文件需要包含在index.html 。

我需要一種方法來自動將controllers目錄中的所有*.ctrl.js文件包含到index.html 。

發現：

從一些SO問題，

在AngularJS中的文件夾中加載JavaScript和CSS文件

如何通過JavaScript文件將所有JavaScript文件包含在目錄中？

我發現它不能自動完成，需要一些服務器端腳本或構建工具。

我的問題：

目前，我正在使用包含用於構建工具的grunt yeoman 。 所以，我的問題是，目錄中的那些javascript文件如何自動包含在html文件中？

Answer 1

您可以使用grunt-include-source插件

使用它，您可以定義以下模板：

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

在你的html文件中，它將被擴展為包含源位置中存在的所有源js和css文件，可以在grunt任務中配置

Answer 2

回答了根據需要向index.html添加源文件的一般問題，並自動詳細說明了grunt-include-source的使用 。

這適用於以下文件夾結構：

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

1. 使用npm i -D grunt-include-source grunt-contrib-watch 。

2. 在你的Gruntfile.js ，添加grunt.loadNpmTasks('grunt-include-source');

3. 然后你必須向Gruntfile.js添加一堆任務，之后它應該如下所示：

    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. 在index.html ，添加它（ 此處的文件路徑在Gruntfile.js設置的基本路徑內部 ）：

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

5. 最后，在命令行上：

    grunt 

這應該按順序啟動所有任務，並且在添加或刪除JS或CSS時應相應地更新index.html。

這就是index.html在少量文件中的外觀：

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

鏈接：

• 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

Answer 3

你可以使用這樣的東西：

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