AngularJS動態加載控制器

Question

我讀了很多關於lazzy加載，但我使用$ routeProvider時遇到問題。

我的目標是加載一個JavaScript文件，其中包含一個控制器，並添加一個路由到此控制器之前已經加載。

angular.module('demoApp.modules').controller('MouseTestCtrlA', ['$scope', function ($scope) { 
    console.log("MouseTestCtrlA"); 
    $scope.name = "MouseTestCtrlA"; 
}]); 

此文件時的角度bootstap被稱爲不包括我的javascript文件的

要加載的內容。這意味着，我必須加載文件並創建一個到這個控制器的路由。

首先，我開始編寫一個解析函數，它必須加載Javascript文件。但在宣佈在航線聲明我的控制器參數，給了我一個錯誤：

「MouseTestCtrlA」是不是一個功能，得到了不確定

這裏是調用我想設置：

demoApp.routeProvider.when(module.action, {templateUrl: module.template, controller: module.controller, resolve : {deps: function() /*load JS file*/} }); 

從我看到的，控制器參數應該是註冊的控制器

con troller - {（string | function（）=} - 應該與新創建的作用域相關聯的控制器fn或作爲字符串傳遞的已註冊控制器的名稱。

因此，我寫了一個工廠，應該能夠加載我的文件，然後（承諾風格！）我試圖聲明一個新的路線。

它給了我類似下面，其中依賴性是JavaScript文件路徑的數組加載：

使用

ScriptLoader.load(module.dependencies).then(function() { 
    demoApp.routeProvider.when(module.action, {templateUrl: 'my-template', controller: module.controller}); 
}); 

腳本裝載機

angular.module('demoApp.services').factory('ScriptLoader', ['$q', '$rootScope', function ($q, $rootScope) { 
     return { 
      load: function (dependencies) 
      { 
       var deferred = $q.defer(); 
       require(dependencies, function() { 
        $rootScope.$apply(function() { 
         deferred.resolve(); 
        }); 
       }); 
       return deferred.promise; 
      } 
     } 
    }]); 

問題

我仍然有這個JavaScript錯誤「'MouseTestCtrlA'不是一個函數，得到未定義」，這意味着Angular無法解析'MouseTestCtrlA'作爲註冊控制器。

任何人都可以幫助我在這一點上？

Answer 1

重新閱讀這篇文章http://ify.io/lazy-loading-in-angularjs/建議在Angular App中保留$contentProvider實例。

我想出了這個代碼在我的應用程序。JS

demoApp.config(function ($controllerProvider) { 
    demoApp.controller = $controllerProvider.register; 
}); 

它使我預期的外部JavaScript文件中寫入我的控制器：

angular.module("demoApp").controller('MouseTestCtrlA', fn); 

希望這可以幫助！