I'm currently working on figuring out the best method for this task:
Our backend developer has requested a json file that contains a master list of api urls used in requests by my frontend. This will ensure that the end user's browser only needs to make one request for the object, which can then be passed into other services. For example...
The dataUrl JSON would look like this:
{
"emails": "json/emails.json",
"mapping": "json/mapping.json",
"profile": "json/profile.json"
}
I need to store this as a variable that can be utilized in all my API calls, similar to the following:
app.factory('Emails', ['$http', function($http, Urls) {
var url = ""; // code here to retrieve the dataUrl object for "emails"
var query = {};
query.getItems = function() {
return $http.get(url.emails); // from the emails variable above?
};
return query;
}]);
What approach should I take to achieve this?
This is what I have attempted so far without success...
app.factory('Urls', ['$http', function($http) {
var query = {};
query.getItems = function() {
return $http.get('json/dataUrls.json');
};
return query;
}]);
app.factory('Emails', ['$http', function($http, Urls) {
Urls.getItems().then(function(response) {
var url = response.data.emails;
console.log(url);
})
var query = {};
query.getItems = function() {
return $http.get('json/emails.json');
};
return query;
}]);
This leads to a console error
TypeError: Cannot read property 'getItems' of undefined