I'm having some trouble using the AngularJS framework. I have multiple views (ui-router) with controllers bound to them (ofc). Some of them are referring to the same service, some aren't. This is e.g. my userFactory:
function UserFactory () {
var factory = {};
factory.signIn = function (header) {
return new Promise (function (resolve, reject) {
$.when(
$.ajax({
type: 'POST',
url: me.baseUrl + 'api/users/login',
headers: {
'Authorization': header
}
})
).then(
function() {
resolve();
},
function () {
reject();
}
);
});
}
factory.getUserInformation = function (header) {
return new Promise(function (resolve, reject) {
$.when(
$.ajax({
type: 'GET',
url: me.baseUrl + 'api/users/get',
headers: {
'Authorization': header
}
})
).then(
function (user) {
resolve(user);
},
function () {
reject();
}
);
})
}
return factory;
};
On loading the SPA, there are 2 views using this service. They both retrieve the user information (factory.getUserInformation()). This results in 2 HTTP requests that are retrieving exactly the same information.
In this same service I have method that makes it possible to remove a product from the basket. Now here is the problem: I have another view that displays the user's his/hers basket. So I created an EventEmitter object that tells the Basket-view to update itself. This initiates a HTTP request again. Is there some way to kind of making the Basket-view notice the data has changed?
factory.removeProductFromBasket = function (productId, header) {
return new Promise(function (resolve, reject) {
$.when(
$.ajax({
type: 'POST',
url: me.baseUrl + 'api/baskets/products/remove',
headers: {
'Content-type': 'application/json',
'Authorization': header
},
data: JSON.stringify(productId)
})
).then(
function () {
resolve();
},
function () {
reject();
}
);
})
}
