Làm quen với ASP.NET Core và Angular 4 thông qua WEB API

Có thể bạn đã biết Web API là công nghệ mới nhất của Microsoft để xây dựng các dịch vụ thành phần phân tán. Trong bài viết này Taimienphi.vn sẽ giới thiệu cho bạn làm quen với ASP.NET Core và Angular 4 thông qua WEB API.

ASP.NET Core là mã nguồn mở mới và framework đa nền tảng (cross-platform) cho việc xây dựng những ứng dụng dựa trên kết nối đám mây, giống như web app cho mobile, … . Cùng làm quen với ASP.NET Core và Angular 4 thông qua WEB API.

lam quen voi asp net core va angular 4 thong qua web api

Hãy đảm bảo rằng bạn đã cài đặt những phần mềm dưới đây trên máy tính của mình để có thể làm quen với ASP.NET Core một cách tốt nhất.

1. Đầu tiên, tải và cài đặt Visual Studio 2017 trên máy tính của bạn tại đây : Download Visual Studio 2017

2. Tải và cài đặt .NET Core 1.0.1 tại đây : Download .NET Core 1.0.1

3. Tải và cài đặt Node.js v4.0 hoặc các phiên bản cao hơn tại đây : Download Node.js

lam quen voi asp net core va angular 4 thong qua web api 2

Lựa chọn khối lượng công việc tùy thuộc vào nhu cầu của bạn và cài đặt Visual Studio 2017 trên máy tính. Nếu đã cài đặt Visual Studio 2017, bạn có thể bỏ qua phần này.

lam quen voi asp net core va angular 4 thong qua web api 3

Sau khi cài đặt xong, bạn có thể mở Visual Studio 2017 để tạo ứng dụng ASP.NET Core và Angular v4.

lam quen voi asp net core va angular 4 thong qua web api 4

Bước tiếp theo để làm quen với ASP.NET Core và Angular 4 thông qua WEB API là bạn cần phải tạo những project đầu tiên với ASP.NET Core

Bước 1: Tạo project ASP.NET Core

Sau khi cài đặt xong các điều kiện tiên quyết ở trên, trên màn hình desktop bạn click chọn Start =>Programs =>Visual Studio 2017 =>Visual Studio 2017.

Click chọn New =>Project. Select Web =>ASP.NET Core Web Application. Nhập tên project của bạn rồi click chọn OK.

lam quen voi asp net core va angular 4 thong qua web api 5

Chọn Project Empty rồi click chọn OK. Nếu cài đặt ASP.NET Core 2.0, bạn có thể chọn ASP.NET Core 2.0.

lam quen voi asp net core va angular 4 thong qua web api 6

Sau khi tạo xong ứng dụng ASP.NET Core Angular 2, chờ khoảng vài giây và bạn sẽ nhìn thấy project trống được tạo thành công.

lam quen voi asp net core va angular 4 thong qua web api 7

Bước 2: Kích hoạt MVC và StaticFiles

Ở bước trên bạn vừa tạo project trống, bước tiếp theo cần làm bây giờ là kích hoạt project 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.

Để làm được điều này, kích chuột phải vào project, chọn Edit (tên project của bạn).csproj.

lam quen voi asp net core va angular 4 thong qua web api 8

Lúc này bạn có thể nhìn thấy file .csproj được mở để chỉnh sửa.

lam quen voi asp net core va angular 4 thong qua web api 9

Tiếp theo thêm 2 đoạn code dưới đây vào để kích hoạt MVC và StaticFile Packages tương ứng trong project của bạn.

1.  
2.  

Lúc này đoạn code có dạng như dưới đây:

lam quen voi asp net core va angular 4 thong qua web api 10

Lưu file .csproj lại. Sau khi hoàn tất, các yếu tố phụ thuộc sẽ được cài đặt trong project của bạn để làm việc với Web API.

Bước 3: Chỉnh sửa file Startup.cs

Đầu tiên mở file Startup.cs.

lam quen voi asp net core va angular 4 thong qua web api 11

Tiếp theo trong file Startup.cs, bạn thêm MVC Service. Ngoài ra thiết lập giá trị như mặc định và mở trang HTML như dưới đây:

public void ConfigureServices(IServiceCollection services)

{

services.AddMvc();

}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)

{

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 = "./src/index.html";

await next();

}

});

app.UseMvcWithDefaultRoute();

app.UseDefaultFiles();

app.UseStaticFiles();

}

Bước 4: Tạo Web API

Để tạo WEB API Controller, bạn kích chuột phải vào thư mục project, sau đó click chọn Add =>New Item.

lam quen voi asp net core va angular 4 thong qua web api 12

Chọn ASP.NET Core =>Web API Controller class rồi click chọn Add.

lam quen voi asp net core va angular 4 thong qua web api 13

Như bạn đã biết Web API là một cách đơn giản để xây dựng HTTP Services cho trình duyệt và điện thoại di động.

Web API sinh ra 4 phương thức dưới đây: Get, Post, Put, và Delete.

- Get là yêu cầu dữ liệu. (lựa chọn)

- Post là tạo ra một dữ liệu. (chèn)

- Put là cập nhật dữ liệu.

- Delete là xóa dữ liệu.

Trong ví dụ dưới đây sử dụng phương thức Get vì vậy bạn có thể xóa tất cả các phương thức khác bao gồm PUT, POST, và Delete trong Controller class và trong phương thức Get, trả về chuỗi giá trị như dưới đây.

Web API Controller class đã được chỉnh sửa có dạng như dưới đây:

[Route("api/[controller]")]

public class ValuesController : Controller

{

// GET: api/values

[HttpGet]

public IEnumerable Get()

{

return new string[] { "Afraz", "Afreen", "ASHA", "KATHER", "Shanu" };

}

}

}

Để kiểm tra phương thức Get, bạn có thể chạy project của mình và copy đường dẫn API. Tại đây, bạn có thể nhìn thấy đường dẫn API cho phương thức Get là “api/ values”.

Chạy chương trình và dán đường dẫn API ở trên để kiểm tra đầu ra.

lam quen voi asp net core va angular 4 thong qua web api 14

Bước 5: Làm việc với Angular

Bước tiếp theo là làm việc với Angular. Đầu tiên bạn phải cài đặt Angular CLI cho project.

Angular CLI

Angular CLI là giao diện dòng lệnh để xây dựng các ứng dụng Angular sử dụng module node.js style (commonJS).

Để cài đặt Angular CLI cho project của bạn, mở Visual Studio Command Prompt và di chuyển đến đường dẫn thư mục project.

lam quen voi asp net core va angular 4 thong qua web api 15

Bước tiếp theo bây giờ là di chuyển đến đường dẫn thư mục project. Nếu không biết chắc chắn đường dẫn project, bạn click chọn Project và xem các thuộc tính để kiểm tra đường dẫn project.

lam quen voi asp net core va angular 4 thong qua web api 16

Sao chép đường dẫn thư mục project. Trong ví dụ này bạn có thể thấy project nằm trong ổ G:. Đầu tiên thay đổi ổ G:, sau đó thay đổi thư mục project.

lam quen voi asp net core va angular 4 thong qua web api 17

Tiếp theo cài đặt Angular CLI cho project của bạn. Để cài đặt Angular CLI, bạn chạy lệnh bên dưới đây:

npm install @angular/cli -global

lam quen voi asp net core va angular 4 thong qua web api 18

Chờ khoảng một vài giây để Angular CLI cài đặt trong project của bạn.

lam quen voi asp net core va angular 4 thong qua web api 19

Lúc này bạn chạy lệnh bên dưới đây và chờ vài giây. Tất cả các file Angular sẽ được thêm vào project:

ng new ASPNETCOREDEMO --skip-install

Lưu ý trong lệnh trên thay thế ASPNETCOREDEMO bằng tên project của bạn.

lam quen voi asp net core va angular 4 thong qua web api 20

Chờ vài giây cho đến khi hiển thị thông báo thành công như dưới đây.

lam quen voi asp net core va angular 4 thong qua web api 21

Trong project, một thư mục mới sẽ được tạo và có cùng tên với project.

lam quen voi asp net core va angular 4 thong qua web api 22

Mở thư mục đó lên và bạn có thể nhìn thấy tất cả các file Angular đã được tạo nằm bên trong thư mục.

lam quen voi asp net core va angular 4 thong qua web api 23

lam quen voi asp net core va angular 4 thong qua web api 24

Di chuyển tất cả các file vào project chính.

lam quen voi asp net core va angular 4 thong qua web api 25

Sau khi di chuyển tất cả các file vào project chính, tiến hành xóa thư mục trống đi.

Bước 6: Làm việc với các file Angular

Làm việc với Angular Module

Vì phải cần hiển thị kết quả Web API trong ứng dụng Angular nên bạn sẽ phải nhập HTTPmodul trong file app.module.

Mở file app.module.

lam quen voi asp net core va angular 4 thong qua web api 26

Thay đổi bằng đoạn code 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 { HttpModule } from '@angular/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 code. 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:

 

<>1>#285783">Welcome to {{title}} Angular and ASP.NET Core  Demo  

 
 
 
 
   
 
 
 
  >
 
span style="font-size:14px;">   
 
     
 
    /span>
 
 
 
 
<>&ble cellpadding="2" cellspacing="2" class="table" ngif="apiValues" sty&le="background-color:#FFFFFF; border:2px #6D7B8D; padding:5px;width:99%;table-layout:fixed;">Names 
        {{value}}  
     
 

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

lam quen voi asp net core va angular 4 thong qua web api 27

Chờ cho đến khi quá trình cài đặt NPM hoàn tất.

lam quen voi asp net core va angular 4 thong qua web api 28

Xây dựng ứng dụng

Chạy lệnh dưới đây để xây dựng ứng dụng:

ng build

Chờ khoảng vài giây cho đến khi quá trình xây dựng ứng dụng hoàn tất.

lam quen voi asp net core va angular 4 thong qua web api 29

Chạy ứng dụng

Nhập lệnh dưới đây rồi nhấn Enter để chạy ứng dụng:

dotnet run

lam quen voi asp net core va angular 4 thong qua web api 30

Bạn có thể nhìn thấy địa chỉ localhost để chạy ứng dụng. Nhập địa chỉ đó vào trình duyệt. Ứng dụng Angular đang chạy và hiển thị kết quả mong muốn.

lam quen voi asp net core va angular 4 thong qua web api 31

https://thuthuat.taimienphi.vn/lam-quen-voi-asp-net-core-va-angular-4-thong-qua-web-api-27601n.aspx
Trên đây Taimienphi.vn vừa giới thiệu cho bạn làm quen với ASP.NET Core và Angular 4 thông qua WEB API. Hy vọng bài viết này sẽ hữu ích với bạn. Nếu có thắc mắc gì cần giải đáp bạn có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé.

Tác giả: Nguyễn Thuý Thanh     (4.0★- 16 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Chrome thử nghiệm API Picture-in-Picture để hiển thị video thu nhỏ bên ngoài trình duyệt
Chrome 102 ra mắt, mang theo lớp phủ kiểm soát cửa sổ PWA
Sự khác nhau giữa PowerShell và PowerShell Core
Hiểu rõ về Chip Core i3, i5, i7
RESTful API trong Node.js là gì?
Từ khoá liên quan:

Làm quen với ASP.NET Core và Angular 4 thông qua WEB API

, làm quen với ASP.NET Core và Angular 4, WEB API,

SOFT LIÊN QUAN
  • Core FTP Pro

    Quản lý trang web thông qua FTP

    Core FTP Pro là một chương trình nhỏ gọn đem đến cho người sử dụng những công cụ đắc lực trong việc quản lý các trang web thông qua FTP cũng tải các tài liệu trên FTP được an toàn và nhanh chóng.

Tin Mới

  • Cách tải và chơi Brain Puzzle King trên điện thoại

    Nếu bạn muốn trải nghiệm sự hòa quyện giữa gameplay hack não và đồ họa đẹp mắt, hãy tải và chơi Brain Puzzle King trên điện thoại. Cải thiện khả năng tư duy và rèn luyện kỹ năng quan sát của bạn trong khi giải trí là

  • Cách làm game trên Scratch 3.0 chi tiết nhất

    Làm game trên Scratch 3.0 là cơ hội tuyệt vời để học hỏi và phát triển kỹ năng lập trình của mình. Bằng cách tạo và chia sẻ trò chơi trên Scratch 3.0, bạn có thể kết nối và học hỏi từ cộng đồng lập trình toàn cầu, từ các dự án khác và từ phản hồi của người chơi. Vậy cách làm game bằng Scratch 3.0 có đơn giản như đồn đoán, cùng tìm hiểu nhé.

  • Cách chơi Supermarket Simulator tăng doanh thu lợi nhuận

    Chơi Supermarket Simulator thông minh là khi người chơi biết áp dụng các mẹo chơi hữu ích vào việc phát triển siêu thị. Hãy để Tải Miễn Phí chỉ cho bạn một vài cách chơi Supermarket Simulator tăng doanh thu lợi nhuận giúp bạn đạt được thành công trong thế giới kinh doanh ảo nhanh chóng hơn bao giờ hết.

  • Cách chơi Đấu trường thú, Bloody Roar 2 trên máy tính PC

    Đấu trường thú, bloody roar 2 là trò chơi điện tử 3D trong series Đấu trường thú, bloody roar, tựa game được khá nhiều người yêu thích hiện nay. Bài viết này, Taimienphi.vn sẽ hướng dẫn bạn cách chơi Đấu trường thú bloody roar 2, cụ thể là chế độ 2 người. Hãy đọc, tìm hiểu để nắm được các nút, phím di chuyển, đánh và hóa thân vào câu chuyện của các nhân vật trong tựa game này bạn nhé!