1

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

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

我使用了单页应用程序中提到的 Ben Thielker 的 loadScript 函数 - 基于局部视图动态加载 js 文件来将 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');
        }           
    });     
}])

但是上面的代码甚至没有检测到模块。当我查看 angular 的 createInjector 函数时，我发现他们在模块名的末尾添加了一个字符串“Provider”。不确定这是否把事情搞砸了。

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

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

在这里，reportsApp.Grids 存在于初始 JS 文件本身中，但“ui.grid”仅存在于稍后加载的第二个 JS 文件中。

我应该如何在这里使用 $injector.invoke 函数？或者什么是最好的方法？

4

0 回答 0