web-dev-qa-db-ja.com

ディレクトリのすべてのjavascriptファイルを、angularjsのhtmlファイルに含めますか？うなり声で？

私の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ファイルをディレクトリに含めるにはどうすればよいですか？

自動的に実行することはできず、サーバー側のスクリプト作成ツールまたはビルドツールが必要であることがわかりました。

私の質問：

現在、ビルドツールにyeomanを含むgruntを使用しています。だから、私の質問は、ディレクトリ内のこれらのjavascriptファイルをhtmlファイルに自動的に含めることができますか？

javascriptangularjsgruntjs
23
TheKojuEffect

grunt-include-source プラグインを使用できます

これを使用して、次のようなテンプレートを定義できます。

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

あなたのソースの場所に存在するすべてのソースjsファイルとcssファイルを含むように展開されるhtmlファイルで、gruntタスクで設定できます

13
akskap

ソースファイルをオンデマンドで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 -->
_

リンク：

6
Jayant Bhawal

次のようなものを使用できます。

(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