angularjs - 使用 ui-router 解析延迟加载 angularjs Controller

Question

我正在尝试开始工作 angular.js、ui-router 和 require.js，但感到很困惑。我尝试按照本教程http://ify.io/lazy-loading-in-angularjs/进行操作。首先，让我向您展示我的代码:

app.js =>

var app = angular.module('myApp', []);
app.config(function ($stateProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
    $stateProvider.state('home',
        {
            templateUrl: 'tmpl/home-template.html',
            url: '/',
            controller: 'registration'
            resolve: {
                deps: function ($q, $rootScope) {
                    var deferred = $q.defer(),
                        dependencies = ["registration"];
                    require(dependencies, function () {
                        $rootScope.$apply(function () {
                            deferred.resolve();
                        });
                    })
                    return deferred.$promise;
                }
            }
        }
    );
    app.lazy = {
        controller: $controllerProvider.register,
        directive: $compileProvider.directive,
        filter: $filterProvider.register,
        factory: $provide.factory,
        service: $provide.service
    };
});

现在在我的 Registration.js 中我有以下代码:

define(["app"], function (app) {
    app.lazy.controller("registration" , ["$scope", function ($scope) {
        // The code here never runs
        $scope.message = "hello world!";
    }]);
});

一切正常，甚至registration.js中的代码也运行了。但问题是 Controller 函数内的代码永远不会运行，我收到错误错误:[ng:areq] http://errors.angularjs.org/1.2.23/ng/areq?p0=registration&p1=not一个函数，未定义

看来我的代码没有成功注册 Controller 功能。有什么想法吗？

P.s.在 ui-router docs据说“如果这些依赖项中有任何一个是 promise ，它们将在实例化 Controller 并触发 $routeChangeSuccess 事件之前被解析并转换为一个值。”但是如果我把 deferred.resolve();从超时内提到的代码中，并在 5 秒后运行它，我的 Controller 代码将运行，并且我的 View 将在解析之前呈现，奇怪。

Answer 1

似乎我遇到了完全相同的问题，遵循与您完全相同的教程，但使用了 ui-router。我的解决方案是:

1. 确保 app.controllerProvider 可用于惰性 Controller 脚本。看起来您使用了 app.lazy {...} 来完成此操作，顺便说一句，这是一个非常好的接触:)
2. 确保惰性 ctrl 脚本使用 define() 而不是 require() 我无法从您的代码中判断您是否已执行此操作。

这是我使用公共(public) app.controllerProvider 方法设置的 ui-router:

app.config(function ($stateProvider, $controllerProvider, $filterProvider, $provide, $urlRouterProvider) {

  app.lazy = {
    controller: $controllerProvider.register,
    directive: $compileProvider.directive,
    filter: $filterProvider.register,
    factory: $provide.factory,
    service: $provide.service
  };

  $urlRouterProvider.otherwise('/');

  $stateProvider

    .state('app', {
      url:'/',
    })

    .state('app.view-a', {
      views: {
        'page@': {
          templateUrl: 'view-a.tmpl.html',
          controller: 'ViewACtrl',
          resolve: {
            deps: function ($q, $rootScope) {
              var deferred = $q.defer();

              var dependencies = [
                'view-a.ctrl',
              ];

              require(dependencies, function() {
                $rootScope.$apply(function() {
                  deferred.resolve();
                });
              });

              return deferred.promise;
            }
          }
        }
      }
    });
});

然后在我的延迟加载 Controller 中，我注意到我必须使用 require(['app'])，如下所示:

define(['app'], function (app) {

  return app.lazy.controller('ViewACtrl', function($scope){
     $scope.somethingcool = 'Cool!';
  });

});

GitHub 上的来源:https://github.com/F1LT3R/angular-lazy-load

Plunker 演示:http://plnkr.co/edit/XU7MIXGAnU3kd6CITWE7