使用 Angular ui-routing resolve 加载 requirejs 模块

Question

我正在尝试使用 require.js 延迟加载 angular 中的一些依赖项，但我遇到了一些问题。

我相信下面的代码应该在 angular 需要它之前尝试加载寄存器控制器（通过 angular-ui-router）：

  .state('register', {
    url: '/register',
    class: 'login',
    title: 'Register',
    templateUrl: 'app/security/register.view.html',
    controller: 'RegisterController',
    controllerAs: 'register',
    resolve: {
      require: function ($q) {
        return $q(function (resolve, reject) {
          console.log('security/register.controller loading')
          require(['security/register.controller'], function () {
            console.log('security/register.controller loaded')
            resolve()
          })
        })
      }
    }
  })

但是当我从登录状态切换到注册状态时，我在控制台中得到如下输出：

RouteChanged Login
security/register.controller loading
security/register.controller loaded
RouteChanged Register
Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?p0=RegisterController&p1=not%20aNaNunction%2C%20got%20undefined

因此，即使解析运行，angular 也会抛出一个错误，指出找不到 RegisterController。

Here's a link to a plunker. 如您所见，当您单击链接时控制器未加载，并且控制台中显示一条错误消息。

Answer 1

试试这个：

resolve: {
      require: function ($q) {
        //tell ui-router to wait
        var deferred = $q.defer(); 
          console.log('security/register.controller loading')

          require(['security/register.controller'], function () {
            console.log('security/register.controller loaded')
            deferred.resolve()
          });
         return deferred.promise; 
      }

Answer 2

事实证明，问题出在我错误的假设上，即您可以在 bootstrap 之后向 angular 添加一个控制器，这显然可以，只是与 [=15] 的方式不同=].如果在 bootstrap 之后添加它们，则需要缓存控制器提供程序的副本，然后向该提供程序注册控制器。我添加了以下代码：

var app = angular.module('app', ['ui.router'])

var cachedProviders = {}
  app.config(['$controllerProvider',
    function(controllerProvider) {
      cachedProviders.$controllerProvider = controllerProvider;
    }
  ]);
  $(function (){
    app.controller = function (name, controller) {
      console.log('Loading (using post-boostrap loader):', name)
      cachedProviders.$controllerProvider.register.apply(this, arguments)
    }
  })

到我的应用程序模块文件，它开始工作了。我不太确定这是否会产生负面影响，但现在它可以满足我的要求。

Answer 3

我个人使用 ui 路由器与 $ocLazyLoad 提供商 https://github.com/ocombe/ocLazyLoad

它更简单而且效果很好。这是一个例子：

     .state('dashboards.dashboard_2', {
                url: "/dashboard_2",
                templateUrl: "views/dashboard_2.html",
                data: { pageTitle: 'Dashboard 2' },
                resolve: {
                    loadPlugin: function ($ocLazyLoad) {
                        return $ocLazyLoad.load([
                            {
                                serie: true,
                                name: 'angular-flot',
                                files: [ 'js/plugins/flot/jquery.flot.js', 'js/plugins/flot/jquery.flot.time.js', 'js/plugins/flot/jquery.flot.tooltip.min.js', 'js/plugins/flot/jquery.flot.spline.js', 'js/plugins/flot/jquery.flot.resize.js', 'js/plugins/flot/jquery.flot.pie.js', 'js/plugins/flot/curvedLines.js', 'js/plugins/flot/angular-flot.js', ]
                            },
                            {
                                files: ['js/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js', 'js/plugins/jvectormap/jquery-jvectormap-2.0.2.css']
                            },
                            {
                                files: ['js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js']
                            },
                            {
                                name: 'ui.checkbox',
                                files: ['js/bootstrap/angular-bootstrap-checkbox.js']
                            }
                        ]);
                    }
                }
            })

使用 Angular ui-routing resolve 加载 requirejs 模块

Using Angular ui-routing resolve to load requirejs modules

requirejs

angularjs

angular-ui-router