Why angularjs throws me up an error if I try to use "resolve" inside "views"?

Question

As I wrote, maybe I can't use "resolve" INSIDE "views" but only FOR "view"

I'm trying to figure out how to avoid multiple ajax call for the same API/url, because if I use getChildren as it is, and I use it inside N subview@views, angular makes N ajax call.

routes.js:

.state("multi",{
            url: "/multi",
            views: {

                "viewB@multi": {
                    templateUrl: "app/templates/login.htm",
                    controller: ["$scope", "httpPost", "getChildrenNumber", function($scope, httpPost, getChildrenNumber){
                        this.children = getChildrenNumber.data.errorMessage + " Miao";

                    }],
                    controllerAs: "ctrl"
                },
                "viewC@multi": {
                    templateUrl: "app/templates/viewC.htm",
                    controller: ["$scope", "getLogin", function($scope, getLogin){
                        this.secondErrorMsg = getLogin.data.errorMessage;
                    }],
                    controllerAs: "ctrl"
                },
                resolve: {
                    getLogin: function(httpPost){
                        return httpPost.get("http://domain.com/user/login/api-login", { username:"ciaociao6@ciao.com", password:"ciaociA0" } );

                    }
                }
            },
            resolve: {
                getChildrenNumber: function(httpPost){
                    return httpPost.get("http://domain.com/user/login/api-login", { username:"ciaociao6@ciao.com", password:"ciaociA0" } );

                }
            }
        });

Answer 1

Like you said yourself, you cannot use:

views: {
  someView: {},
  someOtherView: {},
  resolve: {}
}

You can go with something like this;

state: {
  resolve: {
    getChildren: function () {}, // one time.
    getLogin:    function () {} // one time.
  },
  views: {
    /** 
     * Inject the resolved values into 
     * your view controllers. 
     */
    viewA: {
      controller: function (getChildren, getLogin) {}
    },
    viewB: {
      controller: function (getLogin) {}
    },
    viewC: {
      controller: function (getLogin) {}
    }
  }
}

And the resolve functions will only run once, it's shared across the views.

jsfiddle

Answer 2

Wrap the call in a promise and let all the resolve functions return the same promise.

So only the first call creates the promise, all other calls just return the promise

Something like this:

var defer;
function login() {
    if(!defer) {
        defer = $q.defer();
        httpPost.get("http://domain.com/user/login/api-login", 
           { username:"ciaociao6@ciao.com", password:"ciaociA0" })
           .success(function(data) {
               defer.resolve(data);
           }
       );
    }
    return defer.promise;
}


function resolve1() {
    return login();
}


function resolve2() {
    return login();
}


function resolve3() {
    return login();
}

```