ASP.NET CoreでAngularをする下準備

2017/03/05 日時点の情報です

@angular/cliとか使って始めるのもいいですが、これだとサーバーサイド何でつくるの？？という感じになってしまうので、C#erとしては今やるならASP.NET Coreでしょ！ということで始め方をメモっておきます。

結論としてはdotnetコマンドで作れます。ということで最新の.NET Core SDK 1.1のRC4を以下のページからダウンロードしてきました。

github.com

インストールしてdotnet --infoと打ち込むと以下のように表示されます。

PS C:\Users\kaota\Documents\Visual Studio Code\Projects> dotnet --info
.NET Command Line Tools (1.0.0-rc4-004771)

Product Information:
 Version:            1.0.0-rc4-004771
 Commit SHA-1 hash:  d881d45b75

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.14393
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\1.0.0-rc4-004771

次にAngularとかSPA関連のプロジェクトテンプレートをダウンロードします。以下のコマンドを打ち込みます。

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

しばらく待ってるとインストールが終わります。終わったらdotnet newと打ち込んでみましょう。以下のようにAngularとかのテンプレートがインストールされてることがわかります。（Vue.jsはないのね）

PS C:\Users\kaota\Documents\Visual Studio Code\Projects> dotnet new
Template Instantiation Commands for .NET Core CLI.

Usage: dotnet new [arguments] [options]

Arguments:
  template  The template to instantiate.

Options:
  -l|--list         List templates containing the specified name.
  -lang|--language  Specifies the language of the template to create
  -n|--name         The name for the output being created. If no name is specified, the name of the current directory is
 used.
  -o|--output       Location to place the generated output.
  -h|--help         Displays help for this command.
  -all|--show-all   Shows all templates


Templates                                     Short Name      Language      Tags
------------------------------------------------------------------------------------------
Console Application                           console         [C#], F#      Common/Console
Class library                                 classlib        [C#], F#      Common/Library
Unit Test Project                             mstest          [C#], F#      Test/MSTest
xUnit Test Project                            xunit           [C#], F#      Test/xUnit
Empty ASP.NET Core Web Application            web             [C#]          Web/Empty
MVC ASP.NET Core Web Application              mvc             [C#], F#      Web/MVC
MVC ASP.NET Core with Angular                 angular         [C#]          Web/MVC/SPA
MVC ASP.NET Core with Aurelia                 aurelia         [C#]          Web/MVC/SPA
MVC ASP.NET Core with Knockout.js             knockout        [C#]          Web/MVC/SPA
MVC ASP.NET Core with React.js                react           [C#]          Web/MVC/SPA
MVC ASP.NET Core with React.js and Redux      reactredux      [C#]          Web/MVC/SPA
Web API ASP.NET Core Web Application          webapi          [C#]          Web/WebAPI
Solution File                                 sln                           Solution

Examples:
    dotnet new mvc --auth None --framework netcoreapp1.0
    dotnet new classlib --framework netstandard1.4
    dotnet new --help

では、適当なフォルダ（ここではdotnet-angular-helloworldという名前にしました）を作って、そこでdotnet new angularをしてみましょう。

そして、npm installとdotnet restoreして必要なパッケージをダウンロードします。

最後にdotnet runで実行してみます。そして http://localhost:5000/ にアクセスしてみましょう。

以下のように、ちょっとハローワールド…？というくらい作りこまれたページが表示されます。

f:id:okazuki:20170305091636p:plain