AngularJS Services

8,069 views
7,761 views

Published on

AngularJS Services

Published in: Technology, Education
0 Comments
40 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,069
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
40
Embeds 0
No embeds

No notes for slide

AngularJS Services

  1. 1. $http({ method: GET, url: /someUrl }).success(function (data, status, headers, config) {// this callback will be called asynchronously// when the response is available}).error(function (data, status, headers, config) {// called asynchronously if an error occurs// or server returns response with an error status.});
  2. 2. $http.get(/someUrl).success( successCallback );$http.post(/someUrl, data).success( successCallback );
  3. 3. angular.module(MyApp, []).config(function ($httpProvider) {// Remove the default AngularJS X-Request-With headerdelete $httpProvider.defaults.headers.common[X-Requested-With];// Set DO NOT TRACK for all Get requests$httpProvider.defaults.headers.get[DNT] = 1;});$http.get(api/user, {// Set the Authorization header. In an actual app, you would// get the auth token from a service.headers: {Authorization: Basic Qzsda231231},params: {id: 5}}).success(function() { // Handle success });
  4. 4. var module = angular.module(myApp);module.config(function ($httpProvider) {$httpProvider.defaults.transformRequest = function (data) {// We are using jQuery’s param method to convert our// JSON data into the string formreturn $.param(data);};});
  5. 5. $http.get(http://server/myapi, {cache: true}).success(function() { // Handle success });
  6. 6. // register the interceptor as a service$provide.factory(myHttpInterceptor, function ($q, dependency1, dependency2) {return function (promise) {return promise.then(function (response) { // do something on successreturn response;},function (response) {// do something on errorif (canRecover(response)) { return responseOrNewPromise }return $q.reject(response);});}});$httpProvider.responseInterceptors.push(myHttpInterceptor);// register the interceptor via an anonymous factory$httpProvider.responseInterceptors.push(function ($q, dependency1, dependency2) {return function (promise) { // same as above }});
  7. 7. $resource(url[, paramDefaults][, actions]);
  8. 8. { get: {method:GET},save: {method:POST},query: {method:GET, isArray:true},remove: {method:DELETE},delete: {method:DELETE} };var User = $resource(/user/:userId, { userId: @id });var user = User.get({ userId: 123 }, function () {user.abc = true;user.$save();});
  9. 9. Kris Kowals Q“Interface for interacting with an object that represents the result of anaction that is performed asynchronously, and may or may not befinished at any given point in time.”step1(function (val1) {step2(value1, function (val2) {step3(value2, function (val3) {step4(value3, function (val4) {// Do something with val4});});});});Q.fcall(step1).then(step2).then(step3).then(step4).then(function (val4) {// Do something with val4}, function (error) {// Handle any error from step1// through step4}).done();
  10. 10. function asyncGreet(name) {var deferred = $q.defer();setTimeout(function () {scope.$apply(function () {if (okToGreet(name)) {deferred.resolve(Hello, + name + !);} else {deferred.reject(Greeting+name+is not allowed.);}});}, 1000);return deferred.promise;}asyncGreet(Robin Hood).then( function (greeting) {alert(Success: + greeting);},function (reason) {alert(Failed: + reason);});
  11. 11. var myModule = angular.module(myModule, []);myModule.factory(serviceId, function () {var shinyNewServiceInstance;//factory function body that constructs shinyNewServiceInstancereturn shinyNewServiceInstance;});angular.module(myModule, [], function ($provide) {$provide.factory(serviceId, function () {var shinyNewServiceInstance;//factory function body that constructs shinyNewServiceInstancereturn shinyNewServiceInstance;});});
  12. 12. <div ng-controller="MyController"><button ng-click="sayHello()">Hello</button></div>function MyController($scope, greeter) {$scope.sayHello = function () {greeter.greet(Hello World);};}// The ng-controller directive does this behind the scenesinjector.instantiate(MyController);
  13. 13. function MyController($scope, greeter) {...}var MyController = function(renamed$scope, renamedGreeter) {...}MyController.$inject = [$scope, greeter];someModule.factory(greeter, [$window, function(renamed$window) {...}]);

×