7

背景： 我们假设您有 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 (app-frame) 中包含相对不同的“迷你应用程序”：

<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

使用 Angular 加载部分页面并编译控制器

AngularJS 团队的 Igor 说：

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 已经从 index.html 加载到应用程序中（并且在 angularjs 之前），但听起来我需要在部分本身内专门做一些事情。

4

1 回答 1

1

你不能module('app').controller(name, function() { .. }) 在 AngularJS bootstrap 之后添加新的控制器。为了使它工作，你应该使用$controllerProvider.register(name, function() { .. }).

您可以通过以下方式覆盖原始控制器注册功能，以便能够添加控制器 pre 和 pos bootstrap：

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

app.config(function($controllerProvider) {
    app.controller = function (name, controller) {
        $controllerProvider.register(name, controller);
    };
});
于 2015-02-16T11:51:53.000 回答