Error trying to call controller from route in AngularJS with RequireJS

Question

My index.html has markup like the following (though only needed code)

index.html

<html>
<body>
    <div><ng-view></ng-view></div>

    <script src="config.js"></script>
    <script data-main="app" src="bower_components/requirejs/require.js"></script>   
</body>
</html>

search.html

<div>{{ person.name }}</div>

config.js

"use strict";

var require = {
    paths: {
        "jQuery": "bower_components/jquery/dist/jquery.min",
        "angular": "bower_components/angular/angular.min",
        "angular-route": "bower_components/angular-route/angular-route.min",
        "angular-mocks": "bower_components/angular-mocks/angular-mocks",
        "angular-resource": "bower_components/angular-resource/angular-resource.min"
        "components": "components"
    },
    shim: {
        "jQuery": {"exports": "jQuery"},
        "angular": {"exports" : "angular"},
        "angular-route": ["angular"],
        "angular-mocks": { deps: ["angular"], "exports": "angular.mock" },
        "angular-resource": ["angular"]
    },
    priority: ["angular"]
};

app.js

"use strict";

define("app", ["angular", "routes", "angular-resource", "angular-route", "jQuery"], function (angular, routes) {
    var app = angular.module("app", ["ngResource", "ngRoute"]);

    angular.element().ready(function() {
        angular.bootstrap(document, ["app"]);
    });

    return app;
});

routes.js

"use strict";

require(["app", "components/search/search-ctrl"], function(app) {
    return app.config(["$routeProvider", function($routeProvider) {
        $routeProvider.when("/", {
            controller: "SearchCtlr", 
            templateUrl: "/app/partials/search.html"
        }).
        otherwise({redirectTo: '/'});
    }]);
});

search-ctrl.js

'use strict';

define("search", ["angular", "angular-resource"], function(angular) {
    var search = angular.module('search', []);
    return search;
});

require(["search"], function(search) {
    search.controller("SearchCtlr", ["$scope", function ($scope) {
        $scope.person = {
            name: "Blah"
        };
    }]);
});

The error I am getting is this

Error: [ng:areq] http://errors.angularjs.org/1.3.0-build.2801+sha.ff791c9/ng/areq?p0=SearchCtlr&p1=not%20aNaNunction%2C%20got%20undefined
    at Error (native)
    at http://localhost:8000/app/bower_components/angular/angular.min.js:6:472
    at Hb (http://localhost:8000/app/bower_components/angular/angular.min.js:20:239)
    at Ta (http://localhost:8000/app/bower_components/angular/angular.min.js:20:326)
    at http://localhost:8000/app/bower_components/angular/angular.min.js:69:56
    at link (http://localhost:8000/app/bower_components/angular-route/angular-route.min.js:7:248)
    at x (http://localhost:8000/app/bower_components/angular/angular.min.js:55:371)
    at g (http://localhost:8000/app/bower_components/angular/angular.min.js:48:280)
    at http://localhost:8000/app/bower_components/angular/angular.min.js:47:398
    at http://localhost:8000/app/bower_components/angular/angular.min.js:49:227

If I the element out the error goes away, although the html is being loaded from the view properly.Maybe I am setting up the search component wrong?

You dont need to add the controller in the HTML since the router already links it to the template. Plus If I take the controller out of the html, the error goes away and everything works. is your answer. — Jonathan de M.
– Jonathan de M., Commented Jun 9, 2014 at 2:06
Thats right I forgot this is a route and i need to add the view....let me try that. Damn i hate stupid mistakes... — Metropolis
– Metropolis, Commented Jun 9, 2014 at 2:07
You'll need to add ng-view in your index.html, then create the file /app/partials/search.html — Jonathan de M.
– Jonathan de M., Commented Jun 9, 2014 at 2:11
@JonathandeM. Okay still getting the same error.... I will update my code. Routing it to the html file now with ng-view is still throwing the same error, even though the html from the view is loading. — Metropolis
– Metropolis, Commented Jun 9, 2014 at 2:11
<div ng-controller="SearchCtrl"><ng-view></ng-view></div> remove the ng-controller — Jonathan de M.
– Jonathan de M., Commented Jun 9, 2014 at 2:18

amantur · Accepted Answer · 2014-06-09 03:40:51Z

1

The module need to work for angular and requirejs, your module was only linking through requirejs. Change to:

app.js

define("app", ["angular", "routes", "angular-resource", "angular-route", 
        "jQuery", "components/search/search-ctrl"], function (angular, routes) {

    var app = angular.module("app", ["ngResource", "ngRoute", "app.search"]);

    angular.element().ready(function() {
        angular.bootstrap(document, ["app"]);
    });

    return app;
});

search-ctrl.js

'use strict';

define("search", ["angular", "angular-resource"], function(angular) {
    var search = angular.module('app.search', []);
    return search;
});

require(["search"], function(search) {
    search.controller("SearchCtlr", ["$scope", function ($scope) {
        $scope.person = {
            name: "Blah"
        };
    }]);
});

edited Jun 9, 2014 at 3:40

amantur

40.6k22 gold badges136 silver badges192 bronze badges

answered Jun 9, 2014 at 2:38

Jonathan de M.

9,8488 gold badges50 silver badges72 bronze badges

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

3 Comments

Metropolis Over a year ago

Sweet man thats a lot closer. I am getting an uncaught object now, which is present even if I take on the ng-view element now.

Metropolis Over a year ago

Wait! I got it! Thanks a ton man, that just taught me a good lesson.

Metropolis Over a year ago

Thanks man! Its coming along slowly since I am having to learn Angular, but I am getting it more and more.

Collectives™ on Stack Overflow

Error trying to call controller from route in AngularJS with RequireJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related