I'm learning AngularJS and I've a little problem for services. The official tutorial gives an example for custom services with REST :
angular.module('phonecatServices', ['ngResource']).
factory('Phone', function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
});
So I made the same code with different names/url and it works.
I would like to pass a parameter to this service (an id in the url).
I tried to use $routeParams in it but it didn't work. Finally I found an other way to declare several function in the same service, so I made that :
factory('Article', function($resource) {
return {
getList: function(categoryId) {
return $resource('http://...', {
query: {method:'GET', isArray:true}
});
}
}
})
But it doesn't work for a REST call (with return 'Hello' for example, it's ok).
Do you know how do that ?
Thank you !
It sounds like you are not passing in the parameter into the query function.
angular.module('Article', ['ngResource']).
factory('Phone', function($resource){
return return $resource('http://.../:articleId', {
query: {method:'GET', isArray:true}
});
});
});
And then in your controller.
Article.query({
articleId : someVar
});
Related
My approach is using AngularJS Service instead of factory along the project. Now I want to build an object called MyData which should be used as array in angularJS controller, such as:
vm.datas= MyData.query({}, function (datas) {
vm.thisData = {selected: datas[0].id};
});
As I searched in questions, I understood I can use factory as below:
angular.module('myDataService', ['ngResource']).
factory('MyData', function($resource){
return $resource(myURL, {}, {
query: {method:'GET', isArray:true}
});
});
What should I do if I want to use service. Is the code correct, below? What is the best practice?
angular
.module('app')
.service('myDataService', myDataService);
myDataService.$inject = ['ngResource'];
function myDataService($resource) {
var self = this;
self.MyData = $resource(myURL, {}, {
query: { method: 'GET', isArray: true }
});
}
Getting the list is not a problem but if I tried to Update or Add a record, it does not seem to work.
Here's the code:
angular.module('userApp.services',[])
.factory('User', function($resource){
return $resource('http://localhost/api/v1/users/:id',
{id:'#id'},
{
update: {
method: 'PUT'
}
});
});
My RESTful service is built in Laravel.
You are not injecting the ngResource module you need to use.
angular.module('userApp.services',['ngResource'])
.factory('User', ['$resource', function($resource){
return $resource('http://localhost/api/v1/users/:id', { id:'#id' }, {
update: { method: 'PUT' }
});
}]);
sample code as follow,Is it about hl?locale? Many thanks.
.factory('newsResource', ['$resource', function($resource) {
return $resource('http://ajax.googleapis.com/ajax/services/search/news?v=1.0&q=%E6%96%B0%E8%81%9E');
}])
newsResource.get(
function(successResponse){
console.log(successResponse);
}
);
You have to use JSONP when making a request to an external domain and it seems the googleapis also support the JSONP.
You could change your $resource to use JSONP instead like this:
.factory('newsResource', function($resource) {
return $resource('http://ajax.googleapis.com/ajax/services/search/news?v=1.0&q=%E6%96%B0%E8%81%9E', {}, {
get: {
method: 'JSONP',
params: { callback: 'JSON_CALLBACK' }
}
});
});
Example Plunker: http://plnkr.co/edit/jCDqCErP9UKLWuhBOtp4?p=preview
I have a factory that returns the $resource for my Article model:
angular.module('ADI.Resources').factory("Articles", ['$resource', function($resource) {
return $resource('/api/v1/article/:articleId', {
articleId: '#_id',
_shop: window.user._shop
}, {
update: {
method: 'PUT'
}
});
}]);
GET, POST and DELETE are working well, but not the update (PUT). Here is the code I use:
Articles.update({articleId: '300000000000000000000001'}, function(article){
console.log(article);
});
It's making this request:
PUT http://localhost:3000/api/v1/article?_shop=100000000000000000000001
instead of:
PUT http://localhost:3000/api/v1/article/300000000000000000000001?_shop=100000000000000000000001
Any idea why the :articleId parameter is not filled when doing an update? Thanks!
As Fals mentionned in the comment, the articleId parameter was in the request content. So I made a little trick to have it also on the URI.
angular.module('ADI.Resources').factory("Articles", ['$resource', function($resource) {
return $resource('/api/v1/article/:articleId', {
articleId: '#_id',
_shop: window.user._shop
}, {
update: {
method: 'PUT',
params: {
articleId: "#articleId"
}
}
});
}]);
I had the same problem, the issue here was for the following line:
articleId: '#_id',
that line should be:
articleId: '#articleId',
articleId not need to be defined again.
I have an Angular service/provider that serves json data to my controller which works great:
angular.module('myApp.services', ['ngResource']).
factory("statesProvider", function($resource){
return $resource('../data/states.json', {}, {
query: {method: 'GET', params: {}, isArray: false}
});
});
But I also need to serve json data to the same controller from another file counties.json.
Where can I find out how to I write a service that serves both files to my controller?
You can update service to return a hash of resources, not a single one:
angular.module('myApp.services', ['ngResource']).
factory("geoProvider", function($resource) {
return {
states: $resource('../data/states.json', {}, {
query: { method: 'GET', params: {}, isArray: false }
}),
countries: $resource('../data/countries.json', {}, {
query: { method: 'GET', params: {}, isArray: false }
})
};
});
You will be able to use it adding .query() at the end your function name i.e. geoProvider.states.query() and geoProvider.countries.query() and myApp.services has to be injected into your controller, then inject geoProvider service into controller itself as well.
I'm assuming you want to execute some code when both files have loaded. Promises work really well for this. I don't think resources return promises, but you can use the $http service for simple ajax calls.
Here I define one service each for the two data files, and a third service that returns a promise that gets fulfilled when both files are done loading.
factory('states',function($http) {
return $http.get('../data/states.json');
}).
factory('countries',function($http) {
return $http.get('../data/countries.json');
}).
factory('statesAndCountries', function($q, states, countries) {
return $q.all([states, countries]);
});
Then in your controller:
statesAndCountries.then(function(data) {
var stateData = data[0];
var countryData = data[1];
// do stuff with stateData and countryData here
});