Month: June 2015

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

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)

Creating one:

.filter('truncate', function(){
  return function(input, limit){
    return (input.length > limit) ? input.substr(0, limit)+'…' : input;
  };
})

The first argument in the returning function is the input data we are filtering on, we can add any number of arguments after that.

See it in action here