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 · Answer 1 · 2014-03-26T15:19:00.460

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 '14 at 15:19

answered Mar 21 '14 at 21:50

marcoseu

3,892
2
16
35

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. – user2264941 Mar 25 '14 at 15:16
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. – marcoseu Mar 26 '14 at 15:21
Resolve in app.js without requirejs fix it. I need to receive this data before I start work with controller. – user2264941 Mar 27 '14 at 09:23
You won't get it earlier than `app.run`. Take a look at documentation for `.run`: [Module Loading & Dependencies](http://docs.angularjs.org/guide/module) – marcoseu Mar 27 '14 at 09:49
You advise me to create another module? – user2264941 Mar 27 '14 at 10:33
No... `.run` is a method of your ng-app module. As per documentation: "used to kickstart the application". – marcoseu Mar 28 '14 at 08:33
I trying, but it's not help. – user2264941 Mar 28 '14 at 12:34
Setup a plunker and I will see what I can do. – marcoseu Mar 28 '14 at 13:44

angularjs + requirejs + dependency in resolve

1 Answers1

Linked