.NET Core и Angular 2 Рабочий процесс

Мне интересно, чтоправильный Структура подачи предназначена для настройки приложения .NET Core 1.0.0 MVC с Angular 2. Я просмотрел различные учебные пособия и лекции, но все они, кажется, имеют разные способы реализации Angular 2 в .NET. Кроме того, каковы лучшие практики для внедрения angular 2 в приложение .NET MVC (например, когда мне следует использовать угловые SPA-методы вместо использования POST / GET с .NET) и как мне правильно настроить рабочий процесс? Спасибо.

 AngJobs on Github08 июл. 2016 г., 17:42
Можете ли вы добавить несколько ссылок на "разные способы", которые вы нашли? Спасибо!
 ntdog2208 июл. 2016 г., 19:04
@AngJobs Это первоессылка на сайт Исходя из моего понимания, предполагается, что поток должен создавать код под папкой внеWwwroot папка. этоссылка на сайт предполагает, что весь код, который мы хотим изменить, будет сделан исключительно вWwwroot папка. Это только два источника, которые я мог вспомнить из макушки моей головы. Есть ли у вас какие-либо предложения о том, как реализовать правильную структуру папок для этого типа приложения? Спасибо!

Ответы на вопрос(1)

Решение Вопроса

существует ли еще «правильный» метод для настройки приложения .NET Core 1.0.0 MVC с Angular 2. Но я разработал подход, основанный на следующем принципе:

Пусть asp.net обрабатывает бэкэнд, а Angular2 обрабатывает передний конец.

В противном случае не смешивайте два (если вы не находитесь в Angular Universal, в которой ваше приложение ng2 предварительно визуализируется на сервере, но это особая тема).

Я разделяю эти проблемы настолько полно, что при разработке я использую angular-cli в контекстеVisual Studio Codeто есть ни один байт .net не присутствует в среде разработки Angular2. Я считаю, что создание приложений ng2 без Visual Studio крайне раздражает. Команда Angular создала Angular-Cli для решения многих проблем разработки и производства, связанных с Angular2, чтобы проще было позволить Angular-Cli отвечать за весь рабочий процесс переднего плана. Следует также упомянуть, что работать с кодом Visual Studio так приятно (сейчас я предпочитаю его над Visual Studio).

Примечание: я знаю, что вы можете использовать .Net Core в контексте кода Visual Studio, и я пробовал это, но это было все еще слишком раздражающим, чтобы беспокоиться. Лучше всего позволить Angular-Cli запустить шоу для всех фронтэндов.

Теперь, конечно, ваше приложение ng2, вероятно, захочет совершать звонки на «сервер», то есть совершать http-вызовы и т. Д., Например:

    getMeSomeServerData(someVar: string): Promise < IGenericRestResponse > {
      let headers = new Headers();
      headers.append("Content-Type", "application/json");
      let url = this.apiUrl + "getMeSomeServerData";
      let post = this.http.post(url, JSON.stringify(someVar), {
        headers: headers
      }).map(response => response.json());
      return post.toPromise();
    }

Главное, на что нужно обратить внимание:

this.apiUrl

Когда я нахожусь в режиме разработки, я делаю это, ссылаясь на мой внутренний проект, расположенный вHTTP: // локальный: 1234 / который относится к проекту asp.net Web Api, который я одновременно запускаю в Visual Studio. Так что бэкэнд выглядит примерно так:

 // this of course goes within a controller
 [HttpPost()]
 [Route("getMeSomeServerData")]
 public JsonNetResult GetMeSomeServerData(string someVar) {
   GenericRestResponse response = new GenericRestResponse();
   response.Error = false;
   // do somthing 
   return new JsonNetResult(response);
 }

Примечание: вы должны настроить серверную часть mvc asp.net для CORS или HTTP-запросов с несколькими источниками, так как ваше приложение ng2 не находится в вашем домене проекта mvc.

Когда вы хотите развернуть свое приложение для производства, вы используете команду angular-cli для объединения и оптимизации вашего приложения ng2 ("ng build -prod"). Затем скопируйте все ресурсы из папки «prod» в ваш проект asp.net (gulp делает это быстро и легко). Используйте ОДИН вид бритвы и один вид бритвы только для показа своей веб-страницы. Вот пример такого представления, Home.cshtml:

<!DOCTYPE html>

<html>

<head>
  <base href="/">
   <script type="text/javascript" src="~/assets/js/styles.bundle.min.js"></script>

</head>

<body>
  <app>Loading...</app>
  <script type="text/javascript" src="~/assets/js/main.bundle.min.js"></script>
</body>

</html>

И это рабочий процесс, который я разработал, и он прекрасно работает для меня. Я понимаю, что этот подход не будет работать для тех, кто использует Mac или Linux. В средах, отличных от Windows, я бы по-прежнему рекомендовал настроить рабочий процесс разработки таким образом, чтобы ваше угловое приложение находилось в одном проекте, а ядро ​​.net "сервер" - в отдельном проекте.

ОБНОВЛЕНИЕ: я забыл упомянуть, что когда вы создаете для производства и эффективно объединяете фронтенд и бэкэнд в одном проекте, вы должны не забыть обновитьapiUrl на «/», что указывает на то, что внутренние вызовы находятся в текущем домене (т.е. нет CORS)

 k11k225 июл. 2017 г., 07:11
@brando Как angular-cli может взять home.cshtml в качестве индексного файла для angular 2.?
 ntdog2225 окт. 2016 г., 21:30
Большое спасибо за подробное описание! Это очень помогает, и я очень ценю, что вы нашли время ответить.
 brando25 окт. 2016 г., 21:34
Добро пожаловать. Вам будет очень приятно развивать «угловой путь» с VS Code и angular-cli. Не то, чтобы я не любил Visual Studio, но я оставляю это только для бэкэнда asp.net, веб-API, который действительно хорош.
 brando25 авг. 2017 г., 04:21
@ k11k2 angular-cli не может прочитать home.cshtml. когда вы создаете для производства в рамках проекта разработки, вы переносите рабочие файлы в рабочий проект. home.cshtml существует только в производственном проекте (в Visual Studio), и производственный проект ничего не знает об angular-cli и не нуждается в этом.
 brando25 окт. 2016 г., 21:59
@ ntdog22 обратите внимание на ОБНОВЛЕНИЕ, которое я сделал к своему ответу

Ваш ответ на вопрос