janbaer
9/16/2014 - 8:26 AM

Angular promises

Angular promises

jsbin.mugitokunuje.js
content_copyfile_download
var app = angular.module('MyApp', []);

app.factory('MyService', function($q, $timeout) {
  var fetchData = function () {
    var deferred = $q.defer();
    
    $timeout(function() {
      deferred.reject(new Error('Error while fetching data'));
    }, 1000);
    
    return deferred.promise;
  };
  
  return {
    fetchData: fetchData
  };
});

app.controller('MyController', function($scope, MyService) {
  $scope.result = "Hello";
  
  $scope.fetchData = function () {
    MyService.fetchData()
      .then(function(data) {
        $scope.result = data;
      }, function(error) {
        $scope.errorMessage = error.message;
      });
  };
 
});
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="MyApp">
  <div ng-controller="MyController">
    <button ng-click="fetchData()">Fetch data</button>
    <p>
      <div>{{ result }}</div>
    </p>
  
  <p><span style="color:red;">{{errorMessage}}</span></p>
  </div>
<script id="jsbin-javascript">
var app = angular.module('MyApp', []);

app.factory('MyService', function($q, $timeout) {
  var fetchData = function () {
    var deferred = $q.defer();
    
    $timeout(function() {
      deferred.reject(new Error('Error while fetching data'));
    }, 1000);
    
    return deferred.promise;
  };
  
  return {
    fetchData: fetchData
  };
});

app.controller('MyController', function($scope, MyService) {
  $scope.result = "Hello";
  
  $scope.fetchData = function () {
    MyService.fetchData()
      .then(function(data) {
        $scope.result = data;
      }, function(error) {
        $scope.errorMessage = error.message;
      });
  };
 
});
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"><\/script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="MyApp">
  <div ng-controller="MyController">
    <button ng-click="fetchData()">Fetch data</button>
    <p>
      <div>{{ result }}</div>
    </p>
  
  <p><span style="color:red;">{{errorMessage}}</span></p>
  </div>
</body>
</html></script>


<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('MyApp', []);

app.factory('MyService', function($q, $timeout) {
  var fetchData = function () {
    var deferred = $q.defer();
    
    $timeout(function() {
      deferred.reject(new Error('Error while fetching data'));
    }, 1000);
    
    return deferred.promise;
  };
  
  return {
    fetchData: fetchData
  };
});

app.controller('MyController', function($scope, MyService) {
  $scope.result = "Hello";
  
  $scope.fetchData = function () {
    MyService.fetchData()
      .then(function(data) {
        $scope.result = data;
      }, function(error) {
        $scope.errorMessage = error.message;
      });
  };
 
});</script></body>
</html>