AngularJS — HTTP

Basic GET Request

app.controller('UserController', function($scope, $http) {
  $http.get('/api/users')
    .then(function(response) {
      $scope.users = response.data;
    }, function(error) {
      console.error('Error:', error);
    });
});

POST Request

$scope.createUser = function(user) {
  $http.post('/api/users', user)
    .then(function(response) {
      console.log('Created:', response.data);
    });
};

PUT Request

$scope.updateUser = function(user) {
  $http.put('/api/users/' + user.id, user)
    .then(function(response) {
      console.log('Updated:', response.data);
    });
};

DELETE Request

$scope.deleteUser = function(id) {
  $http.delete('/api/users/' + id)
    .then(function() {
      console.log('Deleted');
    });
};

HTTP Service

app.factory('UserService', function($http) {
  return {
    getUsers: function() {
      return $http.get('/api/users');
    },
    getUser: function(id) {
      return $http.get('/api/users/' + id);
    },
    createUser: function(user) {
      return $http.post('/api/users', user);
    }
  };
});

Mini Practice

1. Make GET requests
2. Send POST data
3. Update with PUT
4. Delete resources

Up Next

Continue with AJAX — AJAX patterns.