I am working on a project using AngularJS. We are looking at using the revealing module pattern so we can have private functions in our controllers and services. Everything works as expected, except for promises/async data.
Here is an example:
export function SomeController( angularDependencies ) {
'ngInject'
const path = $stateParams.path, // this works fine
data = someService.getPromise(path) // this should return a promise
return {
path,
data // returns {} instead of a promise
}
}
My question is this: Is there a way to only do the return after I have all promises resolved? Something like this:
Promises.all(allPromises).then((res) => {
return {
path,
'data': res
}
})
I'm open to using $q, rxjs, underscore, whatever to get this to work.
UPDATE: I changed data to this:
const path = $stateParams.path,
data = Promise.resolve(someService.getPromise(path))
And now I have an object that shows up in Angular's scope, which is progress, but it's a weird object. All of the data that I want is inside of an object, _v
.
So I think I am heading in the right direction, but I'll update this if I find anything new.
Here is what I ended up doing.
export function SomeController( angularDependencies ) {
'ngInject'
const path = $stateParams.path, // this works fine
data = someService.getPromise(path) // returns a promise
return {
path,
data // sends back a promise
}
}
So once the controller returns the promise, I used a filter to load it into the html: angular1-async-filter
This is how a promise is dealt with in Angular 2+, I just didn't have a good way to deal with it in AngularJS.
Now I can do {{ someAsyncData | async }}
and I get the results I wanted.
So the answer to this question is that I couldn't resolve the promise and then return it as part of my module, but I could find a way to handle the promise outside of the module.