.NET Core and Angular 2 Workflow

I am wondering what the correct feed structure is for creating a .NET Core 1.0.0 MVC application using Angular 2. I have looked at various tutorials and lectures, but they all seem to have different ways to implement Angular 2 in .NET. Also, what are the best methods for implementing Angular 2 in a .NET MVC application (aka when should I use Angular SPA methods or using POST / GET with .NET) and how to set up the workflow correctly? Thank.

+3
source share
1 answer

I use asp.net along with Angular 2 all the time. I don’t know if there is still a “correct” method for installing the .NET Core 1.0.0 MVC application using Angular 2. But I developed an approach based on the following principle:

Let asp.net handle the backend and Angular2 handle the front end.

Otherwise, you should not mix the two (unless you are using Angular Universal, in which your ng2 application is previously displayed on the server, but this is a special topic).

, , , angular -cli Visual Studio, .net Angular2 . , ng2 Visual Studio . Angular angular -cli , , Angular2, angular -cli . , Visual Studio Code ( 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();
    }
Hide result

:

this.apiUrl

, , - http://localhost: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);
 }
Hide result

. asp.net mvc 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>
Hide result

, . , , Mac Linux. , Windows, - , Angular , ".net" - .

UPDATE: , , apiUrl "/", , (.. CORS)

+10

Source: https://habr.com/ru/post/1669990/


All Articles