シングルページアプリケーション - 動的部分図で

Question

をベース負荷のjsファイル私はちょうど角学び、ここにチュートリアルを以下始めました - http://docs.angularjs.org/tutorial/step_00

私はGitHubのからシード例をダウンロードすることだし、それは素晴らしい作品。私は質問があります - 部分的なビューで外部jsファイルを参照する必要がある場合、最初にindex.htmlファイルに追加する必要がありますか？私はできるだけ痩せて、現在のビューに必要なjs参照を含めるだけで、アプリケーションをしたい。ビューに基づいてjsファイルを動的にロードすることは可能ですか？

Answer 1

この機能はAngularJSに組み込まれていないと思います。

ただし、このプロジェクトでは、RequireJSでAngularJSを使用してオンデマンドで必要なjsファイルをロードするための基本プロジェクトを提供しています。

https://github.com/tnajdek/angular-requirejs-seed

アプリケーションが巨大であれば、それはAngularJSを使用するだけの事実が書き込まれるコードの量を減らすため、それ以外の場合は、やり過ぎすることができ、便利かもしれません。個人的には、最初に必要なスクリプトをすべて読み込みます。

はまた、巨大なアプリの作成について（グーグルでAngularJSに取り組んでいます）ブリアンフォードからこの記事を見て：

http://briantford.com/blog/huuuuuge-angular-apps.html

Answer 2

私は本当にこの1に私の心を壊しました。 anglejsではデフォルトで遅延ロードがサポートされていないのは苦痛です。

http://ify.io/lazy-loading-in-angularjs/

http://www.bennadel.com/blog/2554-Loading-AngularJS-Components-With-RequireJS-After-Application-Bootstrap.htm

Answer 3

これは私のために働い：とにかく、ここで私はそれを解決する助けた2つのリンクがあります。最も軽量な解決策を求める他の人のために私はそれを掲示すると考えました。

ページのhtmlタグにトップレベルコントローラがあり、部分ビューごとにセカンダリコントローラがあります。私は次の関数を定義し、トップレベルのコントローラで

...私は、次のような呼び出しで必要なスクリプトを読み込むことができ、二次コントローラでそう

$scope.loadScript = function(url, type, charset) { 
    if (type===undefined) type = 'text/javascript'; 
    if (url) { 
     var script = document.querySelector("script[src*='"+url+"']"); 
     if (!script) { 
      var heads = document.getElementsByTagName("head"); 
      if (heads && heads.length) { 
       var head = heads[0]; 
       if (head) { 
        script = document.createElement('script'); 
        script.setAttribute('src', url); 
        script.setAttribute('type', type); 
        if (charset) script.setAttribute('charset', charset); 
        head.appendChild(script); 
       } 
      } 
     } 
     return script; 
    } 
}; 

...

$scope.$parent.loadScript('lib/ace/ace.js', 'text/javascript', 'utf-8'); 

あります外部スクリプトに含まれているオブジェクトが利用できるようになるまで少し時間がかかりますので、使用する前にその存在を確認する必要があります。

誰かが時間を節約することを望みます。

Answer 4

私はちょうどhttps://oclazyload.readme.io/を試しました。それは箱の外で動作します。

bower install oclazyload --save 

あなたのモジュールをロードして、コントローラに必要なモジュールを挿入：

var myModule = angular.module('myModule', ['oc.lazyLoad']) 
    .controller('myController', ['$scope', '$ocLazyLoad', '$injector', 

     function($scope, $ocLazyLoad, $injector) { 
      $ocLazyLoad.load(
        ['myExtraModule.js', 
         'orAnyOtherBowerLibraryCopiedToPublicFolder.js' 
        ]) 
       .then(function() { 
        // Inject the loaded module 
        var myExraModule = $injector.get('myExtraModule'); 
       }); 
     } 
    ]);