Short Talk about basic interactions with restful API using AngularJS.

1. The Rest Side Of
Things in AngularJS
A. Sharif
@sharifsbeat

2. Basic interactions with a restful API is easy
with AngularJS...

3. $http

4. $http
$http Service is a core Angular Service
Based on $q (deferred/promise APIs)
GET, POST, PUT and DELETE methods
Simple to use

5. $http
var cb = function(data, status, headers, config) {
// do something
};
$http.get(‘users/2’).success(cb);
//.error(errorCb);

6. $http
Alternative
var httpConfig = {
method: ‘POST’,
url : ‘users’,
data : {name : ‘foo’},
// headers : override header
}
$http(httpConfig).success(successCb);
//.error(errorCb);

7. $http
More features...
Interceptors, transformations, caching
Foundation for building your own Rest
Resource implementation
https://docs.angularjs.org/api/ng/service/$http

8. $resource

9. $resource
Install via bower/npm
angular.module(‘app’, [‘ngResource’]);
Based on $http

10. $resource
$resource(url, [paramDefaults], [actions], options);

11. $resource
Predefined Set Of Actions
{'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'} };

12. $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’ });

13. $resource
var 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);
! });
});

14. $resource
Access the $http promise via the $promise
property
Users.get({id : 1}).$promise.then(function(user) {
! // success
}, function(error) {
! // error
});

15. $resource
$resolved property is set to false until server
interaction is completed.

16. $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');

17. $resource
Very easy to use
Methods to quickly interact with a REST
api without having to deal with the low
level $http.

18. Restangular

19. Restangular
Supports all HTTP Methods
Nested RESTful Resources
Promises
Extendable
Requires lodash

20. Restangular
Install via bower/npm
angular.module(‘app’, [‘restangular’]);

21. Restangular
Access inside a controller
angular.module(‘app’).controller($scope, Restangular) {
// do something here...
});

22. Restangular
Define a main route or object
Restangular.all(‘users’);
Restangular.one(‘users’, 2);

23. Restangular
Configuration
Via config
app.config(function(RestangularProvider) {
RestangularProvider.setBaseUrl('/api/');
});
Via run
app.run(function(Restangular) {
Restangular.setBaseUrl(‘/api/‘);
});

24. Restangular
Override global configuration
app.factory(‘otherRestanagular’, function(Restangular) {
return Restangular.withConfig(function(RestangularConfigurer) {
RestangularConfigurer.setBaseUrl('http://somethingelse');
});
});

25. 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();

26. Restangular
HTTP Methods
var user = Restangular.one(‘users’, 1);
user.get(); // GET /users/1
user.getList('tasks'); // GET /users/1/tasks
user.put(); // PUT /users/1
user.post(); // POST /users/1
user.remove(); // DELETE /users/1
user.head(); // HEAD /users/1
user.trace(); // TRACE /users/1
user.options(); // OPTIONS /users/1
user.patch(); // PATCH /users/1

27. 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
});

28. Restangular
Error Handling
User.get().then(function(success) {
// success
}, function(error) {
// do something
});

29. Restangular
Setting Default Headers
RestangularProvider.setDefaultHeaders({token: "foo"});

30. Restangular
Decoupling a Restangular Service
app.factory('Users', function(Restangular) {
! return Restangular.service('users');
});
app.controller(‘testController’, function(Users) {
// Users.getList();
});

31. Restangular
Request / Response / Error Interceptors
Restangular.addRequestInterceptor(function(element,
method, route, url) {
! if (method == 'put') {
! ! delete element.valueNotToBeSent;
! }
! return elem;
});

32. Restangular
Element Transformations
Collection and Model Custom Methods
Self Reference in Resources

33. Restangular
Large set of Methods for elements and
Collections
Extendable with Custom Operations
Configuarable
https://github.com/mgonto/restangular

34. ThankYou.
@sharifsbeat