Buzz
ASP.NET Core là một framework mã nguồn mở mới và đa nền tảng, được thiết kế để xây dựng ứng dụng kết nối đám mây, bao gồm cả ứng dụng web cho di động và nhiều hơn nữa. Hãy cùng khám phá ASP.NET Core và Angular 4 qua WEB API.
Đảm bảo bạn đã cài đặt các phần mềm sau trên máy tính của mình để bắt đầu hành trình làm quen với ASP.NET Core một cách suôn sẻ nhất.
1. Bắt đầu bằng việc tải và cài đặt Visual Studio 2017 trên máy tính của bạn tại đây: Tải về Visual Studio 2017
2. Sau đó, tải và cài đặt .NET Core 1.0.1 tại đây: Tải về .NET Core 1.0.1
3. Tiếp theo, cài đặt Node.js v4.0 hoặc phiên bản mới hơn tại đây: Tải về Node.js
4. Lựa chọn khối lượng công việc phù hợp với nhu cầu của bạn và tiến hành cài đặt Visual Studio 2017 trên máy tính của bạn. Nếu đã cài đặt Visual Studio 2017, bạn có thể bỏ qua bước này.
Sau khi hoàn thành quá trình cài đặt, hãy mở Visual Studio 2017 để bắt đầu tạo ứng dụng ASP.NET Core và Angular v4 của bạn.
Bước tiếp theo để làm quen với ASP.NET Core và Angular 4 thông qua WEB API là tạo những dự án đầu tiên với ASP.NET Core.
Bước 1: Tạo dự án ASP.NET Core
Sau khi đã cài đặt xong các yêu cầu tiền quyết trên, trên màn hình desktop, hãy chọn Start => Programs => Visual Studio 2017 => Visual Studio 2017.
Click vào New => Project. Chọn Web => ASP.NET Core Web Application. Nhập tên cho dự án của bạn, sau đó click vào OK.
Chọn Project Empty và nhấn OK. Nếu đã cài đặt ASP.NET Core 2.0, bạn có thể chọn ASP.NET Core 2.0.
Sau khi tạo xong ứng dụng ASP.NET Core Angular 2, đợi vài giây, bạn sẽ thấy dự án trống được tạo thành công.
Bước 2: Bật chức năng MVC và StaticFiles
Sau khi tạo dự án trống ở bước trước, bước kế tiếp là kích hoạt dự án để làm việc với WEB API và chạy các file HTML. Để hiển thị kết quả Angular, bạn cần kích hoạt các file tĩnh.
Để thực hiện điều này, chuột phải vào dự án, chọn Edit (tên dự án của bạn).csproj.
Tại đây, bạn sẽ thấy tệp .csproj mở để chỉnh sửa.
Tiếp theo, thêm 2 đoạn mã sau để kích hoạt các Gói MVC và StaticFile tương ứng trong dự án của bạn.
Bây giờ, đoạn mã sẽ có dạng như sau:
Lưu lại tệp .csproj. Sau khi hoàn tất, các phần mở rộng sẽ được cài đặt trong dự án của bạn để làm việc với Web API.
Bước 3: Sửa đổi tệp Startup.cs
Mở tệp Startup.cs đầu tiên.
Sau đó, trong tệp Startup.cs, thêm dịch vụ MVC. Đồng thời, thiết lập các giá trị mặc định và mở rộng trang HTML như sau:
public void ConfigureServices(IServiceCollection services)
{
services.ThemMvc();
}
// Phương thức này được gọi bởi runtime. Sử dụng phương thức này để cấu hình đường ống yêu cầu HTTP.
public void CauHinh(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
app.SuDung(async (context, next) => {
await next();
nếu (context.Response.StatusCode == 404 &&
!Path.HasExtension(context.Request.Path.Value) &&
!context.Request.Path.Value.StartsWith('/api/'))
{
context.Request.Path = './src/index.html';
await next();
}
});
app.UseMvcWithDefaultRoute();
app.UseDefaultFiles();
app.UseStaticFiles();
}
Bước 4: Tạo Web API
Để tạo WEB API Controller, hãy chuột phải vào thư mục project, sau đó chọn Add =>New Item.
Chọn ASP.NET Core =>Web API Controller class và sau đó nhấn Add.
Như bạn đã biết, Web API là một cách đơn giản để xây dựng các Dịch vụ HTTP cho trình duyệt và điện thoại di động.
Web API cung cấp 4 phương thức quan trọng sau: Get, Post, Put, và Delete.
- Phương thức Get dùng để yêu cầu dữ liệu. (lựa chọn)
- Phương thức Post dùng để tạo mới một dữ liệu. (chèn)
- Phương thức Put sử dụng để cập nhật dữ liệu.
- Phương thức Delete được sử dụng để xóa dữ liệu.
Trong ví dụ dưới đây, chúng tôi sử dụng phương thức Get, do đó, bạn có thể loại bỏ tất cả các phương thức khác bao gồm PUT, POST và Delete từ Controller class. Trong phương thức Get, chúng tôi trả về một chuỗi giá trị như sau:
Controller class của Web API đã được chỉnh sửa và có dạng như sau:
[Route('api/[controller]')]
public class ValuesController : Controller
{
// Lấy dữ liệu: api/values
[HttpGet]
public IEnumerable
{
return new string[] { 'Afraz', 'Afreen', 'ASHA', 'KATHER', 'Shanu' };
}
}
}
Để kiểm tra phương thức Get, hãy chạy project của bạn và sao chép đường dẫn API. Ở đây, bạn có thể thấy đường dẫn API cho phương thức Get là “api/ giaTri”.
Chạy chương trình và dán đường dẫn API trên để kiểm tra đầu ra.
Bước 5: Tiếp tục với Angular
Bước kế tiếp là thao tác với Angular. Trước hết, bạn cần cài đặt Angular CLI cho dự án của mình.
Angular CLI
Angular CLI là một công cụ dòng lệnh giúp xây dựng ứng dụng Angular sử dụng module theo kiểu node.js (commonJS).
Để cài đặt Angular CLI cho dự án của bạn, mở Command Prompt của Visual Studio và điều hướng đến thư mục của dự án.
Bước tiếp theo là di chuyển đến đường dẫn của thư mục dự án. Nếu bạn không biết đường dẫn chính xác của dự án, hãy nhấp chuột phải vào Project và xem thuộc tính để kiểm tra đường dẫn dự án.
Sao chép đường dẫn thư mục của dự án. Trong ví dụ này, bạn có thể thấy rằng dự án nằm trong ổ đĩa G:. Đầu tiên, hãy chuyển đến ổ đĩa G:, sau đó chuyển đến thư mục của dự án.
Sau đó, bạn có thể cài đặt Angular CLI cho dự án của mình. Để làm điều này, hãy chạy lệnh dưới đây:
npm install @angular/cli -g
Đợi một vài giây để Angular CLI cài đặt vào dự án của bạn.
Bây giờ bạn chạy lệnh dưới đây và đợi vài giây. Tất cả các tệp Angular sẽ được thêm vào dự án:
ng new ASPNETCOREDEMO --skip-install
Chú ý rằng trong lệnh trên, thay thế ASPNETCOREDEMO bằng tên của dự án của bạn.
Chờ một vài giây cho đến khi hiển thị thông báo thành công như bên dưới.
Trong dự án, một thư mục mới sẽ được tạo và có cùng tên với dự án.
Mở thư mục đó và bạn có thể thấy tất cả các tệp Angular đã được tạo nằm bên trong thư mục.
Chuyển toàn bộ các tệp vào dự án chính.
Sau khi di chuyển tất cả các tệp vào dự án chính, hãy xóa thư mục trống.
Bước 6: Làm việc với các tệp Angular
Làm việc với Angular Module
Vì cần phải hiển thị kết quả từ Web API trong ứng dụng Angular, bạn sẽ nhập HTTP Module trong file app.module.
Mở file app.module.
Thay đổi bằng đoạn mã dưới đây:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Làm việc với Angular Component
Bước tiếp theo bây giờ là làm việc với Angular Component để liên kết với Web API và nhận kết quả JSON để liên kết với fil HTML.
Mở file Angular Component và thêm đoạn code dưới đây vào:
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) { }
title: string = 'SHANU';
apiValues: string[] = [];
ngOnInit() {
this._httpService.get('/api/values').subscribe(values => {
this.apiValues = values.json() as string[];
});
}
}
Làm việc với file HTML
Đây là bước cuối cùng của phần mã nguồn. Thiết kế HTML và liên kết kết quả từ Angular đến file app.component.html.
Chỉnh sửa file HMTL và thay đổi bằng đoạn code dưới đây:
Bước 7: Xây dựng và chạy ứng dụng
Trước tiên bạn cần phải cài đặt tất cả các yếu tố phụ thuộc Angular cho ứng dụng. Để cài đặt, bạn chạy lệnh bên dưới đây trong command prompt:
npm install
Đợi cho đến khi quá trình cài đặt NPM hoàn tất.
Xây dựng ứng dụng
Chạy lệnh dưới đây để xây dựng ứng dụng:
ng build
Chờ một vài giây cho đến khi quá trình xây dựng ứng dụng hoàn tất.
Chạy ứng dụng
Nhập lệnh dưới đây và nhấn Enter để chạy ứng dụng:
dotnet run
Chạy ứng dụng và truy cập địa chỉ localhost hiển thị trình duyệt để xem kết quả ứng dụng Angular.
Mytour hy vọng rằng bạn đã có cơ hội làm quen với ASP.NET Core và Angular 4 thông qua WEB API. Nếu có thắc mắc hoặc cần hỗ trợ, hãy chia sẻ ý kiến của bạn trong phần bình luận dưới bài viết. Chúc bạn thành công!
