marcwoozie blog

都内のwebエンジニア2年目です

anguler jsでapi call

下記のような感じで実装しました。

;(function() {

  var apiAppModule = angular.module('apiApp', []);

  apiAppModule.value("urls", 
    {
      item: "http://workspace.com/anguler/hoge.json"
    }
  );

  apiAppModule.factory("APICall", function($http, urls){
    var func = function(url, method){
      return $http({
        url: url,
        method: method,
      })
      .success(function(res){
        return res;
      })
      .error(function(error){
        console.log(error);
        return false;
      });
    };
    var get = {
      item: func(urls.item, "GET")
    };
    return {
      item: get.item
    };
  });

  apiAppModule.controller("itemController", function($scope, APICall){

    APICall.item.then(function(response){
      // $scope.items = response.data.items みたいな
    });

  });

})();

jQueryだとこんな風に書きますよね。。?

;(function() {
   $.ajax({
      type : "GET",
      url : "http://workspace.com/anguler/hoge.json",
      dataType : "json",
      complete: function(res) {
      },
      success: function(res) {
        // 最終的にappendする
      },
      error: function(error) {
        console.log(error)
      }
    });
    return false;
  });
})();

印象としては、apiをcallする自体はそんなに変わりないないけれど、
受け取ったデータをviewに渡すのがangulerすばらしいな〜と思いました。