在 angular.bootstrap 之后添加 Angular 模块

Posted 2023-03-08

【中文标题】在 angular.bootstrap 之后添加 Angular 模块

【英文标题】：Angular add modules after angular.bootstrap

【发布时间】：2014-03-01 08:13:10

【问题描述】：

我正在使用流星+角度。我的目的是在应用程序引导之后添加更多依赖项（这是因为包是一开始就处理引导的包，我对它没有太多控制权）。现在，在这样做的同时，我还想强制执行一个基本的代码结构，例如，我将在一个模块中编译所有控制器。

这是基本的想法：

'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
]);

经过一些研究，我发现我正在尝试做的事情（在引导后添加依赖项）实际上是对 Angular 团队的功能请求的一部分。所以我的选择是使用例如$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 部分有什么更优雅的方法？ 有没有办法注册模块？

【问题讨论】：

groups.google.com/forum/#!msg/angular/w0ZEBz02l8s/YK3H0eMmlxcJ

【参考方案1】：

创建你的模块：

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

将其添加为依赖项：

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

【讨论】：

你能提供这个解决方案的演示吗？例如在 jsfiddle.net 上？

据我了解，做 angular.module('app').requires.push('app.controllers');将简单地将“app.controllers”添加到应用程序内的需求数组中。这不会调用或通知 Angular 新要求。在此之后您将使用什么代码来加载通知角度。我尝试了 angular.module('app').run() 和事件 $rootScope.$digest() 但不起作用。谢谢。

我遇到了类似的问题.. 有什么解决办法吗？？

这在 bootstrap 之后不起作用，只有在页面的 ready 事件触发并启动 bootstrap 之前执行代码。

【参考方案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);
)

【参考方案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 感觉就像是“肮脏的黑客”。

【讨论】：

来源：pinkieguy.com/post/101949656975/…