Question

我一直在尝试创建一个AngularJS + RequireJS项目。经过很多痛苦，我设法引导应用程序并从另一个文件注册控制器。我想创建一个文件来为我加载所有控制器。我有两个控制器，其中一个直接加载，一个通过loader.js加载。第二个未加载（Error: [ng:areq] Argument 'CtrlTwo' is not a function, got undefined）。以下是相关部分：
需要-config.js

require.config({
    paths: {
        angular: 'vendor/angular/angular'
    },
    shim: {
        angular: {
            exports: 'angular'
        }
    },
    deps: ['app']
});

require(['angular', 'app', 'controllers/CtrlOne', 'controllers/loader'], function(angular) {
    angular.bootstrap(document, ['myApp']);
});

app.js

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

控制器/ loader.js

require([
        'controllers/CtrlTwo'
    ], function () {});

两个控制器具有相同的代码（除了名称和CtrlOne $ scope.a =“Hello”之外）：

控制器/ CtrlTwo.js

define(['angular'], function (angular) {
    console.log("This code does run");
    var second_controller = angular.module('myApp').controller('CtrlTwo', ['$scope', function ($scope) {
            $scope.b = "World";
    }]);
    return second_controller;
});

的index.html

<body ng-cloak>
    <div ng-controller="CtrlOne">
        {{ a }}
    </div>
    <div ng-controller="CtrlTwo">
        {{ b }}
    </div>

    <script data-main="require-config" src="vendor/requirejs/require.js"></script>
</body>

CtrlOne工作正常，但未定义CtrlTwo。有什么想法吗？

Answer 1

在您的加载程序文件中，您使用的是require包装器。在创建新模块时，应使用define包装器。

您的装载机应如下所示：

define(['controllers/CtrlTwo'], function () {

});

文档在require和define包装器之间的差异之间有更多信息：http://requirejs.org/docs/api.html#jsfiles

Answer 2

将app模块注入ctrlTwo和ctrlOne

define(['angular', 'app'], function (angular, app) { var second_controller = app.controller('CtrlOne', ['$scope', function ($scope) {
    $scope.a = "Hello";
}]);

}

如何为带有angularjs + requirejs的控制器创建“加载器文件”？

2 个答案: