如何声明延迟加载 (ocLazyLoad) 功能（例如 ngAnimate、ui-bootstrap、..）的依赖项？

Question

我只想为特定视图加载 angular-animate 和 angular-ui-bootstrap，因此我使用 oc.lazyLoad .在大多数情况下它都能正常工作。

在下面的例子中我遇到了一些麻烦（错误：[$injector:nomod] 模块 'ngAnimate' 不可用！）：

那是我的模块：

angular.module('myApp.whatEver', ['oc.lazyLoad', 'ngAnimate', 'ui.bootstrap'])

.controller('WhatEverController', ['$ocLazyLoad', function($ocLazyLoad) {
    $ocLazyLoad.load('icons_and_fonts');  // works
    $ocLazyLoad.load('angular-animate');  // does not work
    $ocLazyLoad.load('angular-ui-bootstrap'); // does not work
 }]);

问题是，在顶部声明依赖项（'ngAnimate'和'ui-bootstrap'）为时过早，因为它们被放置在下面的控制器中并且会被延迟加载。

What/how 是正确的方法吗？

以下示例运行无误，ng-Animate 和 ui-boostrap 已加载，但由于缺少依赖项而无法在视图中使用。

angular.module('myApp.whatEver', ['oc.lazyLoad'])

.controller('WhatEverController', ['$ocLazyLoad', function($ocLazyLoad) {
    $ocLazyLoad.load('icons_and_fonts');  // works
    $ocLazyLoad.load('angular-animate');  // is loaded but not available
    $ocLazyLoad.load('angular-ui-bootstrap'); // is loaded but not available
 }]);

目前只有当我直接集成脚本文件（在主视图中 - index.html）并且我放弃延迟加载（这不是我的目的）时它才有效：

摘录：index.html

<script src="components/angular-ui-bootstrap/ui-bootstrap-tpls-0.14.1.min.js"></script>  
<script src="components/angular-animate/angular-animate.min.js"></script>

摘录：Whatever.js

    angular.module('myApp.whatEver', ['oc.lazyLoad', 'ngAnimate', 'ui.bootstrap'])

.controller('WhatEverController', ['$ocLazyLoad', function($ocLazyLoad) {
    $ocLazyLoad.load('icons_and_fonts');  // works
 }]);

关于 ocLazyLoadProvider.config...

的一些附加信息（答案不需要，但为了完整起见）

// LAZY LOAD
    $ocLazyLoadProvider.config(
        {
            modules: [
                {
                    name: 'icons_and_fonts',
                    files: [
                        'components/font-awesome/css/font-awesome.min.css',
                        'components/weather-icons/css/weather-icons.min.css'
                    ]
                },
                {
                    name: 'angular-ui-bootstrap',
                    files: [
                        'components/angular-ui-bootstrap/ui-bootstrap-tpls-0.14.1.min.js'
                    ]
                },
                {
                    name: 'angular-animate',
                    files: [
                        'components/angular-animate/angular-animate.min.js'
                    ]
                }
            ],
            debug: true,
            events: true
        }
    )

Answer 1

几件事：

在添加 Angular UI Bootstrap.
你想通过延迟加载来完成什么？

IMO，这里正确的解决方案，如果你真的想要延迟加载，是使用 AMD 或 ES6 导入语法和 commonJS（最好是后者，ES6 w / commonJS），因为它会按照你的设计和不需要第三方库。

最后，这个问题与Angular或AngularUIbootstrap无关，而是通用Javascript模块加载。您可以用两个随机但相关的库替换这两个，并且将应用相同的解决方案。

如何声明延迟加载 (ocLazyLoad) 功能（例如 ngAnimate、ui-bootstrap、..）的依赖项？

How can I declare the dependencies of lazy loaded (ocLazyLoad) features (e.g. ngAnimate, ui-bootstrap,..)?

angularjs

angular-ui-bootstrap

ng-animate

oclazyload