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

Answer 1

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

Answer 2

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