Enter state after vendor library is loaded.

[mparisi76]

I have a situation where my app needs to enter a certain state only after a vendor library has run it's own proprietary script loading mechanism. Basically, I need to listen for the following:

document.on('mp_ready', function() { 
    //resolve
});

What is the proper way to accomplish this?

Thanks!

[laurelnaiad]

This isn't really related to couch potato.

If you are responding to non-Angular events and you want Angular to know about it (usually you do), then wrap your event handler code in $rootScope.$apply(function () { /* your code here */ });

Couch potato, like the rest of the angular components in your app, will then be "in the loop" as to what happens in your event handler.

I'll close this since it isn't really a couch potato issue. If you feel like there is a couch potato aspect to this that I'm missing, please feel free to respond.

EDIT: I should have been a bit more thorough -- if the event you're talking about takes place within the context of a specific view, you can use the $scope associated with that view rather than $rootScope.... basically the gist of it is that whatever scope should be applicable to the event is the one that should know about it. $rootScope if its a global-scoped event, and the $scope of the view if the component is some UI widget in a particular view...

[mparisi76]

I'm not sure I understand. BTW, this isn't really an issue, just a question. In your examples you have a bunch of states, which have resolve: {dummy:blahblah}. I don't want the state to resolve until after the vendor library has run it's script loading (at which time the 'mp_ready' event is fired). Wouldn't this go inside the resolve:{}?

[laurelnaiad]

Ah, ok. Still not technically a couch potato issue, but at least now I understand your question a bit better.

It seems you'd want the function that you give to the resolve property to return a promise that is resolved by the event handler for the event you specified above. This means that you set up the promise, you return it, and then you hang on to the deferred object so that the event handler can call deferred.resolve().

Because the promise will be hanging unresolved until the event occurs, the resolution process will pause while it waits for that event. Once the event fires, the handler should call resolve on the deferred object, thus resolving the promise, and things move forward.

[mparisi76]

That's exactly right. Before I switched from routes to states, I had the following, in my route config:

resolve: {
                    load: ['$q', '$rootScope', function ($q, $rootScope) {
                        var deferred = $q.defer();
                        require([
                                'someFile',
                                'anotherFile',
                                ], function () {
                            $rootScope.$apply(function () {
                                deferred.resolve();
                            });
                        });
                        return deferred.promise;
                    }]
                }

Is there an example of how I could accomplish this same thing using ui-router and couch potato?

[mparisi76]

BTW, I realize that this isn't a couch potato question, but more of a ui-router/angular question. I apologize for that.

[laurelnaiad]

I think you may want to use two resolve properties -- one that deals with loading the components you need via couch potato, and another that handles the promise related to the event you're trying to wait for...

Alternatively, if one of the couch potato components you're waiting for depends on the external event happening before it can be considered initialized, then you'd probably shift the burden of listening for the event into the defining module itself (i.e. the require.js module that defines the couch potato component which depends on the event from the external lib).

EDIT: there might be an issue with that alternative, in that require.js doesn't want to wait for promises and wouldn't hold up for an external event either.... so probably the former idea is better than the latter.

[laurelnaiad]

If you want to combine waiting for your components with waiting for the external event into one resolve function, it might look something like:

resolve: {
  load: ['$q', '$rootScope', function ($q, $rootScope) {
    var overallDeferred = $q.defer();
    var eventDeferred = $q.defer();
    var requireDeferred = $q.defer();

    $q.all([eventDeferred.promise, requireDeferred.promise])
        .then(overallDeferred.resolve);

    require([
    'someFile',
    'anotherFile',
    ], function () {
      $rootScope.$apply(requireDeferred.resolve);
    });

    document.on('mp_ready', function () {
      $rootScope.$apply(eventDeferred.resolve);
    });

    return overallDeferred.promise;
  }]
}

Note: edited since first posted to reflect that it's the promises that are passed to $q.all, not the deferred objects.

[mparisi76]

Great, thanks for that. That might work in ngRoute but I'm using ui.router/scs.couch-potato and resolveDependencies(). Would it work the same way?

[laurelnaiad]

That might look something like:

resolve: {
  load: ['$q', '$rootScope', '$couchPotato', function (
    $q, $rootScope, $couchPotato
  ) {
    var overallDeferred = $q.defer();
    var eventDeferred = $q.defer();
    var requireDeferred = $q.defer();

    $q.all([eventDeferred.promise, requireDeferred.promise])
        .then(overallDeferred.resolve);

    $couchPotato.resolveDependencies(['someFile', 'anotherFile'])
        .then(requireDeferred.resolve);

    document.on('mp_ready', function () {
      $rootScope.$apply(eventDeferred.resolve);
    });

    return overallDeferred.promise;
  }]
}

[mparisi76]

It's weird, I'm tweaking what you have above, but resolveDependencies() never gets called on couch potato.. I'm trying to figure out why.

[mparisi76]

Ok, resolveDependencies() does get called, however, the requireDeferred never gets resolved, and I can't log anything after that..

[laurelnaiad]

You can put a breakpoint in your browser around here: https://github.com/stu-salsbury/angular-couch-potato/blob/master/src/couchPotato.js#L166 to figure out what's happening. If it's being called but it's not resolving its promise then something may be erroring out. In looking at the code, I can see that it probably should have a try/catch in it that rejects the promise on catch. Since it's not there, you may find that an error is happening, causing the promise to just die on the vine.

[laurelnaiad]

If an error is your problem, you could at least get better notification if you change the couch potato function to look like this (untested):

function resolveDependencies(dependencies, returnIndex, returnSubId) {
  function delay($q, $rootScope) {

    var defer = $q.defer();

    try {
      require(dependencies, function() {
        var args = Array.prototype.slice(arguments);

        var out;

        if (returnIndex === undefined) {
          out = arguments[arguments.length - 1];
        }
        else {
          argForOut = arguments[returnIndex];
          if (returnSubId === undefined) {
            out = argForOut;
          }
          else {
            out = argForOut[returnSubId];
          }
        }

        defer.resolve(out);
        $rootScope.$apply();
      });
    }
    catch (err) {
      defer.reject(err);
    }

    return defer.promise;
  }

  delay.$inject = ['$q', '$rootScope'];
  return delay;

}

.... I'd deal with this myself, but I'm kinda busy ATM...

[laurelnaiad]

I think we're back in couch potato territory, so I'm reopening.... :)