javascript - AngularJS: 別の js ファイルをロードした後のモジュールの動的注入

Question

私のより広い問題は、メイン Web ページで使用される JS ファイルのサイズを小さくすることです。grunt uglify を使用して縮小し、455KB から 140KB に縮小しました。

2 番目のステップとして、メイン ページで不要なファイルを削除します。したがって、最初の JS ファイルのサイズを 90KB に減らし、残りの 50KB のファイルを後でロードすることができました。

Single page application - load js file dynamic based on partial viewで言及されている Ben Thielker の loadScript 関数を使用 して、JS ファイルを動的にヘッドにロードしました。

ここでの問題は、2 番目の JS ファイルで定義されたモジュールがロードされないことです。これは、アプリの開始時に依存関係を以前に言及できなかったためです (エラーがスローされる可能性があります)。2番目のJSファイルに存在するモジュールを動的にロードしたい。

前述の loadScript のコールバック関数で以下を試しました。

angular.module('reportsApp', ['reportsApp.DList', 'reportsApp.item', 'reportsApp.Filters', 'reportsApp.Download'])
.controller('ReportsCtrl', ['$scope', '$rootScope', '$injector', function($scope, $rootScope, $injector) {
    $rootScope.accessDenied = !$scope.accessReports;
    $rootScope.loadScript('public/js/grid.min.js','text/javascript','utf-8', function() {
        console.log('****************grid.min.js loaded successfully.....');                        
        var grid;
        var bool = $injector.has('reportsApp.Grids');
        console.log(bool);//outputs "false"         
        if(bool) {              
            grid = $injector.get('reportsApp.Grids');
        }           
    });     
}])

しかし、上記のコードはモジュールを検出しません。angularのcreateInjector関数を調べたところ、モジュール名の最後に文字列「Provider」が追加されていることがわかりました。これが物事を台無しにしているかどうかはわかりません。

また、これは reportsApp.Grids モジュールの 1 行目です。

angular.module('reportsApp.Grids', ['ui.grid'])

ここで、reportsApp.Grids は最初の JS ファイル自体に存在しますが、「ui.grid」は後でロードされる 2 番目の JS ファイルにのみ存在します。

ここで $injector.invoke 関数をどのように使用すればよいですか? またはこれに対する最善のアプローチは何ですか?