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?

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

Error trying to call controller from route in AngularJS with RequireJS

Question

1 answers

solution1
1 ACCPTED 2014-06-09 02:38:20

Error trying to call controller from route in AngularJS with RequireJS

Question

1 answers

solution1 1 ACCPTED 2014-06-09 02:38:20

solution1
1 ACCPTED 2014-06-09 02:38:20