MVCでAngularを使用したWebサービス呼び出し

Question

Angular in MVCプロジェクトを使用してアクションを呼び出すにはどうすればよいですか？

私はこのようにアヤックスを使用してアクションを呼び出すために管理：

var app = angular.module('toprightSec', ['ng']); 
app.controller('NationalityCtrl', ['$scope', function ($scope, $http) { 
$scope.items = []; 

var items = populateListFromLocalStorage("offices", "Login/GetOffices", 24); 
var officelist = ""; 

for (var i = 0; i < items.length; i++) 
{ 
    $scope.items[i] = { "name": read_prop(items[i], 'office_desc'), "guid": read_prop(items[i], 'office_guid') }; 
} 

$scope.reloadPage = function() { window.location.reload(); } 

$scope.getResult = function ($index, item) { 

    $.ajax({ 
      type: 'GET', 
      async: true, 
      url: 'Login/ChangeOffice', 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      data: { 
       officeID: $scope.items[$index].guid, 
       officeName: $scope.items[$index].name, 
      }, 
      success: function (msg) { 
      } 
     }); 
}; 

}]); 

私はこのような角度に変更する試してみました：

var AngularModule = angular.module('toprightSec', ['ng']); 

AngularModule.service('ApiCall', ['http', function ($http) { 

var result; 
this.PostApiCall = function (controllerName, methodName, obj) { 
    debugger; 
    result = $http.post('api/' + controllerName + '/' + methodName,obj).success(function (data, success) { 
     result = (data); 
    }).error(function() { 
     ("Something went wrong"); 
    }); 
    return result; 
}; 

}]); 

AngularModule.controller('NationalityCtrl', ['$scope', function ($scope, $http, ApiCall) { 
$scope.items = []; 
var items = populateListFromLocalStorage("offices", "Login/GetOffices", 24); 
var officelist = ""; 
for (var i = 0; i < items.length; i++) 
{ 
    $scope.items[i] = { "name": read_prop(items[i], 'office_desc'), "guid": read_prop(items[i], 'office_guid') }; 
} 

$scope.reloadPage = function() { window.location.reload(); } 

$scope.getResult = function ($index, item) { 

    var obj = { 
     'officeID' : '123', 
     'officeName' : 'Sample' 
    } 

    var result = ApiCall.PostApiCall("Login", "ChangeOffice", obj).success(function (data) { 

     var data = $.parseJSON(JSON.parse(data)); 
     $scope.message = data; 

    }); 

}; 

}]); 

私は「PostApiCallは」ブラウザ上で定義されていない、このエラーを得続けますコンソール。

私はここで何が間違っていますか？

ありがとうございました。

Answer 1

まあ、私は自分のコードには2つの問題に気づいた、それを修正するために管理：私は2つの$ HTTPを使用していた

1. をそれぞれの場所で成功を収めていました。 （解決策はcharlietflによって提案されました）
2. 他の問題は、私が通過していたパラメータであり、正しくないということでした。

これは私の更新作業コードです：助けを

var app = angular.module('BMSApp', []); 

app.factory('ApiCall', ['$http', function ($http) { 
var PostApiCall = function (controllerName, methodName) { 
    return $http.post(controllerName + '/' + methodName); 
}; 
var GetApiCall = function (controllerName, methodName) { 
    return $http.get(controllerName + '/' + methodName); 
}; 
return { 
    PostApiCall: PostApiCall, 
    GetApiCall: GetApiCall 
}; 
}]); 

app.controller('NationalityCtrl', ['ApiCall', '$scope', function (ApiCall,$scope) {   
$scope.items = []; 
var items = populateListFromLocalStorage("offices", "Login/GetOffices", 24); 
var officelist = ""; 
for (var i = 0; i < items.length; i++) 
{ 
    $scope.items[i] = { "name": read_prop(items[i], 'office_desc'), "guid": read_prop(items[i], 'office_guid') }; 
} 
$scope.getResult = function ($index, item) { 
    var result = ApiCall.PostApiCall("Login", "ChangeOffice/?officeID=" + $scope.items[$index].guid + "&officeName="+$scope.items[$index].name).then(function (data) { 
     $scope.reloadPage(); 
    }); 
}; 
}]); 

みんなありがとう。

Answer 2

ユーザーの約束、$ HTTPが行われたときに返す：

this.PostApiCall = function (controllerName, methodName, obj) { 
     debugger; 
     var deferred = $q.defer(); 
     $http.post('api/' + controllerName + '/' + methodName,obj).success(function (data) { 
      deferred.resolve(data); 
     }); 
     return deferred.promise; 
    }; 

    var result = ApiCall.PostApiCall("Login", "ChangeOffice", obj).then(function (data) { 
     var data = $.parseJSON(JSON.parse(data)); 
     $scope.message = data; 
    });