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

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

将应用程序模块注入ctrlTwo和ctrlOne

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

}

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-12-26 16:17:37

解决方案2
0 2016-05-15 05:31:30

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-12-26 16:17:37

解决方案2 0 2016-05-15 05:31:30

解决方案1
0 已采纳 2015-12-26 16:17:37

解决方案2
0 2016-05-15 05:31:30