使用ui路由器解析延迟加载angularjs控制器

我正在尝试使用angular.js、ui router和require.js，但感觉很困惑。我试着学习这个教程。首先，让我向您展示我的代码：

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
    };
});

现在在my registration.js中，我有以下代码：

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

一切正常，甚至registration.js中的代码也在运行。但问题是控制器函数中的代码从未运行，我得到了错误 错误：[ng:areq]函数，未定义

我的代码似乎没有成功注册控制器功能。有什么想法吗

---

其中的提示是“如果这些依赖项中的任何一个是承诺，它们将被解析并转换为一个值，然后控制器被实例化并触发$routeChangeSuccess事件。”但是如果我将deferred.resolve（）放在；从超时内提到的代码，然后在5秒后运行，我的控制器代码将运行，我的视图将在解析之前呈现，这很奇怪。

将您所在州的url更改为

”

应该可以做到这一点<代码>'是root

example.com/

，

'/'

是

example.com/#/

，我来给我的2美分。我看到你已经解决了这个问题，如果其他人有类似的问题，我只想添加一条评论

我遇到了一个非常类似的问题，但是我有一部分代码等待DOM加载，所以我直接调用它（不使用“$（document.ready）”，它就工作了

$(document).ready(function() { /*function was being called here*/ });

---

这就解决了我的问题。可能是不同的情况，但我遇到了相同的错误。

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

确保惰性控制器脚本可以使用

app.controllerProvider

。看起来您是使用

app.lazy{…}

完成的，顺便说一句，这是一个非常好的操作：）

确保lazy ctrl脚本使用

define（）

而不是

require（）

我无法从您的代码中判断您是否这样做了

以下是我使用public

app.controllerProvider

方法设置的ui路由器：

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;
            }
          }
        }
      }
    });
});

然后在我的延迟加载控制器中，我注意到我必须使用

require（['app']）

，如下所示：

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

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

});

GitHub上的来源：

---

Plunker上的演示：

事实上，我有一些其他代码可以删除后面的斜杠，所以我认为不会有什么区别。另一方面，我正在使用HTML5路由模式。不确定HTML5路由模式是否会影响它，但我认为不会。至于删除尾部斜杠的代码，您的意思是它将它们从您的url、链接href中删除，还是在请求路由时，但在将其交给ui路由器之前删除？对于尾部斜杠，我的意思是“example.com/sample url”和“example.com/sample url/”之间没有区别。路由没有问题，因为状态已激活，它会搜索控制器。我的控制器在应用程序启动时未注册，而是在状态激活后注册。但是，它仍然应该工作，因为它应该在状态请求控制器之前注册。这里提到的依赖关系是指注入控制器的内容，而不是控制器本身。另外，请注意，在您上面提到的教程（）中，他们使用angular的内置路由器，但在您的用例中，您使用的是ui router的$state，它可能在运行控制器的resolves之前已经查找了控制器的状态，因为您的控制器来自resolve，那么它在第一次命中状态时就不存在了。它不应该是

return deferred.promise而不是
延迟返回。$promise在解析函数中？