Categories
Angular.js

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

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)

Categories
bootstrap

bootstrap: the basics

form example here:

http://onsubject.com/experiments/angular_playground/#/forms

form-horizontal – switch forms to a grid. The class can also be used to create a fast grid for non-form elements

Categories
Angular.js

angular.js filters

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