URL ресурса AngularJS для WebAPI

У меня есть веб-сайт, созданный с использованием ASP.NET MVC 5. Внутри этого веб-сайта у меня есть «небольшой SPA», созданный с использованием AngularJS. Для получения/отправки данных я использую Web API (маршрутизация по умолчанию). Я размещаю свой веб-сайт с помощью подпапки, поэтому мой URL-адрес выглядит как www.mydomain.com/MyApp.Web/ . Когда я пытаюсь создать URL-адрес для службы ресурсов, я использую строку типа "/api/controllerName", но когда angular получает/отправляет на сервер, он пропускает подпапку (MyApp. Web) в URL-адресе, поэтому на самом деле он получает/отправляет на URL-адрес, например www.mydomain.com/api/controllerName. Как сделать так, чтобы angular включал подпапку в URL-адрес?


url angularjs asp.net-mvc asp.net-web-api angular-resource
person macpak    schedule 28.01.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Как сделать так, чтобы angular включал подпапку в URL-адрес?

Никогда не кодируя URL-адрес в своем приложении, но используя помощник URL-адреса на стороне сервера для его создания:

<script type="text/javascript">
    var url = '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "controllerName" })';
    $.post(url, { foo: 'bar' }, function(result) {
        ...
    });
</script>

В качестве альтернативы вы можете использовать этот помощник для встраивания правильного URL-адреса в какой-либо элемент DOM вашего SPA. Предположим, что вы выполняете AJAXфикацию якоря. Вы просто сгенерируете правильный URL-адрес на сервере:

<a href="@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "controllerName" })" id="mylink">Click me</a>

а затем в вашем отдельном файле js:

$('#mylink').click(function() {
    $.post(this.href, { foo: 'bar' }, function(result) {
        ...
    });
    return false;
});

Обратите внимание, что URL нигде не жестко закодирован. Это гарантированно правильно, потому что оно генерируется помощником URL-адресов на стороне сервера с учетом конфигурации ваших маршрутов и любых возможных виртуальных каталогов.

person Darin Dimitrov    schedule 28.01.2014
comment
Я не жестко кодирую URL-адрес, когда я настраиваю службу ресурсов angular, я использую такой код, как $resource('api/discussion/:discussionId', {discussionId:discussionId}), однако angular создает неверный URL-адрес. - person macpak; 28.01.2014
comment
Конечно, вы жестко закодировали это: 'api/discussion/:discussionId'. Здесь вы предполагаете, что ваши маршруты имеют вид api/{controller}/{id}. Вы абсолютно никогда не должны этого делать. Вы всегда должны использовать помощники URL-адресов для создания этого URL-адреса, как показано в моем ответе. Это самый надежный способ убедиться, что URL-адрес будет правильным и будет работать независимо от того, где размещено ваше приложение — внутри виртуального каталога или нет. - person Darin Dimitrov; 28.01.2014
comment
Идти по этому пути нормально, однако мой вопрос заключался в том, почему angular опускает подпапку... - person macpak; 28.01.2014
comment
Вы использовали относительный жестко заданный маршрут. Таким образом, это будет зависеть от того, в каком месте был клиентский браузер, когда вы создали этот URL-адрес. Angular ничего не знает о подпапках. - person Darin Dimitrov; 28.01.2014
comment
Хорошо, теперь это имеет смысл для меня. Спасибо за помощь. - person macpak; 28.01.2014

arrow_upward
2
arrow_downward

Подобно ответу Дарина... Объявите глобальную переменную в вашем файле index.html:

<script>
    var rootUrl = '@Url.Content("~/")';
</script>

А затем создайте сервис, который будет оберткой стандартного $http. Эта оболочка при использовании затем может проверить, начинается ли переданный URL-адрес, например, с «~» (как вы знакомы с этим из .NET), и он создает полный URL-адрес, комбинируя переданный URL-адрес и rootUrl.

person David Bohunek    schedule 28.01.2014