9 Ağustos 2017

ASP.NET Core Web Api ile Angular 4 Projesi Oluşturma


Ön Gereksinimler

  • Node.js 
  • Net Core 
  • Visual Studio Code
kurulu olmalıdır.

1. Proje Oluşturma

Linux'ta "terminal", Windows'ta "komut satırı" açalım.

1.Projemiz için bir klasör oluşturalım.

mkdir projem

2. Projenin içine girelim

cd projem

3. Boş ASP.NET Core projesi açalım.

dotnet new webapi

4. Visul Studio Code ile projeyi açalım.

 code .

5.Visual Studio Code ile .csproj dosyasını açalım ve typescript hatalarını kapatmak için özelliği property group içerisine ekleyelim

 <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

ve wwwroot gibi klasörlerin içerisindeki dosyaları kullanabilmek için

<PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="*"/>

Varsa aşağıdaki alanı silelim.  Çünkü StaticFiles paketini kullandığımız için aşağıdaki özelliğe gerek kalmayacak.

<ItemGroup>
<Folder Include="wwwroot\" />
</ItemGroup>

komutunu ekleyelim  .csproj aşağıdaki gibi olacaktır.

<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>
<TargetFramework>netcoreapp1.1</TargetFramework>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
</PropertyGroup>

<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore" Version="1.1.2" />
<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.3" />
<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.2" />
<PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="*"/>
</ItemGroup>

</Project>

6.Startup.cs içerisinde Configure metodunun içerisi aşağıdaki gibi değiştirelim.

app.Use(async (context, next) => {
await next();
if (context.Response.StatusCode == 404 &&
!Path.HasExtension(context.Request.Path.Value) &&
!context.Request.Path.Value.StartsWith("/api/")) {
context.Request.Path = "/index.html";
await next();
}
});
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseMvcWithDefaultRoute();

7. Komut satırından eksik paketleri kurmak için aşağıdaki komutu çalıştırın

 dotnet restore 

8. Projeyi build etmek için aşağıdaki komutu kullanın


dotnet build

9. Projeyi çalıştırmak için aşağıdaki komutu kullanın

dotnet run


http://localhost:5000/api/values adresine girip çalışıp çalışmadığını kontrol edebiliriz. 

Angular Projesi Oluşturmak 

1. Öncelikle angular 4 kurmamız gerekiyor. Angular 4 ü global kurmak için aşağıdaki satırı komut satırında çalıştıralım.
npm install @angular/cli --global

2. Projenin klasörüne girerek angular ı projemize dahil edelim. 
ng new gecicKlasor --skip-install
Yukarıdaki komuttan sonra angular dosyaları proje klasörü içerisinde geciciKlasor adında bir klasörün içinde oluyor. Bu klasörün içindeki herşeyi proje klasörüne çıkarıp geçiciKlasor ü silelim. Son hali aşağıdaki resimdeki gibi olacaktır.

3. src/app/app.module.ts içerisne Http ve Forms modüllerini ekleyelim.

import { FormsModule } from '@angular/forms';
import {HttpModule} from '@angular/http';


imports: [
BrowserModule,
FormsModule,
HttpModule
],



4. .angular-cli.json dosyasını açın ve  "outDir":"wwwroot" olarak seçin. Böylece angular build edildiğinde web api nin statik dosylarıyla aynı klasöre çıkmış olacak.

"outDir": "wwwroot",

5. Angular içerisinde web servisi çağıralım. Bunun için "src/app/app.component.ts" dosyasını açarak aşağıdaki gibi web servisi çağıralım.

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private _httpService:Http){}

apiValues:string[] = [];

ngOnInit(){
this._httpService.get('/api/values').subscribe(values=>{
this.apiValues = values.json() as string[];
});

}
}


Ve "src/app/app.component.html" dosyasını aşağıdaki gibi değiştirelim.

<h1>Web Api den gelen yanıt</h1>
<ul *ngFor="let value of apiValues">
<li>{{value}}</li>
</ul>

6. Şimdi angular içerisindeki eksik paketleri kuralım ve build edelim. Bunun için komut satırında projenin olduğu klasöre girerek aşağıdaki komutları yazalım.

npm install

ile eksik paketler kuruluyor

ng build

ile angular build ediliyor.


Artık projemiz hazır komut satırından

dotnet run

yazarak projeyi çalıştıralım. Ve localhost:5000 i tarayıcıdan açalım.

Sonuç olarak tarayıcı da şağıdaki ekranı görmeniz gerekiyor.



Geliştirirken Kolaylık Sağlayan Yöntemler

Normalde yukarıdaki gibi kullanmak istersek her değişiklik için angular ve dotnet projesini build etmemiz gerekiyor. Aşağıdaki işlemleri yaparak her yeni değişiklikte proje kendi kendini build edip tekrar çalışacaktır.

1. Angular ile yapılan değişiklikleri canlı görmek için ng serve komutunu kullanmalıyız ve burada tarayıcıdan localhost:4200 varsayılan olarak kullanılıyor. API nin çalıştığı port 5000 olmasına rağmen varsayılan modda localhost:4200/api yolunu proje kontrol edecekt. Bunu 5000 portu yapmak için proje klasörü içerisinde "proxy.config.json" dosyasını oluşturalım. Ve içerisini aşağıdaki gibi yazalım.

{
"/api": {
"target": "http://localhost:5000",
"secure": false
}
}


2. ASP.NET Core için otomatik derlemeyi aktif etmek için "Microsoft.DotNet.Watcher.Tools" paketini projeye eklemeliyiz. Bunun için .csproj içerisine paketi aşağıdaki gibi ekleyeceğiz.


<ItemGroup>
<DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="1.0.0" />
</ItemGroup>



.csproj son hali aşağıdaki gibidir.


<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>
<TargetFramework>netcoreapp1.1</TargetFramework>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
</PropertyGroup>

<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore" Version="1.1.2" />
<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.3" />
<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.2" />
<PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="*"/>
</ItemGroup>

<ItemGroup>
<DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="1.0.0" />
</ItemGroup>

</Project>


Daha sonra yeni eklediğimiz paket için komut satırı üzerinden "dotnet restore" komutunu yazalım.

3. Angular ve ASP.NET Core uygulamalarını izleme modunda açalım.

ASP.NET Core için

dotnet watch run

Angular için ayrı bir komut satırında

ng serve --proxy-config proxy.config.json

yazarak projeyi başlatalım.


Artık tarayıcıda localhost:4200 ü kullanacağız. Ve birisinde yaptığımız değişiklik otomatik olarak ekrana yansıyacak. Burada dotnet build ettiği çok kısa gecikme olabilir.

Şimdi test edersek

Projede "Controllers/ValuesControllers.cs" içerisinde Get metodunu aşağıdaki gibi değiştirip kaydedelim.

// GET api/values
[HttpGet]
public IEnumerable<string> Get()
{
return new string[] { "value1" };
}

"src/app/app.component.html"  dosyasının içeriğini aşağıdaki gibi değiştirelim ve kaydedelim.

<h1>Bu alan değiştirildi</h1>
<ul *ngFor="let value of apiValues">
<li>{{value}}</li>
</ul>

Tekrar localhost:4200 e baktığımızda aşağıdaki gibi değişikliklerin ekrana yansıdığını göreceğiz.



Kaynak : How to build an Angular Application with ASP.NET Core in Visual Studio 2017, visualized
Gönderen zaman: