從模板中動態加載AngularJS模塊（視圖）

Question

背景：爲了說明起見，我們假設您有100,000個視圖（部分）。我們還假設您已經附帶了視圖範圍的控制器以及可能的視圖範圍的服務和過濾器。嘗試設想一個聚合應用程序，其中包含100,000個不同的小應用程序。

問題：當您有需要附帶的控制器「諧音」，典型的解決辦法是做這樣的事情：

：

$routeProvider.when('/app1', { 
     templateUrl: 'partials/view1.html', 
     controller: 'controller1' 
    }); 

控制器從index.html的通過通常裝

<script src="js/directives/Controller1.js"></script> 

這種方法的問題是它不能縮放。有動態加載控制器的解決方案，但它們仍然需要在各種配置中添加觸摸點。理想情況下 - 對於數量爲000的非常小的應用程序，控制器可以動態加載，也可以從部分本身內加載。這將減輕管理多個文件和幾個配置觸點（更不用說網絡請求）的需要，並且保持每個部分都很好地包含。

它看起來像這樣：

在路由器：

$routeProvider.when('/apps/:appId', { 
     templateUrl: 'partials/app-frame.html', 
     controller: 'AppCtrl' 
    }); 

在包含HTML（應用程序框架）包括相對分散的 「小程序」：

<h1>Currently hosting {{appId}}</h1><hr> 
<div class="ng-include: appUrl"></div> 

用appUrl部分解決，在一箇中定義控制器和標記：

<script> 
    myApp.controller('controller1', ['$scope', function ($scope) { 
    $scope.foo = "bar"; 
    }]); 
</script> 


<div ng-controller="controller1"> 
    {{foo}} 
</div> 

對於這樣的情況下，如果有很多泛音和1-1映射控制器和視圖，它可以使意義夫婦兩個的開發效率和維護。它比使用多個文件和其他配置觸點要乾淨得多。

問題是，這是行不通的。這可能與在應用指令之前強制腳本加載一樣簡單，但不知道如何做到這一點？

以下是問題的一些類似的解釋：

https://groups.google.com/forum/#!topic/angular/H4haaMePJU0

Loading Partial Page With Angular and Compile The Controller

從AngularJS團隊伊戈爾說：

I see.. we looked into supporting script tags in jqlite, but what needs to be done to get a cross-browser support involves a lot of black magic. For this reason we decided that for now we are just going to recommend that users use jquery along with angular in this particular case. It doesn't make sense for us to rewrite one third of jquery to get this working in jqlite. 

但我不知道他的意思是「使用jquery「... JQuery已從索引加載到應用程序中。html（和之前的angularjs），但它聽起來像我需要做一些特別的部分本身。

Answer 1

在AngularJS引導程序之後，您無法通過module('app').controller(name, function() { .. })添加新控制器。爲了使它工作，你應該使用$controllerProvider.register(name, function() { .. })。

您可以覆蓋原來的控制器在下面的方式註冊功能，可以添加控制器前和POS引導：

var app = angular.module('app', [ 
    'ui.router' 
]); 

app.config(function($controllerProvider) { 
    app.controller = function (name, controller) { 
     $controllerProvider.register(name, controller); 
    }; 
});