AngularJS http canceller

custom http service with canceller

by Rishi Kumar

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="myApp">
  <div ng-controller="mainController">

    <button ng-click="start()">
      Start Request
    </button>

    <ul>
      <li ng-repeat="request in requests">
        <button ng-click="cancel(request)">Cancel{{$index}}</button>
      </li>
    </ul>

    <ul>
      <li ng-repeat="m in movies">{{m.title}}</li>
    </ul>
  </div>
</div>

CSS

.done-true {
  text-decoration: line-through;
  color: grey;
}

JavaScript

var app = angular.module("myApp",[]);
app.controller("mainController", function($scope, movies) {
  $scope.movies = [];
  $scope.requests = [];
  $scope.id = 1;

  $scope.start = function() {

    var request = movies.getById($scope.id++);
    $scope.requests.push(request);
    request.promise.then(function(movie) {
      $scope.movies.push(movie);
      clearRequest(request);
    }, function(reason) {
      console.log(reason);
      clearRequest(request);
    });
  };

  $scope.cancel = function(request) {
    request.cancel("User cancelled");
    clearRequest(request);
  };

  var clearRequest = function(request) {
    $scope.requests.splice($scope.requests.indexOf(request), 1);
  };
});
app.factory("movies", function($http, $q){
 
    var getById = function(id){
        var canceller = $q.defer();
 
        var cancel = function(reason){
            canceller.resolve(reason);
        };
 
        var promise =
            $http.get("/api/movies/slow/" + id, { timeout: canceller.promise})
                .then(function(response){
                   return response.data;
                });
 
        return {
            promise: promise,
            cancel: cancel
        };
    };
 
    return {
        getById: getById
    };
 
});