Require.js + AngularAMD - Error：[ng:areq]参数'loginController‘不是函数，未定义

Question

我仔细研究了所有类似的问题，但没有一个问题对解决这个错误有帮助：

错误: ng:areq参数'loginController‘不是函数，未定义。

以下是我的档案：

LoginController.js

"use strict";
    define(['app-config', 'loginService'], function (app) {
    app.controller('LoginController', ['$scope', '$location', 'loginService',
        function (sc, loc, loginService) {

            sc.login = function () {

              console.log("Email Address = " + sc.EmailAddress);
              console.log("Password = " + sc.Password);
            }

    }]);

app-config.js

"use strict";
define(['angularAMD', 'angular-route', 'angular-resource'], function (angularAMD) {
var app = angular.module("openInterviewApp", ['ngRoute', 'ngResource']);

app.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider
           /* .when('/login', angularAMD.route({

                templateUrl: 'Accounts/Login.html',
                controllerUrl: 'Accounts/LoginController'
            })) */
            .when("/:section/:tree", angularAMD.route({

                templateUrl: function (rp) { return rp.section + '/' + rp.tree + '.html'; },

                resolve: {

                    load: ['$q', '$rootScope', '$location', function ($q, $rootScope, $location) {

                        var path = $location.path();
                        var parsePath = path.split("/");
                        var parentPath = parsePath[1];
                        var controllerName = parsePath[2];

                        var loadController = parentPath + "/" + controllerName + "Controller";
                        console.log ("loadController=" + loadController);

                        var deferred = $q.defer();
                        require([loadController], function () {
                            $rootScope.$apply(function () {
                                deferred.resolve();
                            });
                        });
                        return deferred.promise;
                    }]
                }

            }))
            .otherwise({ redirectTo: '/' });

    }]);

angularAMD.bootstrap(app);

return app;
});

main.js

require.config({

//By default load any module IDs from baseUrl
//baseUrl is normally set to the same directory as the script used in a data-main attribute
baseUrl: "",

// paths config is relative to the baseUrl
// never includes a ".js" extension since the paths config could be for a directory.
// ex: app: 'app' means if the module ID starts with "app", load it from the /app directory
paths: {
    'app-config': 'scripts/app-config',
    'angular': 'scripts/angular-1.3.15',
    'angular-route': 'scripts/angular-route-1.3.15',
    'angular-resource': 'scripts/angular-resource-1.3.15',
    'angularAMD': 'scripts/angularAMD-4.13.2015',
    'jquery': 'scripts/jquery-2.1.3.min',
    'loginService': 'services/loginService'
},

// Add angular modules that does not support AMD out of the box, put it in a shim
shim: {
    'angularAMD': ['angular'],
    'angular-route': ['angular'],    //angular-route depends on angular module
    'angular-resource': ['angular']
},

// kick start application
deps: ['app-config']
});

Login.html

<div class="container" ng-controller="LoginController" ng-cloak>

loginService.js

define(['app-config'], function (app) {

app.factory('loginService', ['$resource',
function ($resource) {
    return $resource(
        'jbossews-1.0/login',
        {}, {
        login: { method: 'POST', cache: false, isArray: false }
    });
}]);
});

Answer 1

你的控制器应该喜欢这个，试试这个

"use strict";
define(['app-config', 'loginService'], function (app) {
    app.register.controller('LoginController', ['$scope', '$location', 'loginService',
        function (sc, loc, loginService) {
            console.log("LoginController calling");
            sc.login = function () {
                console.log("Email Address = " + sc.EmailAddress);
                console.log("Password = " + sc.Password);
            };
        }]);
});

loginService.js应该是这样的

define(['app-config'], function (app) {

app.register.factory('loginService', ['$resource',
  function ($resource) {
      return $resource(
          'jbossews-1.0/login',
          {}, {
          login: { method: 'POST', cache: false, isArray: false }
      });
  }]);
});

注意：，这是你缺少的东西，让我在这里更详细地解释。(考虑到你对需求和angularAMD有基本的了解)

应用程序中的控制器和服务依赖于RequireJS来访问表示应用程序模块的对象，然后访问寄存器属性来向AngularJS注册控制器脚本。 这种类型的注册是必需的，因为使用标准的angular.module(“ModuleName”).controller()代码在动态加载的控制器脚本中不能正常工作。 RequireJS的define()函数可以到达app对象，然后使用它注册控制器。 app.register.controller()函数指向AngularJS的$controllerProvider.register()函数。 应用程序中的所有控制器和服务都遵循这种模式。