Require.js + AngularAMD - 错误:[ng:areq]参数'loginController'不是函数,未定义

时间:2015-04-17 02:41:04

标签: javascript angularjs requirejs angular-amd

我查看了所有类似的问题,但我找不到任何有助于解决此错误的问题:

  

错误:[ng:areq] Argument' 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 }
    });
}]);
});

1 个答案:

答案 0 :(得分: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 }
      });
  }]);
});

注意:这是你缺少的东西,让我试着更详细地解释一下。(考虑到你对require和angularAMD有基本的了解)

  

应用程序中的控制器和服务依赖于RequireJS   然后访问表示应用程序模块的对象   访问register属性以注册控制器脚本   AngularJS。

     

使用标准后需要此类注册   angular.module(“ModuleName”)。controller()代码无法正常工作   使用动态加载的控制器脚本。

     

RequireJS的define()函数来获取app对象然后使用   它注册控制器。

     

app.register.controller()函数指向AngularJS   $ controllerProvider.register()函数在幕后使用app.js。

     

应用程序中的所有控制器,服务都遵循此   图案。