angularjs resource save example

¿Es posible utilizar plantillas de URL parametrizadas con el servicio angular $ http?

Question

Estoy usando $ resource para mi API RESTful y me encanta la plantilla de URL parametrizada, por ejemplo, ''api/clients/:clientId''

Esto funciona muy bien para las operaciones de CRUD. Sin embargo, algunos de mis api son solo informes o puntos finales de solo lectura sin la necesidad de un tratamiento completo de REST. Sentí que era excesivo usar $ resource para ellos y en su lugar usé un servicio de datos personalizado con $ http.

El único inconveniente es que pierdo las plantillas de URL parametrizadas. Me encantaría definir una url como ''api/clients/:clientId/orders/:orderId'' y simplemente pasar { clientId: 1, orderId: 1 } . Me doy cuenta de que puedo construir la url dinámicamente, pero esperaba que $ http fuera compatible con la plantilla parametrizada y aún no la he encontrado.

Todo lo mejor

ACTUALIZACIÓN 7/5

La palabra que faltaba en mis búsquedas es ''Interpolar''. Más información aparece cuando busco ''interpolación de url en $ http angular''. La respuesta corta parece ser ''No'' $ http no admite la interpolación de URL. Sin embargo, hay algunas maneras bastante fáciles de lograr esto.

1. Utilice $ interpolar:

Documentación para $interpolate here

var exp = $interpolate(''/api/clients/{{clientId}}/jobs/{{jobId}}'', false, null, true);
var url = exp({ clientId: 1, jobId: 1 });

2. Escribe tu propia función de interpolación de url

Ben Nadel tiene una excelente publicación sobre este tema exacto here .

3. Robar la funcionalidad del recurso angular

Echa un vistazo a setUrlParams en Route.prototype in angular-resource.js . Es bastante sencillo.

Ejemplo de servicio de datos usando $ interpolar

(function () {
''use strict'';
var serviceId = ''dataservice.jobsReports'';
angular.module(''app'').factory(serviceId, [''$http'', ''$interpolate'', function ($http, $interpolate) {
var _urlBase = ''http://localhost:59380/api'';
var _endPoints = {
getJobsByClient: {
url: ''Clients/{{clientId}}/Jobs'',
useUrlInterpolation: true,
interpolateFunc: null
}
};
// Create the interpolate functions when service is instantiated
angular.forEach(_endPoints, function (value, key) {
if (value.useUrlInterpolation) {
value.interpolateFunc = $interpolate(_urlBase + ''/'' + value.url, false, null, true);
}
});
return {
getJobsByClient: function (clientId) {
var url = _endPoints.getJobsByClient.interpolateFunc({ clientId: clientId });
return $http.get(url);
}
};
}]);
})();

Answer 1

Para evitar que esto quede "sin respuesta" cuando se ha respondido ...

1. Utilice $ interpolar:

Documentación para $interpolate here

var exp = $interpolate(''/api/clients/{{clientId}}/jobs/{{jobId}}'', false, null, true);
var url = exp({ clientId: 1, jobId: 1 });

2. Escribe tu propia función de interpolación de url

Ben Nadel tiene una excelente publicación sobre este tema exacto here .

3. Robar la funcionalidad del recurso angular

Echa un vistazo a setUrlParams en Route.prototype in angular-resource.js . Es bastante sencillo.

Ejemplo de servicio de datos usando $ interpolar

(function () {
''use strict'';
var serviceId = ''dataservice.jobsReports'';
angular.module(''app'').factory(serviceId, [''$http'', ''$interpolate'', function ($http, $interpolate) {
var _urlBase = ''http://localhost:59380/api'';
var _endPoints = {
getJobsByClient: {
url: ''Clients/{{clientId}}/Jobs'',
useUrlInterpolation: true,
interpolateFunc: null
}
};
// Create the interpolate functions when service is instantiated
angular.forEach(_endPoints, function (value, key) {
if (value.useUrlInterpolation) {
value.interpolateFunc = $interpolate(_urlBase + ''/'' + value.url, false, null, true);
}
});
return {
getJobsByClient: function (clientId) {
var url = _endPoints.getJobsByClient.interpolateFunc({ clientId: clientId });
return $http.get(url);
}
};
}]);
})();

Answer 2

Para las plantillas de URL, hay una recomendación claramente definida: RFC 6570

Puede encontrar una implementación en Github: bramstein/url-template

Es bastante simple. Aquí hay un servicio AngularJS que utiliza una biblioteca que implementa el estándar RFC 6570 :

var app=angular.module(''demo'',[]);
app.service(''UserStore'',function () {
var baseUrl=urltemplate.parse(''/rest/v1/users{/_id}'');
return {
load:function(id){
return $http.get(baseUrl.expand({_id:id}));
},
save:function (profile) {
return baseUrl.expand(profile);
//return $http.post(baseUrl.expand(profile),profile);
},
list:function (id) {
}
}
});
app.controller(''demoCtrl'',function(UserStore){
this.postUrlOfNewUser=UserStore.save({name:"jhon"});
this.postUrlOfExistingUser=UserStore.save({_id:42,name:"Arthur",accessory:"towel"});
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.rawgit.com/bramstein/url-template/master/lib/url-template.js"></script>
<div ng-app="demo">
<div ng-controller="demoCtrl as ctrl">
<div>New user POST URL: {{ctrl.postUrlOfNewUser}}</div>
<div>Existing user POST URL: {{ctrl.postUrlOfExistingUser}}</div>
</div>
</div>
<script>
</script>

Como puede ver, el estándar incluso maneja el componente PATH opcional. ¡Es una brisa!

Y también puedes usar "." o ";" - Para notación matricial e incluso expandir cadenas de consulta!