loonison101
9/12/2014 - 1:25 PM

Useful Angular.js snippets

Useful Angular.js snippets

// $http examples
$http({method: 'GET', url: '/someUrl'})
  .success(function (data, status, headers, config) {
  })
  .error(function (data, status, headers, config) {
  });

// $http.get, $http.head,$http.post,$http.put,$http.delete,$http.jsonp,$http.patch

$http.post('images/update', postData)
  .success(function (response) {
    // Do things with response.data
  })
  .error(function (data, status, headers, config) {
    alert('err');
  });
  
// $http with $q
var deferred = $q.defer();

$http.post('images/update', postData)
  .success(function (response) {
    // Do things with response.data before resolving promise to who's listening
    deferred.resolve(response);
  })
  .error(function (data, status, headers, config) {
    alert('err');
  });
  
return deferred.promise;

// Angular commands
var newObj = angular.copy(oldObj);
var isEqual = angular.equals([1,'2'], [1,'2', 3]); // Returns: false
$location.search('myQueryString', null); // Remove querystring

// Angular html commands
// $scope.value = true;
<div ng-show="value"></div>

// Pass event along, BAD but works. Don't need to define $event anywhere
<li ng-click="go(image, $event)"/>

$scope.go(image, $event) {
  if ($($event.target).hasClass('gallery')){
    // In case you had nested inputs that you didn't want parent click on
  }
}

// Filter ng-repeat by properties -- i.e. filter by selected items
// filteredImages - doesn't exist, images is my array of data
// _checked is a property images[0]._checked
<li ng-repeat="image in filteredImages = (images | filter:{_checked: true})" ></li>


// Prevent state change
$rootScope.$on('$stateChangeStart', function ( event, toState, toParams, fromState, fromParams ) {
  // Do custom logic here...
  event.preventDefault(); // Will not let the browser change state
});