Question

我使用的某些JavaScript库可能会也可能不会使用，具体取决于用户是否导航到特定视图。如何延迟加载并仍然满足所有Angular依赖项。

例如，我正在使用带有ng-map的谷歌地图API（谷歌指示git hub）。如果我在HTML HEAD中加载所有内容，那么一切正常。我试图将脚本标签移动到使用ng-map的视图部分，但是我得到一个错误，因为angular.module必须通过ng-map模块。如果我只将Google API脚本移动到视图部分，我会收到另一个错误，即没有为ng-map定义Google。

底线是，您是否必须在初始加载时加载所有脚本/模块？

Answer 1

如果您使用的是第三方库，则可以在需要时使用延迟加载选项加载它们，如下所示：

创建服务：

.service('lazyLoad', ['$document', '$q', '$timeout', function ($document, $q, $timeout) {

    function loader(createElement) {
        var promises = {};

        return function (url) {
            if (typeof promises[url] === 'undefined') {
                var deferred = $q.defer();
                var element = createElement(url);

                element.onload = element.onreadystatechange = function (e) {
                    $timeout(function () {
                        deferred.resolve(e);
                    });
                };
                element.onerror = function (e) {
                    $timeout(function () {
                        deferred.reject(e);
                    });
                };

                promises[url] = deferred.promise;
            }

            return promises[url];
        };
    }


    this.loadScript = loader(function (src) {
        var script = $document[0].createElement('script');

        script.src = src;

        $document[0].body.appendChild(script);
        return script;
    });


    this.loadCSS = loader(function (href) {
        var style = $document[0].createElement('link');

        style.rel = 'stylesheet';
        style.type = 'text/css';
        style.href = href;

        $document[0].head.appendChild(style);
        return style;
    });
}])

然后在您的Angular模块上为您的第三方库添加服务：

.service('ckeditorService', function ($window, $q, lazyLoad) {
    this.CKEDITOR = function () {
        var deferred = $q.defer();

        if (typeof $window.CKEDITOR === "undefined") {
            lazyLoad.loadScript('lib/ckeditor/ckeditor.js').then(function () {
                deferred.resolve($window.CKEDITOR);
            }).catch(function () {
                console.log('Error loading : lib/ckeditor/ckeditor.js');
                deferred.resolve($window.CKEDITOR);
            });
        } else {
            deferred.resolve($window.CKEDITOR);
        }

        return deferred.promise;
    }

})

然后在您想要使用该服务的Controller中：

.controller('maintainItemDetailsController', function (ckeditorService) {

     ckeditorService.CKEDITOR().then(function (CKEDITOR) {
        self.editable = true;
        CKEDITOR.inline('description');
        CKEDITOR.inline('additional_info');
    });

})

在此示例中，我使用的是ckeditor库，但在您的情况下，它将是Google地图库

Answer 2

您应该将脚本拆分为特定于条目的模块，对于该任务，您可以将browserify与fuctor-bundle或partion-bundle一起使用，以获得更大的灵活性。

关于收集脚本以及收集角度模块（不一样）的问题，您可以查看answer。

使用AngularJS

2 个答案: