Error to include dependency in Angularjs with Requirejs

Question

frontend part of service on Angularjs, now I try to configure it to work with Requirejs.

I need to resolve dependency in app.js

'application/services/P48Wallet'

In P48Wallet.js I need to resolve Http.js

define(['application/app', 'application/services/Http'], function(app) {

In Http.js, when I trying to return app.factory

return app.factory('Http', function($http, $q, $location, $rootScope) {

I receive an error: Uncaught TypeError: Cannot call method 'factory' of undefined Http.js

console.log(app); // undefined

Whats wrong? Why app is undefined in Http.js

==================================================================================

Project structure

static()

    js()
        application()
            controllers()
                Main.js
            directives()
                ...
            filters()
                ...
            services()
                Http.js
                P48Wallet.js
            views()
                main.html
            app.js
            main.js
        libs()
            angular.min.js
            ....

==================================================================================

index.html

<!DOCTYPE html>
<html>
    <head>
        <script data-main="/static/js/application/main" src="/static/js/libs/require.min.js"></script>

        <script type="text/javascript">
            var server_url = '{$HTTP_STATIC_PATH}';
        </script>
    </head>
    <body>
        <div class="loader_cover" loader="{literal}{{showLoader}}{/literal}"><div class="loader_img"></div></div>
        <div class="page" ng-view></div>
    </body>
</html>

==================================================================================

app.js

define(
[
    'angularAMD',
    'angular-route',
    'angular-animate',
    'application/services/P48Wallet'
],
function (angularAMD) {

    var app = angular.module('Order', ['ngRoute', 'ngAnimate']);

    app.config(function($routeProvider){

        $routeProvider
            .when('/',
                angularAMD.route({
                    templateUrl: 'static/js/application/views/main.html',
                    controller: 'application/controllers/Main',
                    resolve: {
                        deposits:
                            function(P48Wallet) {
                                return P48Wallet.getUserDeposits();
                            }
                    }
                })
            )

            .otherwise({redirectTo: '/'});
    });

    angularAMD.bootstrap(app);

    return app;
});

==================================================================================

main.js

require.config({

baseUrl: "static/js",

paths: {
    'angular':          'libs/angular.min',
    'angular-route':    'libs/angular-route.min',
    'angular-animate':  'libs/angular-animate.min',
    'angularAMD':       'libs/angularAMD.min'
},

shim: {
    'angularAMD': ['angular'],
    'angular-route': ['angular'],
    'angular-animate': ['angular']
},

deps: ['application/app']
});

==================================================================================

Controller Main.js

define(['application/app'], function (app) {

'use strict';
app.controller('Main', function ($rootScope, $location) {

    var Main = {};

    return $rootScope.Main = Main;
});
});

==================================================================================

Services

1) Http.js

'use strict';

define(['application/app'], function(app) {

return app.factory('Http', function($http, $q, $location, $rootScope) {

    return HTTP = {
        xxx: '/',
        xxx: false
    };
});
});

2) P48Wallet.js

'use strict';

define(['application/app', 'application/services/Http'], function(app) {

console.log(app); //undefined
return app.factory('P48Wallet', function(Http) {

// ...

    return this;
});
});

The code you show for `app.js` is has unbalanced brackets and parentheses. Perhaps you abbreviated your code from a bigger piece. A good way to do this and avoid pasting into your question code that is not balanced is to save your file under a different name and edit it with an editor that shows such problems. When you find there is no problem, *then* you can paste it into your question. — Louis, Mar 19 '14 at 12:34
Fix unbalanced brackets and parentheses. But I still can't understand, whats wrong, why I receive an error? — SiJey, Mar 19 '14 at 13:40

score 0 · Answer 1 · edited May 23 '17 at 11:57

This is probably a duplicate of another question I just answered:

angularjs + requirejs + dependency in resolve

In short:

You shouldn't be defining resolve property when using angularAMD.route and you should be defining controller and controllerUrl. See documentation for angularAMD.route.
As your Http.js and P48Wallet.js is called after bootstrapping, you should be defining those services using app.register... instead.

You really need to read up on AngularJS' Providers as return HTTP = {...} in your Http.js makes no sense.

Error to include dependency in Angularjs with Requirejs

1 Answers1