View
896
Download
0
Category
Preview:
Citation preview
$http
$http Service is a core Angular Service
Based on $q (deferred/promise APIs)
GET, POST, PUT and DELETE methods
Simple to use
$http
var cb = function(data, status, headers, config) {// do something
};
$http.get(‘users/2’).success(cb); //.error(errorCb);
$http
Alternative
var httpConfig = {method: ‘POST’,url : ‘users’,data : {name : ‘foo’},// headers : override header
}
$http(httpConfig).success(successCb); //.error(errorCb);
$http
More features...
Interceptors, transformations, caching
Foundation for building your own Rest Resource implementation
https://docs.angularjs.org/api/ng/service/$http
$resourcePredefined Set Of Actions
{'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'} };
$resource
Adding own Methods is simple
var Users = $resource('/api/users/:id', {id:'@id'}, {! update : {! ! method : 'PUT'! }});
// /api/users/1 PUT
Users.update({ id: 1, name: ‘foo’ });
$resourcevar Users = $resource('/api/users/:id', {id:'@id'}, {! update : {! ! method : 'PUT'! }});
var users = Users.query(function() {! var userA = users[0];! userA.name = 'foobar';! userA.$update(function(result) {! ! console.log('has been saved', result);! });});
$resource
Access the $http promise via the $promise property
Users.get({id : 1}).$promise.then(function(user) {! // success}, function(error) {! // error});
$resource
function createResource(name, apiName) {! Module.provider(name + 'Resource', function() {! ! this.$get = ['$resource', function($resource) {! ! ! var Resource = $resource('http://rest.local/api/'+ apiName +'/:id', {id:'@id'}, {! ! ! ! update: {! ! ! ! ! method: 'PUT'! ! ! ! }! ! ! });
! ! ! return Resource;! ! }];! });}
createResource('User', 'users');
$resource
Very easy to use
Methods to quickly interact with a REST api without having to deal with the low level $http.
Restangular
Access inside a controllerangular.module(‘app’).controller($scope, Restangular) {
// do something here...});
RestangularConfiguration
Via config
app.config(function(RestangularProvider) { RestangularProvider.setBaseUrl('/api/'); });
Via run
app.run(function(Restangular) { Restangular.setBaseUrl(‘/api/‘);});
Restangular
Override global configuration
app.factory(‘otherRestanagular’, function(Restangular) {
return Restangular.withConfig(function(RestangularConfigurer) {
RestangularConfigurer.setBaseUrl('http://somethingelse');
});
});
Restangular
URL Building
// This will do ONE get to /users/1/tasks/12/substasks
Restangular.one("users",1).one("tasks", 12).all("subtasks");.getList()
// This will do ONE get to /users/1/tasks/12/subtasks/234
Restangular.one("users", 1).one("tasks", 12).one("subtasks", 234).get()
// POST /users/1/tasks/12/subtasks
Restangular.one("users", 1).one("tasks", 12).all("subtasks").post({name: "Foo"});
// DELETE /users/1/tasks/12
Restangular.one("users", 1).one("tasks", 12).remove();
Restangular
HTTP Methodsvar user = Restangular.one(‘users’, 1);user.get(); // GET /users/1user.getList('tasks'); // GET /users/1/tasksuser.put(); // PUT /users/1user.post(); // POST /users/1user.remove(); // DELETE /users/1user.head(); // HEAD /users/1user.trace(); // TRACE /users/1user.options(); // OPTIONS /users/1user.patch(); // PATCH /users/1
Restangular
Custom Methods
Restangular.extendCollection('users', function(users) { users.getTotal = function() { // do something here... };
return users; });
var users = Restangular.all('users').getList();
users.then(function(accounts) { users.getTotal(); // invoke the custom collection method});
Restangular
Error HandlingUser.get().then(function(success) {
// success }, function(error) {
// do something});
Restangular
Decoupling a Restangular Serviceapp.factory('Users', function(Restangular) {! return Restangular.service('users');});
app.controller(‘testController’, function(Users) {// Users.getList();
});
RestangularRequest / Response / Error Interceptors
Restangular.addRequestInterceptor(function(element, method, route, url) {
! if (method == 'put') {! ! delete element.valueNotToBeSent;! }
! return elem;});
Restangular
Large set of Methods for elements and Collections
Extendable with Custom Operations
Configuarable
https://github.com/mgonto/restangular
Recommended