angularjs + requirejs = Argument 'controller' is not a function, got undefined

Question

Hi i am trying to implement angularjs + requirejs but i get Argument 'HelloWorld' is not a function, got undefined error when i go to desired path

app.js

require.config({
baseUrl: "",
paths: {
    'domReady': 'Scripts/RequireJs/dom-ready/domReady',
    "angular": "Scripts/AngularJs/angular",
    "angular-route": "Scripts/AngularJs/angular-route",
    "angular-resource": "Scripts/AngularJs/angular-resource",
},
shim: {
    "angular": {
        exports: "angular"
    },
    "angular-resource": {
        deps: ["angular"]
    },
    "angular-route": {
        deps: ["angular"]
    }
}
});

define('app', ['angular', 'angular-route'], function (angular) {
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {

    app.controllerProvider = $controllerProvider;
    app.compileProvider = $compileProvider;
    app.routeProvider = $routeProvider;
    app.filterProvider = $filterProvider;
    app.provide = $provide;

    $routeProvider.when('/home', {
        templateUrl: 'views/home.html',
        resolve: {
            load: ['$q', '$rootScope', function ($q, $rootScope) {
                var deferred = $q.defer();

                require(['App/home'], function () {
                    $rootScope.$apply(function () {
                        deferred.resolve();
                    });

                });
                return deferred.promise;
            }]
        }
    });
});

require(['domReady!'], function (document) {
    angular.bootstrap(document, ['app']);
});

return app;
});

home.js

require(['app'], function (app) {
app.controllerProvider.register('HelloWorld', function ($scope) {
    $scope.greet = function () {
        return 'Hello World!'
    }
});
});

home.html

<div ng-controller="HelloWorld">
    {{greet();}}
</div>

as i understand whats happening when i go to /home angular looks for a controller named HelloWorld cant find it throws Argument 'HelloWorld' is not a function, got undefined then my debugger gets hit in home.js but all i see on screen is {{greet();}}

marcoseu · Accepted Answer · 2014-03-03 14:33:51Z

2

Few things:

1. require.config should ideally be placed inside a main.js and loaded in your index.html using:

<script data-main="js/main.js" src=".../require.js"></script>

2. Try to define controller in your route and remove ng-controller home.html:

...
$routeProvider.when('/home', {
    templateUrl: 'views/home.html',
    controller: 'HelloWorld', // <-- Need to add this line
...

3. Your home.js should be using define instead of require as you are defining a module here.

I created the following project to facilitate the use of RequireJS and AngularJS that you should take a look:
https://github.com/marcoslin/angularAMD

answered Mar 3, 2014 at 14:33

marcoseu

3,9622 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user2873685 Over a year ago

it was indeed wrapping my home.js with define instead of require. When i wrap it with define, before angular could check the attr 'HomeWorld' my debugger in home.js got hit then everything worked as expected but how and why? or is there something else going on here?

marcoseu Over a year ago

Where is "angular could check the attr 'HomeWorld'"?

user2873685 Over a year ago

all i know that when i used require it gave me HelloWorld not function error only after that my debugger got hit in home.js but when i used define on home.js no error everything works perfect why

marcoseu Over a year ago

If I understand your question correctly, if you use require in your home.js it breaks. The reason is that require loads a module and RequireJS expect the target file is a module defined using the define method. Remember that you are calling home/app using require statement in your $routeProvider

user2873685 Over a year ago

so i used define because i am loading it from somewhere else i completly ignored the fact that i am loading it from somewhere else (using require) i thought it as it's just a piece of code that requires "app" now i understrand require.js better thank you

|

Pierre Guilbert · Accepted Answer · 2014-03-03 15:36:10Z

0

Ok.. Looks good to me. Perhaps your 'App/home' should be 'app/home' not sure how you did define your 'App'. In case it still does not work. Try adding 'app' in your config.

I made this working version of your thing: https://github.com/guilbep/smallrequirejsangularseed

answered Mar 3, 2014 at 15:36

Pierre Guilbert

5,1953 gold badges22 silver badges19 bronze badges

Collectives™ on Stack Overflow

angularjs + requirejs = Argument 'controller' is not a function, got undefined

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related