使用 angularjs 和 requirejs 动态加载控制器答案

【问题标题】：Dynamically loading controller with angularjs and requirejs使用 angularjs 和 requirejs 动态加载控制器
【发布时间】：2015-09-24 22:41:27
【问题描述】：

我正在尝试将 angularjs 应用程序与 requirejs 集成。我想按需预加载模板和控制器。在我的例子中：

http://plnkr.co/edit/vIps7t92OFzA5RXoTjvI?p=preview

我在 app.js 中初始化了控制器 SocialController，我需要在 SocialController 中动态加载 StreamController。不幸的是，我遇到了异常，请参阅浏览器控制台。

参数 'StreamController' 不是函数，未定义

如果我从 SocialController 中删除

angular.module('sampleTest').controller('StreamController', StreamController);

并将其添加到 app.js，它可以工作，但在这种情况下，requirejs 将在开始时预加载它，而不是在我需要时，按需在 SocialController 中预加载。

【问题讨论】：

延迟加载 Angular 代码很棘手（它不应该是 IMO）。看看我对这个angular-require-lazy 的看法——周围还有其他人。

标签： angularjs requirejs

【解决方案1】：

这是一个答案。看起来 Angular 不允许在应用程序启动后实例化任何新服务或控制器。因此，在所有控制器和服务都已初始化之后，我必须将下面的代码添加到底部的 app.js 文件中。这是一个 hack，但解决了使用 requirejs 延迟加载的问题。

请参阅我的 plunkr 链接以及修复程序。现在已经没有异常了，StreamController 是延迟加载并在启动后初始化的。

sampleApp.config(
            function (
                $controllerProvider,
                $compileProvider,
                $filterProvider,
                $provide
            ) {
                sampleApp.controller = $controllerProvider.register;
                sampleApp.directive = $compileProvider.directive;
                sampleApp.filter = $filterProvider.register;
                sampleApp.factory = $provide.factory;
                sampleApp.service = $provide.service;
            }
        );

【讨论】：