オンザフライメインモジュールにモジュールを挿入する方法

Question

1つのページアプリケーションで角を使用していませんが、ロードオーダーの問題のためにメインアプリケーションモジュールを1回定義したいと思います。同時に私はすべてのJSファイルがすべてのページにロードされるわけではないので、ページ単位でモジュールを注入/要求したいと思います。 = angular.module

アプリケーション（「アプリ」、[]）

、それらをコントローラから、または後の段階で注入した：

はノー必要なモジュールとアプリケーションを定義することはできますか？

Answer 1

いいえ、現時点で正式にはサポートされていません。すべてのモジュールは、AngularJSアプリケーションがブートストラップされる前に、ブラウザにロードされ（メインアプリケーションモジュールの依存として宣言されている）必要があります。

Answer 2

あなたの質問を読んで、私の頭の上にない、私は考えられる解決策/ハックを考えることができます。

アイデアはどのモジュールが含まれている前に、依存関係の配列を定義し、各モジュールの中でそれに追加することです：

// before anything else 
window.loadedDependencies = []; 

// at the end of each module file: 
window.loadedDependencies.push('moduleName') 

// after all that, at the app definition: 
app = angular.module("app", loadedDependencies) 

正直なところでは、私は本当にどんな意味合い/合併症を考慮されていないことこのメソッドは、私が（スクリプトファイルの呼び出しが少なく、キャッシングがあなたのユースケースに適していないのはなぜですか？）まで、これを暗示することはできません。

Answer 3

Tiagoの素晴らしいアイデア（upvote him！私は私のモジュールで次のようにしています：

window.dependencies = _.union(window.dependencies || [], [ 
    "ngRoute", 
    "app.mymodule1" 
]); 

angular 
    .module("app.mymodule1", []) 
    .config(["$routeProvider", function ($routeProvider) { 
     // more code 
    }]); 

私の app.jsで

と、この：

私はLoDashを使用するので、私はユニークな値の配列を取得するには、依存関係を union

var app; 

window.dependencies = _.union(window.dependencies || [], [ 
    "ngRoute", 
    "app.anothermodule" 
]); 

window.app = app = angular.module("app", window.dependencies); 

- 私のモジュールのいくつかはapp.jsと同じ依存関係を使用して、例えばngRoute。魔法のように

<!-- scripts from other pages/modules included here --> 

<script src="/js/anothermodule/anothermodule.js"></script> 
<script src="/js/app.js"></script> 

作品：

私のスクリプトは、このようなbodyタグの外観の下部に含まれています！

マイページは「マスター」ページを共有しますが、自分のファイルにモジュール定義があるため、このようなものが必要でした。

Answer 4

私はそれが次のことについて非常に美しいが、何ではないことを知っている：

var injectedDependencies = [.....]; 
angular.prevmodule = angular.module; 
angular.module = function(name, params){ 
    if(params){ 
     params.push(injectedDependencies); 
    } 
    return angular.prevmodule.apply(angular, arguments); 
} 

編集：あなたはアプリがロギング用exapmpleため（それらを知らなくても、モジュールを挿入したい場合は、これが便利であることに注意してください、モニタリング、セキュリティなど）を提供しますが、アプリケーションがブートストラップされた後にインジェクトする場合は必要ありません。

Answer 5

私は同じ問題を抱えています。 私はhttp://blog.getelementsbyidea.com/load-a-module-on-demand-with-angularjs/があなたが望むことをするかもしれないと思います。そのgithubのhttps://github.com/ocombe/ocLazyLoadで

を探すことが出来ます：

1. 注入された唯一のアプリがAppCtrl.jshttps://github.com/ocombe/ocLazyLoad/blob/master/examples/example1/js/app.js#L24
2. AppCtrl.js後で実行時の荷重グリッドhttps://github.com/ocombe/ocLazyLoad/blob/master/examples/example1/js/AppCtrl.js#L28（およびasynchrously をロードしているアプリhttps://github.com/ocombe/ocLazyLoad/blob/master/examples/example1/index.html#L2
3. アプリであること）！ voi'laは

これは少し複雑に見えるかもしれませんが、あなたは、実行時にそれらをロード中に本当に興味を持っている場合、これは、手動で手動_invokeQueueをmodyfing除いて、唯一の解決策かもしれません。

Answer 6

我々はmyModule.js

app.requires.push('app.myModule'); 

とあなたのindex.html内でapp.requires

//app.js 
    var app = angular.module('myngapp',['ngRoute','ngCookies','ui.bootstrap','kendo.directives','pascalprecht.translate','tmh.dynamicLocale']); 

    app.config(['$routeProvider', '$httpProvider', '$translateProvider', 'tmhDynamicLocaleProvider', '$compileProvider', function($routeProvider, $httpProvider, $translateProvider, tmhDynamicLocaleProvider, $compileProvider) { 
    'use strict'; 

    $compileProvider.debugInfoEnabled(false); 

    $routeProvider.otherwise({ 
     redirectTo: '/login' 
    }); 
    }]); 

を使用してそれを達成することができ、次のapp.js最初とmyModule.jsが含まれます。このようにして、app.jsを変更せずにn個のモジュールを含めることができます。動的にロードされたモジュールはまた、我々のアプリケーション