Require.js + AngularAMD - Error: [ng:areq] Argument 'loginController' is not a function, got undefined

Question

I have looked through all the similar questions I can find but none was helpful in resolving this error:

Error: [ng:areq] Argument 'loginController' is not a function, got undefined.

Below are my files:

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 }
    });
}]);
});

Satyam Koyani · Accepted Answer · 2015-04-17T06:46:25.450

1

Your controller should like this,Try this

"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);
            };
        }]);
});

and loginService.js should be like this

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 }
      });
  }]);
});

Note: This is something which you are missing, Let me try to explain here in more detail.(Considering you have a basic knowledge of require and angularAMD)

Controllers and services in the application rely on RequireJS to access the object representing the application’s module and then access the register property to register a controller script with AngularJS.

This type of registration is required since using the standard angular.module(“ModuleName”).controller() code won’t work properly with dynamically loaded controller scripts.

RequireJS’s define() function to get to the app object and then uses it to register the controller.

The app.register.controller() function points to AngularJS’s $controllerProvider.register() function behind the scenes with app.js.

All of the controllers,services in the application follow this pattern.

edited Apr 17 '15 at 06:46

answered Apr 17 '15 at 05:41

Satyam Koyani

4,236
2
22
48

Thanks for helping, but when I tried your suggested code above, I got this error: Error: [$injector:unpr] Unknown provider: loginServiceProvider <- loginService <- LoginController. – cig Apr 17 '15 at 05:55
@cig Oops. It was typo. Check my edited code and try It will work. – Satyam Koyani Apr 17 '15 at 06:02
If I added your code, with "app.register.controller", I get this error: Error: [$injector:unpr] Unknown provider: loginServiceProvider <- loginService <- LoginController. BUT if I used my original code of "app.controller", I got this error: Error: [ng:areq] Argument 'LoginController' is not a function, got undefined. (I think that is the only difference between your code and mine, right?) – cig Apr 17 '15 at 06:15
Here you need to register service also like "app.register.factory" – Satyam Koyani Apr 17 '15 at 06:19
That is it. Adding "register" to both files. Thanks a lot! – cig Apr 17 '15 at 06:29
It definitely helped and I accepted it, but it requires 15 reputation to up vote it, and I am a newbie to this site and don't seem to have enough reputation points to do that. :( – cig Apr 17 '15 at 06:33
@cig Check my edited answer. It will help you to understand more of your mistake. – Satyam Koyani Apr 17 '15 at 06:47

Require.js + AngularAMD - Error: [ng:areq] Argument 'loginController' is not a function, got undefined

1 Answers1