Question

我更广泛的问题陈述是减少主网页中使用的JS文件大小。我使用grunt uglify将其从455KB减少到140KB。

作为第二步，我将删除主页上不需要的不必要的文件。因此，我能够将初始JS文件大小减少到90KB，稍后将加载剩余的50KB文件。

我使用了Ben Thielker提到的loadScript函数 Single page application - load js file dynamically based on partial view将JS文件动态加载到头上。

现在问题是第二个JS文件中定义的模块没有加载为他们的依赖关系在应用程序开始时无法提及（会抛出错误）。我想动态加载第二个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');
        }           
    });     
}])

但上面的代码甚至没有检测到模块。当我查看角度的createInjector函数时，我发现他们正在添加一个字符串＆＃39; Provider＆＃39;在modulename的末尾。不确定这是否搞砸了。

此外，这是reportsApp.Grids模块的第一行：

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

这里，reportsApp.Grids存在于初始JS文件本身中，但是＆＃39; ui.grid＆＃39;仅出现在稍后加载的第二个JS文件中。

我究竟应该如何在这里使用$ injector.invoke函数？要么对此最好的方法是什么？

AngularJS：加载另一个js文件后动态注入模块

0 个答案: