angular.js: CRUD operations via $http

These are the basic operations you can do with $http:

  • $http.get(): Accepts aURL and optional config object. Performs an HTTP GETrequest.
  • $http.head(): Accepts a URL and optional config object. Performs an HTTP HEADrequest.
  • $http.post(): Accepts a URL, data object, and optional config object. Performs an HTTP POST request.
  • $http.put(): Accepts a URL, data object, and optional config object. Performs an HTTP PUT request.
  • $http.delete(): Accepts a URL and optional config object. Performs an HTTPDELETE request.
  • $http.jsonp(): Accepts a URL and optional config object. The callback name should be the string JSON_CALLBACK.
  • $http.patch(): Accepts a URL, data object, and optional config object. Performs an HTTP PUT request.

Example of calling the get() method:

$http({
    method: 'GET',
    url: 'http://localhost:8000'
});

$http.get('http://localhost:8000');

You can easily chain promises to handle success or error returns from the server:

$http.get('http://localhost:8000')
.success(function(data){
    $scope.contacts = data;
})
.error(function(){
    window.alert('There was an error!');
});

Example of a post:

$http.post('http://localhost:8000', {
    name: 'Declan Proud',
    email: 'declan@example.com',
    ...
});

angular.js: directives

Basic structure:

myModule.directive('directiveName', function(){
    return {
        restrict: 'AE',
        replace: true,
        template: '<div class="{{class}}">some html, this could also be a reference to an external template. In which case, you can use templateUrl</div>', link: function(scope, elem, attrs){ // elem is the HTML element the directive was applied to, and attrs are the attributes of the same } } })

The possible restrict values:

  • A: This restricts the directive to be attached using an attribute
  • E: This allows the directive to be used as a custom element
  • C: This allows the directive to be used by adding it as a class to the element
  • M: Allows the directive to be executed via an HTML comment

Other options:

replace: true substitutes the DOM element for the template (instead of just filling out their inner HTML)