Angular server-side communication
1 like•1,159 views
The document outlines the AngularJS $http service for communication with remote HTTP servers, detailing methods for making requests and handling responses. It discusses interceptor functionality for modifying requests and responses, as well as registering custom interceptors. It also describes the usage of the $resource service to create and manage resource instances for backend interaction.
![//Add a new function at the end of chain
$httpProvider.defaults.transformResponse.push(function(data, headersGetter){
//data it's already converted from an angular default transformer
data.total = headersGetter('X-Total-Count');
return data;
});
//Replace the entire chain
$httpProvider.defaults.transformResponse = [function(data, headersGetter){
//assume the data is a JSON string
var tranformedData = angular.fromJson(data);
tranformedData.total = headersGetter('X-Total-Count');
return tranformedData;
}];](https://image.slidesharecdn.com/h-140904052831-phpapp01/85/Angular-server-side-communication-11-320.jpg)
Angular server-side communication
- 3. core Angular Service for communcitation with remote HTTP servers; can communicate via the browser's or via works hand in hand with $q service.
- 4. $http({method: 'GET', url: '/someUrl'}) .success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available }) .error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. }); *Since the returned value is a , you can also use for registering callbacks.
- 5. $http.get $http.head $http.post $http.put $http.delete $http.jsonp $http.patch
- 9. The $http service will automatically add certain HTTP headers to all requests. The default headers can be fully configured by accesing the configuration object which contains: (headers that are common for all requests) (header defaults for POST requests) (header defaults for PUT requests) (header defaults for PATCH requests)
- 11. //Add a new function at the end of chain $httpProvider.defaults.transformResponse.push(function(data, headersGetter){ //data it's already converted from an angular default transformer data.total = headersGetter('X-Total-Count'); return data; }); //Replace the entire chain $httpProvider.defaults.transformResponse = [function(data, headersGetter){ //assume the data is a JSON string var tranformedData = angular.fromJson(data); tranformedData.total = headersGetter('X-Total-Count'); return tranformedData; }];
- 14. There are two kinds of interceptors (and two kinds of rejection interceptors): : interceptors get called with a http config object. The function is free to modify the config object or create a new one. The function needs to return the config object directly, or a promise containing the config or a new config object. : interceptor gets called when a previous interceptor threw an error or resolved with a rejection. : interceptors get called with http response object. The function is free to modify the response object or create a new one. The function needs to return the response object directly, or as a promise containing the response or a new response object. : interceptor gets called when a previous interceptor threw an error or resolved with a rejection.
- 15. // register the interceptor as a service $provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) { return { // optional method 'request': function(config) { // do something on success return config; }, // optional method 'requestError': function(rejection) { // do something on error if (canRecover(rejection)) { return responseOrNewPromise } return $q.reject(rejection); }, // optional method 'response': function(response) { // do something on success return response; }, // optional method 'responseError': function(rejection) { // do something on error if (canRecover(rejection)) { return responseOrNewPromise } return $q.reject(rejection); } }; }); $httpProvider.interceptors.push('myHttpInterceptor');
- 17. Usage: //Resource Constructor provided by $resource factory var User = $resource('/user/:id', {id:'@id'}); //new Resource instance var user = new User({name: 'John'}); //Prototype methods from Resource class - persist to backend user.$save().then(function(){ //Delete the user user.$delete(); }); //Get existing user var user2 = User.get({id: 2}, function(){ user.name = 'Another name'; user.$save(); });
- 18. - A parametrized URL template with parameters prefixed by as in - Given a template and parameter results in URL . - Hash with declaration of custom action that should extend the default set of resource actions. action: {method: '', params:{}, isArray: false}
- 20. The default set of resource actions optionally extended with custom actions. Default actions: query : {method: 'GET'} get: {method: 'GET'} save: {method: 'POST'} remove: {method: 'DELETE'} delete: {method: 'DELETE'} Invocation: HTTP GET "class" actions: non-GET "class" actions:
- 21. Resource instances are instances created by invocation of the constructor with new operator, or by invocation of constructor methods The instance level-methods are prefixed with the sign Instance methods have equivalent functionality with constructor's methods Instance method are available only for non-GET operations
- 22. Plunker Example