Question

通常，我会执行以下操作，我的HTML中会有ng-app：

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

myApp.controller("AttributeCtrl", function ($scope) {
    $scope.master = {
        name: "some name"
    };
});

但是，我需要手动引导角度，因为我只在我的应用程序中通过jQuery的$.load()加载它。如果我执行以下操作：

main.js - 这是我想要使用角度的页面被拉入

$("#form").load(contextPath + url, params, function() {
    angular.bootstrap($("#angularApp"));
});

然后被拉入的页面有它自己的javascript：

function AttributeCtrl($scope) {
  $scope.master = { name: "some name"};
}

但是，理想情况下，我希望我的控制器可以在模块级别进行作用。所以我修改了上面这样的代码

main.js

$("#form").load(contextPath + url, params, function() {
    angular.bootstrap($("#angularApp", ["myApp"]));
});

然后......

var app = angular.module("myApp"); // retrieve a module

app.controller("AttributeCtrl", function($scope) {
  $scope.master = { name: "some name"};
});

但是，以这种方式检索模块似乎不起作用。我做错了吗？

Answer 1

在您启动应用后，您无法创建控制器。请参阅the documentation for angular.bootstrap。

在加载或定义模块后，您应该调用angular.bootstrap（）。在应用程序引导后，您无法添加控制器，服务，指令等。

Answer 2

我不知道这是否只是在这里的示例代码中，但是：

angular.bootstrap($("#angularApp", ["myApp"]));

应该是

angular.bootstrap($("#angularApp"), ["myApp"]);

您检索模块的代码应该有效。

Answer 3

已更新

他们更新了文档，现在看起来像这样

数组中的每个项目都应该是预定义模块的名称或（DI注释）函数将由进样器作为运行调用块。请参阅：{@ link angular.module modules}

这似乎是一个错误。

您实施检索模块的方式是正确。只需从文档中引用即可明确，因为它可能并不为人所知。

传递两个或多个参数时，会创建一个新模块。如果通过只有一个参数，一个现有模块（名称作为第一个传递检索模块的参数。

对于你提到的问题，长话短说......

bootstrap函数使用模块列表createInjector调用['ng', ['ngLocale', function(){...}] , 'myApp']（最后一个是您传入的模块）

function bootstrap(element, modules) {
    ...
    var injector = createInjector(modules);

在createInjector()内，它为

中传递的每个模块调用loadModules

function createInjector(modulesToLoad) {
    forEach(loadModules(modulesToLoad), function(fn) { instanceInjector.invoke(fn || noop); });

并loadModules调用angularModule，初始化为angularModule = setupModuleLoader(window);，创建对象window.angular.module

function loadModules(modulesToLoad){
    ....
    var moduleFn = angularModule(module); // triggers the error

发生错误，因为angularModule将第二个参数作为requires。没有它，它将在此行引发异常（第1148行）throw Error('No module: ' + name);

报告：https://github.com/angular/angular.js/issues/3692

Answer 4

不确定这是否算作错误或实施决定（虽然看似很差）。添加一个空数组可以解决您遇到的未定义的require问题，并且可以解决整个问题。

var app = angular.module("myApp", []); // create a module

app.controller("AttributeCtrl", function($scope) {
   $scope.master = { name: "some name"};
});`

另外，在你的小提琴中，你打电话给{{name}}，这不会呈现。你应该打电话给{{master.name}}

修改

谢谢大家的帮助。这是一个有效的例子。祝你好运！

http://plnkr.co/edit/UowJpWYc1UDryLLlC3Be?p=preview

手动引导AngularJS然后获取模块

4 个答案: