angular.bootstrap之后的Angular添加模塊

Question

我正在使用meteor + angular。 我的目的是在app引導程序之后添加更多依賴項（這是因為程序包是在開始時處理引導的程序包而我沒有太多控制它）。 現在，在執行此操作時，我還想強制執行基本代碼結構，例如，我將在一個模塊中編譯所有控制器。

這是基本的想法：

'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

根據此演示文稿 （幻燈片12），您可以將controllerProvider分配給app。

更換模塊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/

缺點

• 不會調用angular.bootstrap之后添加的模塊的config塊。 也許有辦法解決這個問題，但我還沒找到。
• 覆蓋angular.module感覺就像一個“骯臟的黑客”。