angularjs + requirejs + dependency in resolve

Question

How I can correct inject dependency P48Wallet in resolve for $routeProvider?

app.js

'use strict';

define(
[
    'angularAMD',
    'angular-route',
    'angular-animate'
],
function (angularAMD) {

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

app.config(['$routeProvider', function($routeProvider){

    $routeProvider
        .when('/',
            angularAMD.route({
                templateUrl: 'static/js/application/views/main.html',
                controller: 'application/controllers/Main',
                resolve: {
                     films:
                     require(['application/services/P48Wallet', function(P48Wallet) {
                         return P48Wallet.getUserData();
                     }])
                }
            })
        )

        .when('/success',
                angularAMD.route({
                templateUrl: 'static/js/application/views/success.html',
                controller: 'application/controllers/Success'
            })
        )

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

    angularAMD.bootstrap(app);

    return app;
});

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

P48Wallet.js

'use strict';

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

    return app.factory('P48Wallet', function(Http) {

        this.getUserData = function() {
            return Http.post('?action=get_data');
        };

        return this;
    });
});

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

I receive error:

Error: [$injector:unpr] http://errors.angularjs.org/undefined/$injector/unpr?p0=dProvider%20%3C-%20d

marcoseu · Accepted Answer · 2014-03-26 15:19:00Z

1

2 problems that I can see:

angularAMD.route sets the resolve property so it is overwriting the resolve that you are setting up.
return app.factory expect an object to be return and not this

What you should be doing is define the P48Wallet as a factory/service and then add it to the dependency to your Main controller. For example:

application/services/P48Wallet.js

EDIT: Adding feature to cache the returned data from POST per comment.

define(['application/app', 'application/services/Http'], function(app) {
    app.register.service('P48Wallet', function(Http, $q) {
        var priv_data;

        // Assuming that your Http works the same way as $http
        this.getUserData = function() {
            var d = $q.defer();

            if (priv_data) {
                // Return cached value
                d.resolve(priv_data);
            } else {
                Http.post('?action=get_data')
                .then(function (data) {
                    priv_data = data;
                    d.resolve(data);
                })
                .catch(function (error) {
                    d.reject(error);
                });
            }
        };

        return d.promise;
    });
});

application/controllers/Main.js

define(['application/app', 'application/services/P48Wallet'], function (app) {
    app.register.controller("MainController", [
        '$scope', 'P48Wallet', function ($scope, P48Wallet) { ... }
    ]);
});

application/app.js

// Keeping everything the same except
angularAMD.route({
    templateUrl: 'static/js/application/views/main.html',
    controllerUrl: 'application/controllers/Main',
    controller: 'MainController'
})

Here is angularAMD's documentation on how to setup the route to lazy load controllers:

https://github.com/marcoslin/angularAMD#on-demand-loading-of-controllers

edited Mar 26, 2014 at 15:19

answered Mar 21, 2014 at 21:50

marcoseu

3,9622 gold badges21 silver badges36 bronze badges

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

8 Comments

user2264941 Over a year ago

I need to resolve this variable (P48Wallet.getUserData()) before start my Controller, it can take 5 or 10 seconds. I cannot do this in controller. In controller i need concrete value not promise.

marcoseu Over a year ago

I am not sure how your getUserData works but one of the solution could be to cache the result so that subsequent calls are quicker. In this case, you can call . getUserData during app initialisation via app.run and subsequent calls to it should be much quicker.

user2264941 Over a year ago

Resolve in app.js without requirejs fix it. I need to receive this data before I start work with controller.

marcoseu Over a year ago

You won't get it earlier than app.run. Take a look at documentation for .run: Module Loading & Dependencies

user2264941 Over a year ago

You advise me to create another module?

|

Collectives™ on Stack Overflow

angularjs + requirejs + dependency in resolve

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related