2

我正在使用 ocLazyLoad 在 Angular 中按需加载我的模块。这些模块完全不同，我们应该使用服务器检查我们应该加载哪个模块。在使用 ocLazyLoad 之前，我在我的主视图中加载了这些单独模块的所有连接的 js 文件。所以我们正在加载所有这些。

现在很明显我正在按需加载这些文件，这意味着它应该从服务器读取数据并查看应该加载哪些模块并加载一个兆字节的文件，最重要的是在 Angular 开始编译视图之前加载它。

我正在使用 ocLazyLoad 的承诺来 $compile 视图（正文），但是由于它被执行了两次甚至更多次，所以有时我的指令不起作用。

所以我想我有两个选择：

  1. 在 ocLazyLoad 注入和加载模块之后，使 angular 手动编译视图（我搜索了很多，但我找不到如何！）！

  2. 从服务器读取所需模块的列表，并在应用程序的可能运行阶段甚至在 angular.bootstrap 之前使用 LazyLoad。（我已经这样做了，但是由于 $http 请求是异步完成的，它有时会工作，并且在角度编译之前加载，有时不会）

如果您能帮我解决这个问题，我将不胜感激。

spa.run(['$rootScope', '$location', '$route', '$localStore', '$templateCache', 'Analytics', 'preflightValue', '$ocLazyLoad', '$http',
'$compile', function($rootScope, $location, $route, $localStore, $templateCache, Analytics, preflightValue, $ocLazyLoad, $http, $compile ) {
    $rootScope.$on('cfpLoadingBar:completed', function(event, args) {
        angular.element($('body')).addClass('cfp-done');
    });

    $http({
        method: 'POST',
        url: url,
        data: {
            route: "/dashboard"
        },
        headers: {
            // My Headers
        }
    }).success(function (data, status, header, config) {
        var currentModules = $ocLazyLoad.getModules();
        for (var i = 0; i < data.data.cloudwares.length; i++) {
            var moduleName = data.data.cloudwares[i];
            if (currentModules.indexOf(moduleName) === -1 && moduleName !== 'bot-manager') {
                preflightValue.addModule(moduleName);
            }
        }
        $ocLazyLoad.load(preflightValue.modulesList()).then(function () {
            preflightValue.emptyList();
        });
    });
}]);

// 更新

请注意，我们没有使用 ui-router 或 ngRouter。我们每次使用 $resource 从服务器获取路由的状态。

4

2 回答 2

2

在您的配置文件中尝试使用延迟加载事件声明路由

app
.config(function ($stateProvider, $urlRouterProvider,ParseProvider){

        .state ('home', {
            url: '/home',
            // templateUrl: 'views/home.html',
            templateUrl: 'views/home.html',
            resolve: {
                loadPlugin: function($ocLazyLoad) {
                    return $ocLazyLoad.load ([
                        {
                            name: 'css',
                            insertBefore: '#app-level',
                            files: [
                                'vendors/bower_components/fullcalendar/dist/fullcalendar.min.css',
                            ],

                        },
                        {
                            name: 'vendors',
                            insertBefore: '#app-level-js',
                            files: [
                                'vendors/sparklines/jquery.sparkline.min.js',
                                'vendors/bower_components/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js',
                                'vendors/bower_components/simpleWeather/jquery.simpleWeather.min.js'
                            ]
                        }
                    ])
                }
            }
        })
})

从此您可以将任何脚本加载到您的视图中。

于 2016-08-28T10:47:20.227 回答
1

我实际上是通过问另一个问题来解决这个问题的！我所要做的就是回报两个承诺！

在此处找到解决方案：在另一个内部使用 $routeProvider 解析函数

于 2016-08-31T05:37:26.680 回答