We Keep Coding

Angular $HTTP posting- dynamic URL and defining post

I am trying to post a simple binary value (using $http) to a URL which si defined by a value in my HTML.
I have successfully got the "card.id" being passed through (can see it in console log)
<td-card ng-repeat="card in cards"
on-destroy="cardDestroyed($index)"
on-swipe="cardSwiped($index)"
on-swipe-right="$parent.cardSwiped(card.id)"
on-swipe-left="$parent.cardSwiped(card.id)" >
The data I want to post needs to be to a URL which has the card.id in it.
How to I tell it what to post and how to trigger?
.controller('CardsCtrl', ['$scope', 'TDCardDelegate', 'cardsApi', '$http',
function($scope, TDCardDelegate, cardsApi, $http) {
console.log('CARDS CTRL');
$scope.cards = [];
$scope.onSwipeRight=function(product_id){console.log(product_id)}
//Post for swipe right {'like':1, 'uid':21}
$scope.onSwipeLeft=function(product_id){console.log(product_id)}
//Post for swipe left {'like':0, 'uid':21}
for(var i = 0; i < 7; i++) {
cardsApi.getApiData()
.then(function (result) {
$scope.cards.unshift(result.data);
$scope.product_id = result.data.product_id;
})
.catch(function (err) {
$log.error(err);
});
}
$scope.$watchCollection('cards', function (newVal, oldVal) {
if(newVal < oldVal) {
cardsApi.getApiData()
.then(function (result) {
$scope.cards.unshift(result.data);
})
.catch(function (err) {
console.log(err);
});
}
});
$scope.cardSwiped = function(card) {
console.log('here');
console.log(card);
};
//Removes card from top of stack
$scope.cardDestroyed = function(index) {
$scope.cards.splice(index, 1);
};
$scope.addCard = function() {
var newCard = $scope.cards[$scope.cards.length];
//newCard.id = Math.random();
$scope.cards.push(angular.extend({}, newCard));
};
$scope.postRecordLikes = function(product_id){
console.log(product_id)
$http.post('http://test.com/analytic/' + product_id)
.then(function successCallback(product_id) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
}
])

postRecordLikes is being defined but never used. You can call it in your html by different ways. If you want to call it when you click it for example, just use ng-click.
By the way, calling $http inside your controller is not a good practice, have a look at this post: https://toddmotto.com/resolve-promises-in-angular-routes/
EDIT
I have forked your plunkr. Take a look at it: http://plnkr.co/edit/uvooKeCtFagAnFjVYnhS?p=preview
You should call postRecordLikes when your event is fired. Modify it as you want.

How to avoid repeating http requests angularJS

Is there a way in Angular to avoid repeating http requests?
As you can see in the code above I'm making a call to retrieve the detailed info of a product.
The fact is that this call is associated to a button...
I would to avoid repetitive calls.
If I have clicked on the detailed-product-button obviously I don't need to make a call again to my service....the proper way will be to load the info once and then show and hided; but I don't know how to manage this on Angular.
(also I don't want to load the detail product from the scrach for very product, I want to loaded only on user's clic demand, but once)
$scope.seeInfo= function(id){
$http.get('/shop/getDetailInfo/'+id).
success(function(data, status) {
$scope.info = data.detailinfo;
if (data.detailinfo>0) $scope.showDetails=true;
else $scope.showDetails=false;
});
};

Angular $http has a cache functionality built in, might be all you need
https://docs.angularjs.org/api/ng/service/$http
$scope.seeInfo= function(id){
$http.get('/shop/getDetailInfo/'+id, {cache: true}).
success(function(data, status) {
$scope.info = data.detailinfo;
if (data.detailinfo>0) $scope.showDetails=true;
else $scope.showDetails=false;
});
};
update
I see you went for the "roll your own" solution instead, which generally is more bug prone than using what angular provides.
Here how to achieve the same:
// access the $http cache
var httpCache = $cacheFactory('$http');
// retrieve an element from cache
var detailInfo = httpCache.get('/shop/getDetailInfo/' + id);
// delete a cache element
httpCache.remove('/shop/getDetailInfo/' + id);

You can store every item that the user request in a factory and then check if the content is in the factory before do the ajax call.
$scope.seeInfo= function(id){
var detailinfo = someFactory.get(id); //get item data from factory if exist
if (angular.isUndefined(detailinfo) || detailinfo === null) {
$http.get('/shop/getDetailInfo/'+id).
success(function(data, status) {
someFactory.set(id, data); //set ajax data to factory
$scope.info = data.detailinfo;
if (data.detailinfo>0) $scope.showDetails=true;
else $scope.showDetails=false;
});
}
} else {
$scope.info = detailinfo;
if (detailinfo>0) $scope.showDetails=true;
else $scope.showDetails=false;
}
};
As well as someone said you can use the $http cache but i don't know how really it works
UPDATE
A someFactory example:
.factory('someFactory', [function() {
var storedItems = [];
return {
get: function(id) {
return storedItems[id];
},
set: function(id, data) {
storedItems[id] = data;
}
};
}]);
test the factory:
someFactory.set(12345, {"info":"Hello"});
someFactory.set(2, "World");
console.log(someFactory.get(12345).info); // returns Hello
console.log(someFactory.get(2)); //returns World
You can store strings, objects....
Hope it helps you
UPDATE2 FULL EXAMPLE CODE
var someApp = angular.module("someApp", [])
.controller('someCtrl', ['someFactory', function(someFactory) {
someFactory.set(12345, {"info":"Hello"});
someFactory.set(2, "World");
console.log(someFactory.get(12345).info); // returns Hello
console.log(someFactory.get(2)); //returns World
}]).factory('someFactory', [function() {
var storedItems = [];
return {
get: function(id) {
return storedItems[id];
},
set: function(id, data) {
storedItems[id] = data;
}
};
}]);

Bind first call with scope variable.
$scope.wasCalled = false;
$scope.seeInfo= function(id){
if ( $scope.wasCalled == false ) {
$http.get('/shop/getDetailInfo/'+id).
success(function(data, status) {
$scope.info = data.detailinfo;
$scope.wasCalled = true;
});
}
};
it's set on success so the server error code would be between 200 and 299.
Then you can set ng-show in view basing on $scope.wasCalled variable.
Here is implementation taking into account different id calls.
$scope.callIds = [];
$scope.wasCalled = function(id){
for ( var k = 0 ; k < $scope.callIds.length ; k++ )
if ( $scope.callIds[k] == id )
return true;
return false;
};
$scope.addCalled = function(id){
$scope.callIds.push(id);
};
$scope.seeInfo= function(id){
if ( $scope.wasCalled(id) == false ) {
$http.get('/shop/getDetailInfo/'+id).
success(function(data, status) {
$scope.info = data.detailinfo;
$scope.addCalled(id);
});
}
};
Checking if specified id was called, if not, call with $http and add id to list.

Waiting for function to complete in Angular JS

I have the following situation: When my app first runs, in the .run function, I issue an http request to get a list of "monitors". Once received, it populates a monitors array in a service. This service is used by many controllers to share data. This service is called ZMDataModel. ZMDataModel offers a function called isMonitorsLoaded(). When this returns 1, I know the monitors array is populated (and that the http call is complete)
Now, I have a page called Monitors, the controller for which is zmApp.MonitorCtrl, shown below. What I need to do, in this MonitorCtrl is to basically, right at the start, do an equivalent of:
while (ZMData.isMonitorsLoaded()!=1);
Now I obviously can't do that because it locks my browser up, and the browser never gets a chance to set isMonitorLoaded to 1 in the first place, so it becomes an endless loop.
I understand I need to put in a timeout somehow, but can't quite follow what I need to do in the controller. My controller code is below:
angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', function($scope, $http, ZMHttpFactory, ZMDataModel) {
$scope.monitors = [];
console.log("***Waiting for Monitors to load before I proceed");
// I can't do a tight loop waiting for ZMDataModel.isMonitorsLoaded
// so some timeout?
$scope.monitors = ZMDataModel.getMonitors();
console.log("I GOT " + $scope.monitors);
$scope.doRefresh = function() {
console.log("***Pull to Refresh");
$scope.monitors = [];
ZMHttpFactory.getMonitors().then(function(data) {
$scope.monitors = data;
$scope.$broadcast('scroll.refreshComplete');
console.log("I GOT " + $scope.monitors);
});
};
});

You can use $rootScope.$emit('eventName') which works like a broadcast of events for anyone who is subscribe to them whit $rootScope.$on('eventName'):
// In your monitor loaded method:
onload: function(){
//Here you can pass optional information to the listeners
// for Example an array of monitor or an object
$rootScope.$emit('MONITORS_LOADED',{
monitors: getMonitors()
});
}
// In your controller:
angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', function($rootScope, $scope, $http, ZMHttpFactory, ZMDataModel) {
$scope.monitors = [];
$rootScope.$on('MONITOR_LOADED', function(event, data) {
$scope.monitors = data;
// or
// $scope.monitors = ZMDataModel.getMonitors();
console.log("I GOT " + $scope.monitors);
}
$scope.doRefresh = function() {
//...
});
};
});

Why not using a promise which will resolve when your monitor servers is loaded? You can set up your service as:
angular.module('myApp')
.service ('ZMDataModel', ['$http', function ($http) {
function MyServices () {
var _deferred;
var _isLoading;
var me = this;
this.isLoaded = false;
this.load = function (reload) {
if (!_deferred || (!_isLoading && reload)) {
this.isLoaded = false;
_deferred = $q.defer();
_isLoading = true;
// make your call
$http ({get : 'http://your-site.com'})
.then (
function success (rawData) {
me.isLoaded = true;
// parse your data
me.monitors = rawData;
_deferred.resolve(me);
},
function fail (error) {
_deferred.reject(error);
_deferred = null;
if (onFail) {
me.monitors = [];
}
}
)
.finally (
function () {
_isLoading = false;
}
);
}
return _deferred.promise;
};
}
return MyServices;
}
]);
Now you can use your service everywhere like this:
angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$scope', 'ZMDataModel', function($scope, ZMDataModel) {
$scope.monitors = [];
console.log("***Waiting for Monitors to load before I proceed");
// I can't do a tight loop waiting for ZMDataModel.isMonitorsLoaded
// so some timeout?
ZMDataModel.load ().then (
function (response) {
$scope.monitors = ZMDataModel.monitors;
}
);
$scope.doRefresh = function() {
console.log("***Pull to Refresh");
$scope.monitors = [];
ZMDataModel.load (true).then (
function (response) {
$scope.monitors = ZMDataModel.monitors;
}
);
};
}]);
It doesn't matter if an other controller loads the service first. As long as you use the load function without the 'refresh' flag set to true, the service won't load again

model not updating in .then method of promise angularjs

I'm really struggling with this because it should be very simple. I have a route with a controller defined called login. In my template I have the following data binding {{error}} which is defined in my controller after executing a method from a custom service, and resolving the returned promise.
Controller
app.controller("login", ['$scope','XMLMC', 'ManageSettings', function ($scope,api,ManageSettings) {
$scope.error = 'test';
$scope.login = function() {
var params = {
selfServiceInstance: "selfservice",
customerId: $scope.username,
password: $scope.password
};
var authenticated = api.request("session","selfServiceLogon",params).then(function(response) {
ManageSettings.set("session",response, $scope);
if(response.status === "ok") {
window.location.href = 'portal';
} else {
$scope.error = response["ERROR"];
console.log($scope.error);
}
});
};
}]);
The console shows Customer not registered. Showing that $scope.error has been updated appropriately, but the view never gets updated. My service is below, and please note that I am doing nothing "outside" of angular and so I should not have to $apply() anything manually.
app.factory("XMLMC", ['$http', '$q', function ($http, $q) {
function XMLMC($http, $q) {
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
var that= this;
this.prepareForPost = function(pkg) {
return JSON.stringify(pkg);
};
this.request = function(service, request, params, host, newsession) {
var def = $q.defer();
var P = def.promise;
if(request === "analystLogon") {
newsession = true;
}
var call = {
service: service,
method: request,
params: params
};
if(host) {
call.host = host;
} else {
call.host = "localhost";
}
if(newsession) {
call.newsession = "true";
}
var pkg = {
contents: this.prepareForPost(call)
};
$http.post('php/XMLMC/api.php', jQuery.param(pkg)).success(function (response,status) {
that.consume(response, def);
}).error(function (response,status) {
def.reject(response,status);
});
return P;
};
this.consume = function(response, defer) {
console.log(response);
var resp = response[0],
digested = {},
i;
digested.status = resp["attrs"]["STATUS"];
var params = resp["children"][0]["children"];
for(i=0; i < params.length; i++) {
var key = params[i]["name"];
var val = params[i]["tagData"];
digested[key] = val;
}
defer.resolve(digested);
//return digested;
};
}
return new XMLMC($http, $q);
}]);
I've created a plunk here with the code exactly as it is on my test server. The routes and etc aren't working for obvious reasons, but you can at least see the code and how it works together
http://plnkr.co/edit/AodFJfCijsp2VWxWpbR8?p=preview
And here is a further simplified plunk where everything has one scope and one controller and no routes. For some reason, this works in the plunk but the $http method fails in my server
http://plnkr.co/edit/nU4drGtpwQwFoBYBfuw8?p=preview
EDIT
Even this fails to update
var authenticated = api.request("session","selfServiceLogon",params).then(function(response) {
ManageSettings.set("session",response, $scope);
$scope.error = "foo!";
if(response.status === "ok") {
window.location.href = 'portal';
}
});

It appears that $scope.$apply is indeed needed. See AngularJS - why is $apply required to properly resolve a $q promise?
To quote #pkozlowski.opensource:
In AngularJS the results of promise resolution are propagated asynchronously, inside a $digest cycle. So, callbacks registered with then() will only be called upon entering a $digest cycle.

Caching an array in an angularjs Service

I'm new to AngularJS and am still trying to wrap my head around using services to pull data into my application.
I am looking for a way to cache the result of a $http.get() which will be a JSON array. In this case, it is a static list of events:
[{ id: 1, name: "First Event"}, { id: 2, name: "Second Event"},...]
I have a service that I am trying to use to cache these results:
appServices.service("eventListService", function($http) {
var eventListCache;
this.get = function (ignoreCache) {
if (ignoreCache || !eventListCache) {
eventListCache = $http.get("/events.json", {cache: true});
}
return eventListCache;
}
});
Now from what I can understand I am returning a "promise" from the $http.get function, which in my controller I add in a success callback:
appControllers.controller("EventListCtrl", ["$scope", "eventListService",
function ($scope, eventListService) {
eventListService.get().success(function (data) { $scope.events = data; });
}
]);
This is working fine for me. What I'd like to do is add an event to the eventListService to pull out a specific event object from eventListCache.
appServices.service("eventListService", function($http) {
var eventListCache;
this.get = function (ignoreCache) { ... }
//added
this.getEvent = function (id) {
//TODO: add some sort of call to this.get() in order to make sure the
//eventListCache is there... stumped
}
});
I do not know if this is the best way to approach caching or if this is a stupid thing to do, but I am trying to get a single object from an array that may or may not be cached. OR maybe I'm supposed to call the original event and pull the object out of the resulting array in the controller.

You're on the right track. Services in Angularjs are singeltons, so using it to cache your $http request is fine. If you want to expose several functions in your service I would do something like this. I used the $q promise/deferred service implementation in Angularjs to handle the asynchronus http request.
appServices.service("eventListService", function($http, $q) {
var eventListCache;
var get = function (callback) {
$http({method: "GET", url: "/events.json"}).
success(function(data, status) {
eventListCache = data;
return callback(eventListCache);
}).
}
}
return {
getEventList : function(callback) {
if(eventListCache.length > 0) {
return callback(eventListCache);
} else {
var deferred = $q.defer();
get(function(data) {
deferred.resolve(data);
}
deferred.promise.then(function(res) {
return callback(res);
});
}
},
getSpecificEvent: function(id, callback) {
// Same as in getEventList(), but with a filter or sorting of the array
// ...
// return callback(....);
}
}
});
Now, in your controller, all you have to do is this;
appControllers.controller("EventListCtrl", ["$scope", "eventListService",
function ($scope, eventListService) {
// First time your controller runs, it will send http-request, second time it
// will use the cached variable
eventListService.getEventList(function(eventlist) {
$scope.myEventList = eventlist;
});
eventListService.getSpecificEvent($scope.someEventID, function(event) {
// This one is cached, and fetched from local variable in service
$scope.mySpecificEvent = event;
});
}
]);

You are on the right track. Here's a little help:
appServices.service("eventListService", function($http, $q) {
var eventListCache = [];
function getList(forceReload) {
var defObj = $q.defer(), listHolder;
if (eventListCache.length || forceReload) {
listHolder= $http.get("/events.json", {cache: true});
listHolder.then(function(data){
eventListCache = data;
defObj.resolve(eventListCache);
});
} else {
defObj.resolve(eventListCache);
}
return defObj.promise;
}
function getDetails(eventId){
var defObj = $q.defer();
if(eventId === undefined){
throw new Error('Event Id is Required.');
}
if(eventListCache.length === 0){
defObj.reject('No Events Loaded.');
} else {
defObj.resolve(eventListCache[eventId]);
}
return defObj.promise;
}
return {
eventList:getList,
eventDetails:getDetails
};
});
Then, in your controller, you handle it like this:
appControllers.controller("EventListCtrl", ["$scope", "eventListService",
function ($scope, eventListService) {
var eventList = eventListService.getList();
eventList.then(function(data){
$scope.events = data;
});
$scope.getEventsList = function(reloadList){
eventList = eventListService.getList(reloadList);
eventList.then(function(data){
$scope.events = data;
});
};
$scope.getEventDetails = function(eventID){
var detailsPromise = eventListService.getDetails(eventID);
detailsPromise.then(function(data){
$scope.eventDetails = data;
}, function(reason){
window.alert(reason);
});
}
}
]);
This way, your events are loaded when the controller first loads, and then you have the option to request a new list by simply passing in a boolean. Getting event details is also handled by an internal promise to give you some error handling without throwing a disruptive error.