Question

我使用meteor + angular。我的目的是在app bootstrap之后添加更多依赖项（这是因为程序包是一开始处理bootstrapping的程序包，我不太了解它）。在这样做的同时，我还想强制执行一个基本的代码结构，例如，我将在一个模块中编译所有控制器。

以下是基本想法：

'use strict';

angular.module('app.controllers', [])

    .controller('MainCtrl', function() {
        // ...
    })

    .controller('SubCtrl', function() {
        // ...
    })

    .controller('AnotherCtrl', function() {
        // ...
    });

然后将其作为依赖项包含在主模块中：

angular.module('app', [
    'app.filters',
    'app.services',
    'app.directives',
    'app.controllers' // Here
]);

经过一番研究，我发现我尝试做的事情（在bootstrap之后添加依赖项）实际上是角度团队的功能请求的一部分。因此，我的选择是使用$controllerProvider和register()函数：

Meteor.config(function($controllerProvider) {
    $controllerProvider.register('MainCtrl', function($scope) {
        // ...
    });
});

Meteor.config(function($controllerProvider) {
    $controllerProvider.register('SubCtrl', function($scope) {
        // ...
    });
});

Meteor.config(function($controllerProvider) {
    $controllerProvider.register('AnotherCtrl', function($scope) {
        // ...
    });
});

它的作品虽然不那么优雅。问题是：

做config和register部分的更优雅方式是什么？
有没有办法注册模块呢？

Answer 1

创建您的模块：

angular.module('app.controllers', []);

将其添加为依赖项：

angular.module('app').requires.push('app.controllers');

Answer 2

根据this presentation（幻灯片12），您可以将controllerProvider分配给应用。

替换模块controller方法的示例：http://jsfiddle.net/arzo/HB7LU/6659/

var myApp = angular.module('myApp', []);

//note overriding controller method might be a little controversial :D 
myApp.config(function allowRegisteringControllersInRuntime($controllerProvider) {
    var backup = myApp.controller;
    myApp.controller = $controllerProvider.register;
    myApp.controller.legacy = backup;
})

myApp.run(function ($rootScope, $compile) {

    myApp.controller('MyCtrl', function($scope) {
        $scope.name = 'Superhero';
    })

    var elem;
    var scope=$rootScope;
    elem = $compile('<p ng-controller="MyCtrl">{{name}}</br><input ng-model="name" /></p>')($rootScope, function (clonedElement, scope) {
        console.log('newly created element', clonedElement[0])
        document.body.appendChild(clonedElement[0]);
    });
    console.log('You can access original register via', myApp.controller.legacy);
})

Answer 3

我见过的唯一方法是使用您自己的函数替换angular.module函数，返回用于引导应用程序的模块。

var myApp = angular.module('myApp', []);    
angular.module = function() {
    return myApp;
}

以便之后注册的所有模块实际上都在您的myApp模块中注册。

此方法与您在问题中描述的方法（使用$controllerProvider等提供程序）相结合，可以在angular.bootstrap之后添加“模块”。

<强>演示

请参阅此jsfiddle了解演示：https://jsfiddle.net/josketres/aw3L38r4/

<强>缺点

将不会调用config之后添加的模块的angular.bootstrap块。也许有办法解决这个问题，但我还没找到。
覆盖angular.module感觉就像是“肮脏的黑客”。

angular.bootstrap之后的Angular添加模块

3 个答案: