Параметры URL-адреса AngularJS WebAPI

Question

Я новичок в Angular, но имею опыт работы с ASP.NET MVC, поэтому основные понятия здесь не новы для меня. Я пытаюсь передать простой текстовый параметр моему контроллеру WebAPI как слово «парк», тогда контроллер WebAPI выполнит запрос linq и вернет результаты в Angular, который отобразит эти результаты с помощью ng-repeat в виде. Он отлично работает в случае, когда я возвращаю все строки из базы данных, но когда я пытаюсь передать параметр ключевого слова, ничего не происходит. Каков самый простой способ передать параметр из Angular в контроллер WebAPI для использования там в запросе linq базы данных? Спасибо.

AngularJS код:

var PhrasierApp = angular.module("Phrasier", ["ngRoute", "ngResource"]). 
    config(function ($routeProvider) { 
     $routeProvider. 
      when('/', { controller: DialogCtrl, templateUrl: 'dialog.html' }). 
      otherwise({ redirectTo: '/' }); 
    }); 


PhrasierApp.factory('Phrase', function ($resource) { 
    return $resource('/api/Phrase/:Keyword1', { Keyword1: 'park' }, { update: { method: 'PUT' } }); 
}); 


var DialogCtrl = function ($scope, $location, Phrase) { 
     $scope.phraseResults = Phrase.query(); 
}; 

Web API контроллера:

public IQueryable<Phrase> GetPhrases(string Keyword1) 
    { 
     var model = from p in db.Phrases where p.Text.Contains(Keyword1) select p; 
     return model; 
    } 

Частичный вид:

<table class="table"> 

    <thead> 
     <tr> 
      <th></th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr ng-repeat="phraseResult in phraseResults"> 
      <td>{{phraseResult.Text}}</td> 
     </tr> 
    </tbody> 

</table> 

Answer 1

Я не очень хорошо знаком с AngularJS ресурсов, я использовал $http для подключения мой ASP.NET WebAPI от AnuglarJS. Но я думаю, что проблема, с которой вы столкнулись, - это запрос в WebAPI: http://web-api/api/Phrase/shaun, но ваш контроллер WebAPI пытается подать параметр в формате http://web-api/api/Phrase?Keyword1=shaun.

Возможно, это решение изменит ваш код AngularJS, чтобы он отправил запрос в режиме строки запроса или изменил код WebAPU для анализа параметра из URL-адреса. В моем случае я применил первое решение.

Answer 2

Вы можете абстрактные из родовой HTTPService

'use strict'; 
appModule.factory('HttpService', ['$http', '$q', function ($http, $q) { 

var HttpService = this; 
HttpService.httpPost = function (url, config) { 
    return function (data) { 

     var deferred = $q.defer(); 

     $http.post(url, data, config).success(function (data, status, headers, config) { 
      deferred.resolve(data); 
     }).error(function (reason) { 
      deferred.reject(reason); 
     }); 
     return deferred.promise; 
    }; 
}; 

return HttpService; 
}]); 

Тогда в другой угловой услуге вы могли бы иметь что-то вроде этого

PhraseService.getPhrases = HttpService.httpPost("/api/Phrases/GetPhrases"); 

Затем в угловом контроллера вы могли бы иметь что-то вроде этого

function getPhrases() { 
     PhraseService.getPhrases({ Keyword1: $scope.keyword1 }).then(function (result) { 
      $scope.phraseResults = result 
     }); 
    } 

И ваш контроллер WebApi может выглядеть так, или я бы предпочел, чтобы позже, так что вы возвращаете фактический HttpAction Результат

[AcceptVerbs("POST")] 
    public IQueryable<Phrase> GetPhrases(string Keyword1) 
    { 
     var model = from p in db.Phrases where p.Text.Contains(Keyword1) select p; 
     return model; 
    } 

[AcceptVerbs("POST")] 
    public IHttpActionResult GetPhrases([FromUri]string Keyword1) 
    { 
     var phrases = _phraseService.GetPhrases(Keyword1); 
     return Ok(phrases); 
    }