0

我只想为某个视图加载 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'）还为时过早，因为它们被放置在下面的控制器中并且将被延迟加载。

正确的方法是什么/如何做到这一点？

以下示例运行没有错误，并且 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
        }
    )
4

1 回答 1

0

有几件事：

  1. 在添加 Angular UI Bootstrap 之前，将核心 Angular 模块放在你的块中。
  2. 你想通过延迟加载来完成什么？

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

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

于 2015-10-12T23:00:18.277 回答