需要时使用AngularJS加载Javascript

我使用的一些JavaScript库可能会被使用，也可能不会被使用，这取决于用户是否导航到特定的视图。如何延迟加载并仍然满足所有角度依赖关系

例如，我将GoogleMapsAPI与ng map（GitHub下的GoogleMaps指令）一起使用。如果我在HTML头中加载所有内容，那么一切都可以正常工作。我试图将脚本标记移动到使用ng map的view partial中，但出现错误，因为angular.module必须传递给ng map模块。如果我只将Google API脚本移动到视图部分，我会得到一个不同的错误，即Google没有为ng map定义

---

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

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

创建服务：

.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('maintainItemDetailsController', function (ckeditorService) {

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

})

---

在本例中，我使用的是ckeditor库，但在您的情况下，它将是Google maps库，您应该将脚本拆分为特定于条目的模块，以便您可以使用该任务或获得更大的灵活性

---

这是关于收集脚本和收集angular模块（它们不一样）的。您可以看看这个。

我有一个示例项目，用于延迟加载angular组件和独立脚本，使用RequireJS进行脚本管理。一般来说，在角度上延迟加载是一种痛苦。这个项目可能会（也可能不会）为您提供一些想法、解决方案等。我正在使用上述服务和控制器加载ckeditor.js和。两个库都已正确加载和添加。我还手动注入所需的模块“ckeditor”，但没有填充ckeditor。