angular單頁應用_ASP.NET單頁應用程式Angular版本候選

angular單頁應用

I was doing some Angular then remembered that the ASP.NET "Angular Project Template" has a release candidate and is scheduled to release sometime soon in 2018.

我當時在做一些Angular，然後想起ASP.NET“ Angular Project Template”有一個候選釋出版本，并計劃于2018年某個時候釋出。

Starting with just a .NET Core 2.0 install plus Node v6 or later, I installed the updated angular template. Note that this isn't the angular/react/redux templates that came with .NET Core's base install.

從僅安裝.NET Core 2.0以及Node v6或更高版本開始，我安裝了更新的角度模闆。 請注意，這不是.NET Core基本安裝随附的angular / react / redux模闆。

I'll start by adding the updated SPA (single page application) template:

我将從添加更新的SPA(單頁應用程式)模闆開始：

Then from a new directory, just

然後從一個新目錄

Then I can open it in either VSCode or Visual Studio Community (free for Open Source). If you're interested in the internals, open up the .csproj project file and note the checks for ensuring node is install, running npm, and running WebPack.

然後，我可以在VSCode或Visual Studio社群(對于開源免費)中打開它。 如果您對内部結構感興趣，請打開.csproj項目檔案，并注意檢查以確定節點已安裝，正在運作npm和正在運作WebPack。

If you've got the Angular "ng" command line tool installed you can do the usual ng related stuff, but you don't need to run "ng serve" because ASP.NET Core will run it automatically for you.

如果您已經安裝了Angular“ ng”指令行工具，則可以執行與ng相關的正常操作，但是您無需運作“ ng serve”，因為ASP.NET Core會自動為您運作它。

I set development mode with "SET ASPNETCORE_Environment=Development" then do a "dotnet build." It will also restore your npm dependencies as part of the build. The client side app lives in ./ClientApp.

我使用“ SET ASPNETCORE_Environment = Development”設定開發模式，然後執行“ dotnet建構”。 它還将在建構過程中還原您的npm依賴項。 用戶端應用程式位于./ClientApp中。

C:\Users\scott\Desktop\my-new-app> dotnet build
Microsoft (R) Build Engine version 15.5 for .NET Core
Copyright (C) Microsoft Corporation. All rights reserved.

  Restore completed in 73.16 ms for C:\Users\scott\Desktop\my-new-app\my-new-app.csproj.
  Restore completed in 99.72 ms for C:\Users\scott\Desktop\my-new-app\my-new-app.csproj.
  my-new-app -> C:\Users\scott\Desktop\my-new-app\bin\Debug\netcoreapp2.0\my-new-app.dll
  v8.9.4
  Restoring dependencies using 'npm'. This may take several minutes...           

"dotnet run" then starts the ng development server and ASP.NET all at once.

然後“ dotnet run”立即啟動ng開發伺服器和ASP.NET。

If we look at the "Fetch Data" menu item, you can see and example of how Angular and open source ASP.NET Core work together. Here's the Weather Forecast *client-side* template:

如果我們檢視“擷取資料”菜單項，則可以看到Angular和開源ASP.NET Core如何協同工作的示例。 這是天氣預報*用戶端*模闆：

<p *ngIf="!forecasts"><em>Loading...</em></p>

<table class='table' *ngIf="forecasts">
  <thead>
    <tr>
      <th>Date</th>
      <th>Temp. (C)</th>
      <th>Temp. (F)</th>
      <th>Summary</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let forecast of forecasts">
      <td>{{ forecast.dateFormatted }}</td>
      <td>{{ forecast.temperatureC }}</td>
      <td>{{ forecast.temperatureF }}</td>
      <td>{{ forecast.summary }}</td>
    </tr>
  </tbody>
</table>
           

And the TypeScript:

和TypeScript：

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-fetch-data',
  templateUrl: './fetch-data.component.html'
})
export class FetchDataComponent {
  public forecasts: WeatherForecast[];

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }
}

interface WeatherForecast {
  dateFormatted: string;
  temperatureC: number;
  temperatureF: number;
  summary: string;
}
           

Note the URL. Here's the back-end. The request is serviced by ASP.NET Core. Note the interface as well as the TemperatureF server-side conversion.

記下URL。 這是後端。 該請求由ASP.NET Core服務。 注意接口以及TemperatureF伺服器端轉換。

Pretty clean and straightforward. Not sure about the Date.Now, but for the most part I understand this and can see how to extend this. Check out the docs on this release candidate and also note that this included updated React and Redux templates as well!

非常幹淨和直接。 不确定Date.Now，但是在大多數情況下，我了解了這一點，并且可以看到如何擴充它。 檢視有關此發行候選版本的文檔，還請注意，該文檔還包括更新的React和Redux模闆！

Sponsor: Scale your Python for big data & big science with Intel® Distribution for Python. Near-native code speed. Use with NumPy, SciPy & scikit-learn. Get it Today!

贊助商：借助适用于Python的英特爾®發行版，将Python擴充到大資料和大科學領域。 接近本機的代碼速度。 與NumPy，SciPy和scikit-learn一起使用。 立即擷取！

翻譯自: https://www.hanselman.com/blog/aspnet-single-page-applications-angular-release-candidate

angular單頁應用