Маршрутизация HTML5 в приложении Angular2 с помощью ASP.Net Core MVC и ASP.Net Web Api

Я разрабатываю приложение Angular2 с помощью ASP.Net Core MVC и ASP.Net Web Api.

Вот моя основная архитектура.

Проект ASP.Net Core MVC (MyProject.Web)

  • Nuget, npm и bower используются для зависимостей. Bower используется для копирования зависимостей npm с node_modules на wwwroot/libs/
  • Home/Index Действие контроллера предоставляет первую страницу, которая загружает Angular2 и другие зависимости.
  • Шаблоны загружаются из ActionMethods, т.е. Home/About
  • SystemJS загружает модули.
  • Служба http Angular2 вызывает проект ASP.Net Web Api (отдельный проект, чем mvc)

Проект веб-API ASP.Net (MyProject.Api). Каждый контроллер предназначен для операций CRUD объекта и ответов на HTTP-запросы Angular2.

Проблема: я не могу использовать маршрутизацию HTML5 и вынужден использовать хэш-маршрутизацию, потому что маршрутизация html5 вызывает сервер, а в моем проекте MVC нет соответствующего контроллера. Итак, сервер ничего не возвращает.


person Super Coder    schedule 14.01.2017    source источник
comment
Вы должны иметь возможность настроить свой сервер для поддержки HTML5 pushState. Ему просто нужно вернуть index.html для неизвестных URL-адресов.   -  person Günter Zöchbauer    schedule 14.01.2017
comment
Во-первых, нет index.html, как упоминалось выше, методы действий используются для доставки html. Во-вторых, что, если мое AngularApp запрашивает ресурс (например, изображение, css, js файл и т. Д.), Который существует, но больше не доступен, и я хочу отобразить ошибку. Но в вашем решении возвращается действие index? Как с этим бороться?   -  person Super Coder    schedule 14.01.2017
comment
Вы можете вернуть ответ 404 (не перезаписывать в index.html) для запросов, которые пытаются получить доступ к ресурсам в каталоге asset (или отличить по другим критериям)   -  person Günter Zöchbauer    schedule 14.01.2017


Ответы (3)


Проблема: я не могу использовать маршрутизацию HTML5 и вынужден использовать хэш-маршрутизацию, потому что маршрутизация html5 вызывает сервер, а в моем проекте MVC нет соответствующего контроллера. Итак, сервер ничего не возвращает.

Добавление # в путь маршрута, вероятно, является наиболее распространенным решением в таком случае, как вы, но ...

У вас есть какая-то особая причина для использования MVC с Angular?


На мой взгляд, вам не нужен MVC - вы можете просто создать пустой проект ASP.NET Core и добавить в свое приложение HTML / Angular - чистый, простой, удобный и без конфликтов между MVC и Angular;)

Добавьте свои файлы (включая index.html) в wwwroot и обновите свой Startup.cs файл:

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
            app.UseDefaultFiles(); <- Add this line before UseStaticFiles
            app.UseStaticFiles();            
    }
}


Дополнительная информация:

person Lukasz Mk    schedule 14.01.2017
comment
Это то, что я видел в большинстве руководств. Тем не менее, я также хочу воспользоваться преимуществами Razor (думал, что еще не сделал этого, но я думаю, что в конечном итоге я это сделаю), т.е. я буду отображать статическую информацию (информация, которая редко меняется) через ViewModel и не позволяю angular используйте http-вызовы для этой информации. Что вы скажете об этом варианте использования? - person Super Coder; 15.01.2017
comment
Ответ зависит от вашего дизайна и реализации - если вы собираетесь использовать SPA, то Angular будет вашей основной технологией, и вы не увидите преимуществ от MVC. - person Lukasz Mk; 15.01.2017
comment
Конечно, вы можете создать приложение MVC (в качестве основной технологии) с Angular в качестве дополнительной (поддерживающей) технологии, но я предполагаю, что это направление вас не интересует. - person Lukasz Mk; 15.01.2017
comment
Про ваш пример and will not let angular use http calls for that info - в чем проблема? Angular или MVC - тот же http-запрос. - person Lukasz Mk; 15.01.2017
comment
В настоящее время я работаю над проектом, предназначенным для использования преимуществ как MVC, так и AngularJS ,, и я не заметил никакого использования MVC, кроме чрезмерно усложненного дизайна. (Извините за мой английский, надеюсь, вы понимаете, о чем я). - person Lukasz Mk; 15.01.2017
comment
У тебя хороший английский, не беспокойся об этом. Спасибо, что не заметили моих опечаток в последнем комментарии ;-). Что ж, да, это одностраничное приложение, и пока очевидно, что MVC не дает никаких преимуществ, но я собираюсь написать пример использования в моем следующем комментарии. - person Super Coder; 15.01.2017
comment
Представьте, что вы загрузили частичное представление из mvc и загрузили как шаблон в Angular2. В этом представлении отображаются два блока, один из которых содержит сведения о зарегистрированном пользователе, а второй отображает некоторую другую информацию, и оба этих информационных блока требуются на некоторых страницах. Теперь было бы лучше сделать отдельный http-класс для (1) данных шаблона (2) для данных первого div (3) для второго div. Что ты говоришь? - person Super Coder; 15.01.2017
comment
Давайте продолжим это обсуждение в чате. - person Super Coder; 15.01.2017
comment
Извини за поздний ответ. Для меня разделение кода между двумя фреймворками (MVC и Angular) похоже на добавление дополнительной работы, но если вы видите причину / преимущества, сделайте это - в этом нет ничего плохого ... Это только о том, что вы хотите;) - person Lukasz Mk; 21.01.2017
comment
Но в этом случае мы возвращаемся к проблеме с маршрутами - поэтому добавьте '#' или измените конфигурацию маршрута по умолчанию в Startup.cs. - person Lukasz Mk; 21.01.2017
comment
Спасибо. Я переместил шаблоны из представлений MVC в файлы HTML и использовал их напрямую. В очередной раз благодарим за помощь . - person Super Coder; 18.02.2017
comment
Думаю, теперь я смогу использовать маршрутизацию HTML5. - person Super Coder; 18.02.2017

Если вы планируете использовать в IIS, вы можете использовать модуль перезаписи URL. По сути, он сообщает веб-серверу о необходимости переписать все URL-адреса маршрутизации в index.html. .

<?xml version="1.0" encoding="utf-8"?>
<system.webServer>
   <handlers>
      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule"
resourceType="Unspecified"/>
   </handlers>
   <aspNetCore processPath="%LAUNCHER_PATH%" arguments="%LAUNCHER_ARGS%"
stdoutLogEnabled="true" stdoutLogFile=".\logs\stdout"
forwardWindowsAuthToken="false" />
      <rewrite>
         <rules>
            <rule name="Angular 2 pushState routing" stopProcessing="true">
               <match url=".*" />
               <conditions logicalGrouping="MatchAll">
                  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                  <add input="{REQUEST_FILENAME}" pattern=".*\.[\d\w]+$" negate="true" />
                  <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
               </conditions>
               <action type="Rewrite" url="/index.html" />
            </rule>
         </rules>
      </rewrite>
   </system.webServer>
</configuration>
person Win    schedule 14.01.2017

«Я не могу использовать маршрутизацию HTML5 и вынужден использовать хэш-маршрутизацию, потому что маршрутизация html5 вызывает сервер, а в моем проекте MVC нет соответствующего контроллера. Таким образом, сервер ничего не возвращает»

https://github.com/aspnet/JavaScriptServices

Ищите помощника по маршрутизации, также известного как spa services nuget, и резервный маршрут spa.

Если серверный маршрут не найден и у маршрута нет расширения файла, тогда index.html должен быть возвращен клиенту, где текущий маршрут интерпретируется угловым маршрутизатором как маршрут на стороне клиента.

person Elisabeth    schedule 07.11.2017