Develop Reference

Multiple http request in a single controller angular js

I have created different drupal views to create multiple json endpoints for multiple http request using angular. In my angular script I have created multiple controller for each http request as shown below. But I want to do multiple http request in single controller. I have got inclination that $q and promises or factory are way forward but not completely sure. Any help will be much appreciated. Thanks
var module = angular.module('main',[]);
module.directive("masonry", function () {
var NGREPEAT_SOURCE_RE = '<!-- ngRepeat: ((.*) in ((.*?)( track by (.*))?)) -->';
return {
compile: function(element, attrs) {
// auto add animation to brick element
var animation = attrs.ngAnimate || "'masonry'";
var $brick = element.children();
$brick.attr("ng-animate", animation);
// generate item selector (exclude leaving items)
var type = $brick.prop('tagName');
var itemSelector = type+":not([class$='-leave-active'])";
return function (scope, element, attrs) {
var options = angular.extend({
itemSelector: itemSelector
}, scope.$eval(attrs.masonry));
// try to infer model from ngRepeat
if (!options.model) {
var ngRepeatMatch = element.html().match(NGREPEAT_SOURCE_RE);
if (ngRepeatMatch) {
options.model = ngRepeatMatch[4];
}
}
// initial animation
element.addClass('masonry');
// Wait inside directives to render
setTimeout(function () {
element.masonry(options);
element.on("$destroy", function () {
element.masonry('destroy')
});
if (options.model) {
scope.$apply(function() {
scope.$watchCollection(options.model, function (_new, _old) {
if(_new == _old) return;
// Wait inside directives to render
setTimeout(function () {
element.masonry("reload");
});
});
});
}
});
};
}
};
});
angular.module('main',[]).controller('blogcontroller', function ($scope,$http) {
$http.get('/blog-filter').success(function(result){
$scope.blog = ( function () {
return result.nodes;
})();
});
});
angular.module('cs',[]).controller('cscontroller', function ($scope,$http) {
$http.get('/case-study-view').success(function(results){
$scope.cs = ( function () {
return results.nodes;
})();
});
});

Create a factory with all $http services and use $q like this:
(function(){
app.factory('CountriesServices', countriesServices);
countriesServices.$inject = ['$http', '$q', 'settings'];
function countriesServices($http, $q, settings) {
var self = {};
self.getCountries= function(){
var deferred = $q.defer();
var url = settings.baseService + 'api/country';
$http.get(url)
.success(deferred.resolve)
.error(deferred.reject);
return deferred.promise;
};
self.getCountry = function(id){
var deferred = $q.defer();
var url = settings.baseService + 'api/country/' + id;
$http.get(url)
.success(deferred.resolve)
.error(deferred.reject);
return deferred.promise;
};
return self;
}
})();

Yes you should have your $http methods in a factory:
angular
.module('sharedServices')
.factory('blogRepository', blogRepository);
blogRepository.$inject = ['$http', '$q'];
function blogRepository($http, $q) {
var service = {
getBlogFilter: getBlogFilter
};
return service;
function getBlogFilter() {
var deferred = $q.defer();
$http.get('/blog-filter').success(function(result){
deferred.resolve(result);
});
return deferred.promise;
}
}
and in your controller:
blogRepository.getBlogFilter().then(function(data) {
$scope.blog = data.nodes;
});
It would be similar for the other $http call.

Recursive queries with promises in AngularJS

I have a recursive query that needs to potentially make further queries based on the results. I would ideally like to be able to construct a promise chain so that I know when all of the queries are finally complete.
I've been using the example from this question, and I have the following method:
this.pLoadEdges = function(id,deferred) {
if (!deferred) {
deferred = $q.defer();
}
$http.post('/Create/GetOutboundEdges', { id: id }).then(function(response) {
var data = response.data;
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
var subID = data[i].EndNode;
edgeArray.push(data[i]);
self.pLoadEdges(subID, deferred);
}
} else {
deferred.resolve();
return deferred.promise;
}
});
deferred.notify();
return deferred.promise;
}
Which I then start elsewhere using:
self.pLoadEdges(nodeID).then(function() {
var edgedata = edgeArray;
});
And of course I intend to do some more stuff with the edgeArray.
The problem is that the then() function is trigged whenever any individual path reaches an end, rather than when all the paths are done. One particular pathway might be quite shallow, another might be quite deep, I need to know when all of the pathways have been explored and they're all done.
How do I construct a promise array based on this recursive query, ideally so that I can use $q.all[] to know when they're all done, when the number of promises in the promise array depends on the results of the query?

I'm not 100% positive what the end result of the function should be, but it looks like it should be a flat array of edges based on the example that you provides. If that's correct, then the following should work
this.pLoadEdges = function(id) {
var edges = [];
// Return the result of an IIFE so that we can re-use the function
// in the function body for recursion
return (function load(id) {
return $http.post('/Create/GetOutboundEdges', { id: id }).then(function(response) {
var data = response.data;
if (data.length > 0) {
// Use `$q.all` here in order to wait for all of the child
// nodes to have been traversed. The mapping function will return
// a promise for each child node.
return $q.all(data.map(function(node) {
edges.push(node);
// Recurse
return load(node.EndNode);
});
}
});
}(id)).then(function() {
// Change the return value of the promise to be the aggregated collection
// of edges that were generated
return edges;
});
};
Usage:
svc.pLoadEdges(someId).then(function(edgeArray) {
// Use edgeArray here
});

You need $q.all function:
Combines multiple promises into a single promise that is resolved when all of the input promises are resolved.
Update 1
Check this demo: JSFiddle
The controller can be like following code (well, you may want to put it in a factory).
It loads a list of users first, then for each user, load the posts of this user. I use JSONPlaceholder to get the fake data.
$q.all accepts an array of promises and combine them into one promise. The message All data is loaded is only displayed after all data is loaded. Please check the console.
angular.module('Joy', [])
.controller('JoyCtrl', ['$scope', '$q', '$http', function ($scope, $q, $http) {
function load() {
return $http.get('http://jsonplaceholder.typicode.com/users')
.then(function (data) {
console.log(data.data);
var users = data.data;
var userPromises = users.map(function (user) {
return loadComment(user.id);
});
return $q.all(userPromises);
});
}
function loadComment(userId) {
var deferred = $q.defer();
$http.get('http://jsonplaceholder.typicode.com/posts?userId=' + userId).then(function (data) {
console.log(data);
deferred.resolve(data);
});
return deferred.promise;
}
load().then(function () {
console.log('All data is loaded');
});
}]);
Update 2
You need a recursive function, so, check: JSFiddle.
The code is below. I use round to jump out of the recursion because of the fake API. The key is here: $q.all(userPromises).then(function () { deferred.resolve(); });. That tells: Please resolve this defer object after all promises are resolved.
angular.module('Joy', [])
.controller('JoyCtrl', ['$scope', '$q', '$http', function ($scope, $q, $http) {
var round = 0;
function load(userId) {
return $http.get('http://jsonplaceholder.typicode.com/posts?userId=' + userId)
.then(function (data) {
var deferred = $q.defer();
console.log(data.data);
var posts = data.data;
if (round++ > 0 || !posts || posts.length === 0) {
deferred.resolve();
} else {
var userPromises = posts.map(function (post) {
return load(post.userId);
});
$q.all(userPromises).then(function () {
deferred.resolve();
});
}
return deferred.promise;
});
}
load(1).then(function () {
console.log('All data is loaded');
});
}]);

You can try building up an array of returned promises and then use the $.when.apply($, <array>) pattern. I've used it before to accomplish a similar thing to what you're describing.
More info on this SO thread.
UPDATE:
You probably also want to read the docs on the apply function, it's pretty neat.

Angular - $q not working as intended / help waiting for $http to finish

I am working through my first Angular project (rails gem version 1.2.16.) and can't seem to figure out how to use $q correctly.
I have a directive where on click: 1. calls a directive function that calls a factory fucntion to run a $http request 2. uses the response from the directive function / $http in the template that is appended to the page.
DIRECTIVE:
d2jive.directive('getSpotifyTracks', ['spotifyFactory', '$compile', '$sce', '$q',
function (spotifyFactory, $compile, $sce, $q) {
'use strict';
var getTracks = function(artistName){
var deferred = $q.defer();
var spotifyTracks = spotifyFactory.getArtistTracks(artistName)
deferred.resolve(spotifyTracks);
return deferred.promise;
}
return {
scope: {
artistName: '#'
},
compile: function(tElement, tAttrs, artistName){
return function(scope, iElement) {
iElement.click(function(){
var tracks = getTracks(scope.artistName);
tracks.then(function(tracks){
var t = '<iframe src="https://embed.spotify.com/?uri=spotify:trackset:Playlist:"' + tracks.spotifyTracks+ 'width="300" height="300" frameborder="0" allowtransparency="true"></iframe>';
iElement.after($compile(t)(scope));
});
});
}
}
}
}]);
FACTORY:
d2jive.factory('spotifyFactory', ['$http','$q', function($http, $q){
var factory = {}
factory.getArtistTracks = function(artistName){
var tracks = {}
var spotifyUrl = "http://ws.spotify.com/search/1/track.json?q=";
var deferred = $q.defer();
var getTracks = function(artistName){
$http.get(spotifyUrl + encodeURIComponent(artistName))
.success(function (data) {
deferred.resolve(data);
});
return deferred.promise;
};
// tracks.spotifyTrakcs = getTracks(artistName);
var spotifyTracks = getTracks(artistName);
spotifyTracks.then(function(result){
var trackArray = [];
var tracks = result.tracks.slice(0,9);
for (var track in tracks){
grabbedTrack = tracks[track].href.slice(
14, tracks[track].href.length);
trackArray.push(grabbedTrack);
}
tracks.spotifyTracks = trackArray;
console.log(tracks.spotifyTracks);
});
return tracks;
}
return factory;
}]);
HTML:
<div class="eventContainer row" ng-controller="VenueResultsCtrl">
<div ng-repeat="event in events">
<h4>
{{event.displayName}}
</h4>
<p>
Buy Tickets
</p>
<div ng-repeat="artist in event.performance">
<button get-spotify-tracks artist-name="{{artist.displayName}}">Discover
{{artist.displayName}}<br> -- {{artist.billing}}</button><br><br>
<div class='spotify'></div>
</div>
</div>
</div>
THE PROBLEM: The template loads before the factory function returns the response.
MY SOLUTION: I created a function in my directive to call the factory and tried using $q to wait for the response before appending the template, but it does not seem to be working.
Any tips or leads will be much appreciated, thanks!

I think you might be able to use some thing simular to this to get it to work:
d2jive.factory('spotifyFactory', function($http){
var spotifyFactory = {
var spotifyUrl = "http://ws.spotify.com/search/1/track.json?q=";
getTracks: function(artstName){
var promise = $http.get(spotifyUrl + encodeURIComponent(artistName))
.then(function (result){
//this is where you modifiy the results
var tracks = result.tracks.slice(0,9);
for (var track in tracks){
grabbedTrack = tracks[track]
.href.slice(14,tracks[track].href.length);
trackArray.push(grabbedTrack);
}
tracks.spotifyTracks = trackArray;
console.log(tracks.spotifyTracks);
return tracks
});
return promise;
});
return spotifyFactory
});
and then in your controller/directive you would call this function like this
spotifyFactory.getTracks(someArtist).then(function(d) {
$scope.data = d;
});

A few pointers:
$http is already based on $q. It returns a promise. So you don't need to wrap $http by a promise, it already returns one. See the doc with examples.
your getArtistTracks function will return 'tracks' before the code in 'then' is executed, because that code is asynchronous. As you use async code, you cannot return the result. Instead you could:
call a callback with the track value you calculated
or, fancier nowadays, return a promise and fulfil it later (recommended, as it would give you a better understanding of how to use promises).

How do i handle multiple http requests with $q all angular.js

I am trying to wrapp my head around $q angular library. In my routeprovider i would like to get all my data from the server and store it in localStorage. But for some reason the resolve dont seem to wait for all http request to finish before routing to selectMedia. From my understanding reading the angular docs this should work but it doesn´t. Have i totally missunderstood the concept or am i my thinking right?
$routeProvider.
when('/', {
redirectTo : '/selectMedia',
resolve: {
data: function ($q, backendApi, localStorage, network, route, loginService){
var prices = function () {
var defer = $q.defer();
backendApi.prices.get(function (data) {
localStorage.setItem("videoPrice", data.VideoPrice);
localStorage.setItem("imagePrice", data.ImagePrice);
localStorage.setItem("prices", data.SliderPrices);
localStorage.setItem("priceSuffix", data.PriceSuffix);
defer.resolve();
}, defer.resolve);
return defer.promise;
};
var validFormats = function () {
var defer = $q.defer();
backendApi.validFormats.get(function (formats) {
localStorage.setItem("validFormats", formats);
defer.resolve();
}, defer.resolve);
return defer.promise;
};
var videoFormats = function () {
var defer = $q.defer();
backendApi.videoFormats.get(function (videoFormats) {
localStorage.setItem("videoFormats", videoFormats);
defer.resolve();
}, defer.resolve);
return defer.promise;
};
var categories = function () {
var defer = $q.defer();
backendApi.categories.get(function (data){
localStorage.setItem("categories", data.Categories);
defer.resolve();
},defer.resolve);
return defer.promise;
};
var renewToken = function () {
var defer = $q.defer();
loginService.renewToken(defer.resolve);
return defer.promise;
};
if(network.isOnline()){
var promises = [renewToken(), categories(), videoFormats(), validFormats(), prices()];
return $q.all(promises);
}
else if(!network.isOnline() && localStorage.length === 0){
route('/error');
}
}
}
});
}]);

I don't see the controller for the route being specified in the route definition. I guess you have set it via ngController at the view level. The resolve block is skipped when you don't have a controller specified in the definition.
4/23 UPDATE
The definition of the resolve property extracted from the official docs:
An optional map of dependencies which should be injected into the
controller. If any of these dependencies are promises, they will be
resolved and converted to a value before the controller is
instantiated and the $routeChangeSuccess event is fired.
According to the definition, the design purpose of the resolve property is to have a way to inject dependencies into the controller associated with a route.

Can't resolve the second promise on Facebook JS with Angular

I'm developing an application with Facebook JS and AngularJS. First of all I login and then get the Friends and show them in a list. Everything is working fine with this code:
var friendsController = app.controller(
"FriendsController",
function FriendsController($scope, friendsData, $location, $routeParams)
{
$scope.friendsData = friendsData.data;
$scope.params = $routeParams;
$scope.onClickFriend = function(friendId)
{
$location.path("friends/friend:" + friendId);
}
}
);
friendsController.loadFriends = function($q, $rootScope)
{
var deferred = $q.defer();
FB.api("/me/friends?fields=name,picture.type(square)", function(response)
{
$rootScope.$apply(deferred.resolve(response));
});
return deferred.promise;
}
Now I want to load the details of a friend in a new view, so I create a new routeProvider rule with a new controller and a new promise.
var friendDetailController = app.controller(
"FriendDetailController",
function FriendDetailController($scope, friendData, $routeParams)
{
$scope.friendData = friendData;
$scope.params = $routeParams;
console.log(friendData);
}
);
friendDetailController.loadFriend = function($q, $route, $rootScope)
{
var deferred = $q.defer();
var friendUrl = $route.current.params.friendId.split(":")[1] + "?fields=id,name,picture.type(large)";
FB.api("/" + friendUrl, function(response)
{
$rootScope.$apply(deferred.resolve(response));
});
return deferred.promise;
}
The problem is that I'm entering at loadFriend but it seems that it's not making the call to the FB.api, and it's really weird because it is working on FriendsController, which is basically the same.
In fact, it seems that is the second call the one that is not called, because if I invert the calls (first FriendDetail, afterwards, Friends), FriendDetail is working.