ocLazyLoad का उपयोग आलसी लोड करने के लिए $ stateProvider

Question

के साथ एक नियंत्रक लोड करने के लिए मुझे $ राज्य प्रदाता के साथ oclazyload का उपयोग कर समस्याएं आ रही हैं।

मैंने निर्दिष्ट किया है कि नियंत्रक .js राउटर कॉन्फ़िगरेशन में लोड किया जाना चाहिए, और यह करता है, 'लेकिन यह templateURL में लोड की गई फ़ाइल में एनजी-नियंत्रक विशेषता के रूप में उपयोग करने के लिए उपलब्ध नहीं है।

ui मार्ग 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 में? नियंत्रक का उपयोग कर राउटर कॉन्फ़िगरेशन में या तो इसे अलियाड करने की आवश्यकता है: '' कुंजी या टेम्पलेट में? क्या इसे इस ऐप में (केवल) मॉड्यूल से विशेष रूप से संलग्न करने की आवश्यकता है?

मुझे क्या याद आ रही है?

पुनश्च: पुष्टि है कि नियंत्रक के नाम तथ्य OrdersIndexController में है:

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

Answer 1

समारोह अंदर function($ocLazyLoad){} आपको लगता है कि नियंत्रक और आलसी लोड करने के लिए फ़ाइल की "नाम में शामिल मॉड्यूल के नाम घोषित करने के लिए करना चाहिए "

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

Answer 2

आप 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 वर्णित अनुसार एक नई मॉड्यूल को अपनी निर्भरताओं को इंजेक्ट कर सकते हैं, बाद में आमतौर पर जब आप प्लगइन आर्किटेक्चर के साथ अपने ऐप का निर्माण करते हैं और आप गतिशील मॉड्यूल को अलग करना चाहते हैं तो उन्हें केवल कुछ विशिष्ट निर्भरताओं तक पहुंच प्राप्त होनी चाहिए

Answer 3

आप के साथ

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

}]);