使用ui-router解决延迟加载angularjs控制器

2023年4月3日 276次阅读

我正在尝试使用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中的代码也运行.但问题是控制器功能内部的代码永远不会运行,我得到错误
错误：[ng：areq] http://errors.angularjs.org/1.2.23/ng/areq?p0=registration&p1=not一个函数,未定义

这似乎我的代码没有成功注册控制器功能.有任何想法吗？

附：在ui-router docs中,它被称为“如果这些依赖项中的任何一个是promise,它们将在实例化控制器并触发$routeChangeSuccess事件之前被解析并转换为值.”但是如果我把deferred.resolve();来自timeOut中提到的代码并在说出5秒之后运行它,我的控制器代码运行并且我的视图在解析之前呈现,Strange.

最佳答案 似乎我遇到了完全相同的问题,遵循您所做的完全相同的教程,但使用ui-router.我的解决方案是：

>确保app.controllerProvider可用于延迟控制器脚本.看起来你用app.lazy {…}做了这个,这真的很棒BTW 🙂
>确保懒惰的ctrl脚本使用define()而不是require()如果你这样做,我无法从你的代码中看出来.

这是我的ui-router设置与公共app.controllerProvider方法：

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：https://github.com/F1LT3R/angular-lazy-load

关于Plunker的演示：http://plnkr.co/edit/XU7MIXGAnU3kd6CITWE7

点赞