Question

我在使用带有$ stateProvider的oclazyload时遇到问题。

我已经指定控制器.js应该加载到路由器配置中，它确实可以，＆＃39;但它不能用作templateURL中加载的文件中的ng-controller属性。

ui-route config：

core
.run(
    [                    '$rootScope', '$state', '$stateParams',
        function ($rootScope,       $state,     $stateParams) {
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;              
        }
    ]
)
.config(
    [                    '$stateProvider', '$urlRouterProvider',
        function ($stateProvider,       $urlRouterProvider) {
            console.info('Routing ...');
            $urlRouterProvider
                .otherwise('/app/dashboard');

            $stateProvider
                .state('app', {
                    abstract: true,
                    url: '/app',
                    templateUrl: 'templates/app.html',
                })
                .state('app.orders', {
                    abstract: true,
                    url: '/orders',
                    templateUrl: 'templates/orders/orders.html',
                })
                .state('app.orders.index', {
                    url: '/index',
                    templateUrl: 'templates/orders/index.html',
                    resolve: {
                        deps: ['$ocLazyLoad',
                            function( $ocLazyLoad ){
                                console.info('Path ot order controller in route config',Momento.paths.js + 'controllers/orders/index.js');
                                return $ocLazyLoad.load([
                                        Momento.paths.js + 'controllers/orders/index.js'
                                ])
                            }
                        ]
                    }
                })
        }
    ]
)
;

我的templateURL文件开始了：

<div class="" id="" ng-controller="OrdersIndexController">...</div>

但是当它加载时，控制台会抛出错误：

<info>orders/index controller loaded controllers/orders/index.js:3
<info>Now I've finished loading the controller/order/index.js config/ui-router.js:69
<info>orders template loaded VM30437:1 (<-- this is the app.orders abstract template with ui-view directive ready for app.orders.index view)
<error>Error: [ng:areq] Argument 'OrdersIndexController' is not a function, got undefined
... <trace>

因此，lazyload正确加载了文件，由上面的控制台输出和开发人员工具中的网络选项卡确认，但是templateURL中没有用作控制器的文件？是否需要使用控制器在路由器配置中使用别名：＆＃39;＆＃39;键或模板？是否需要专门附加到此应用程序中的（仅）模块？

我错过了什么？

PS：确认控制器的名称实际上是OrdersIndexController：

core 
.controller('OrdersIndexController', [
                        'Model', '$scope', '$window', 
    function(   Model,      $scope,     $window){
        console.info("OrdersIndexController fired");
    }
]);

Answer 1

在函数function($ocLazyLoad){}内，你必须声明包含控制器的模块名称和文件名“to lazy load”

function( $ocLazyLoad ){
     return $ocLazyLoad.load(
         {
             name: 'module.name',
             files: ['files']
         }
     );
}

Answer 2

您必须使用

注册您的控制器

angular.module("myApp").controller

<强>工作

angular.module("myApp").controller('HomePageController', ['$scope', function ($scope) {
    console.log("HomePageController loaded");

}]);

无效

var myApp = angular.module("myApp") 

myApp.controller('HomePageController', ['$scope', function ($scope) {
    console.log("HomePageController loaded");

}]);

Answer 3

如果您使用ocLazyLoad 1.0 -> With your router

的当前记录方式

...
resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
  // you can lazy load files for an existing module
         return $ocLazyLoad.load('js/AppCtrl.js');
}]

}

然后在js / AppCtrl.js

你有这样的事情：

angular.module("myApp").controller('DynamicNew1Ctrl', ['$scope', function($scope) {
    $scope.name = "Scoped variable";
    console.log("Controller Initialized");
}]);

请注意，对于angular.module（“myApp”），您将新控制器附加到现有模块，在本例中为mainApp，因此任何新的动态控制器都可以使用应用程序依赖项。但你可以定义一个新模块注入你的依赖项，如here所述，后者通常用于使用插件架构构建你的应用程序，并且你想要隔离动态模块，这样它们只能访问某些特定的依赖

使用ocLazyLoad延迟加载带有$ stateProvider的控制器

3 个答案: