Angular: Tạo mới một component

Một trong những ý tưởng lớn đằng sau Angular là ý tưởng về các component.
Trong các ứng dụng Angular, chúng ta viết các đoạn mã HTML để tạo ứng dụng tương tác với client, nhưng trình duyệt chỉ hiểu rất nhiều thẻ đánh dấu; Tất cả các phần dựng sẵn như <select>, <form> hoặc <video>… Các chức năng đó được xác định bởi trình duyệt.
Điều gì xảy ra nếu chúng ta muốn dạy cho trình duyệt các thẻ mới? Điều gì xảy ra nếu chúng ta muốn có một thẻ <Weather>.

Quay lại 1 chút về AngularJs, chúng ta có thể dạy trình duyệt các thẻ mới bằng cách sử dụng directive.
Và component cũng tương tự như directive, nhưng có nhiều tính năng hay hơn.

$ ng generate component value

Thư mục project sẽ được cập nhật folder value. File app.module.ts sẽ được thêm 2 dòng:

• import ValueComponent
• NgModule: khai báo thêm ValueComponent

1 component đơn giản sẽ bao gồm 2 thành phần:

• A component annotation
• A component define class

Mở file typescript value.component.ts, bạn sẽ thấy đoạn mã như sau:

Importing Dependency

Chúng ta import Components từ module “@angular/core”. Hiểu đơn giản, đây là cách khai báo để báo cho compiler biết rằng chúng ta định nghĩa và sử dụng 2 đối tượng Javascript/TypeScripts tên Component và OnInit trong component “value”

Component Annotations

Sau đoạn import Component, chúng ta có đoạn code:

@Component({
  selector: 'app-value',
  templateUrl: './value.component.html',
  styleUrls: ['./value.component.css']
})

Selector: định nghĩa tên component. Để sử dụng component value, bạn dùng thẻ <app-value> và chèn vào vị trí mà bạn muốn nó xuất hiện.
templateUrl: đường dẫn tới file template dùng cho Component. Nếu bạn dùng template dạng inline thì thay thế templateUrl bằng template
VD:

Chú ý là bạn sử dụng dâu ` thay vì dấu ‘
styleUrls: css dùng cho componenet. Bạn tìm hiểu them định nghĩa về “style-encapsulation” nha.

Loading Component

Để hiển thị component, bạn mở file /app/app.component.html, them đoạn code sau:

<h1>
  {{title}}
</h1>
<app-value></app-value>

Và kết quả:

Http

 Khi thực hiện các request ra bên ngoài server, chúng ta sẽ bắt gặp trường hợp trang web bị đóng băng cho tới khi Http request được trả về.
Để giải quyết tình trạng này chúng ta sẽ sử dụng khái niệm Asynchronous code. Trong Javascript, có 3 cách tiếp cận:

1. Callbacks
2. Promises
3. Observables

Đối với Angular, phương pháp được khuyến khích là sử dụng Observables.
Để gọi các API bên ngoài, Angular cung cấp thư viện HttpClientModule.

Ví dụ 1 request cơ bản

Gồm có các bước:

1. Chuẩn bị Backend server, khi thực hiện request, trả về data.
2. Client: Tạo trang web gọi ajax hoặc button để gọi request.
3. Method getValue sẽ gọi thư viện HttpClient để thực hiện request
4. Sau khi request trả về, chúng ta sẽ update data.

Tạo project Web API với ValuesController:

[Route("api/[controller]")]
[Authorize]
[ApiController]
public class ValuesController : ControllerBase
{
 private readonly DataContext _context;
 public ValuesController(DataContext context)
 {
  _context = context;
 }
 // GET api/values
 [AllowAnonymous]
 [HttpGet]
 public async Task<IActionResult> Get()
 {
  var values = await _context.Values.ToListAsync();   
  return Ok(values);
 }

 // GET api/values/5
 [HttpGet("{id}")]
 public async Task<IActionResult> Get(int id)
 {
  var value = await _context.Values.FirstOrDefaultAsync(t=>t.Id == id);
  return Ok(value);
 }

 // POST api/values
 [HttpPost]
 public void Post([FromBody] string value)
 {
 }

 // PUT api/values/5
 [HttpPut("{id}")]
 public void Put(int id, [FromBody] string value)
 {
 }

 // DELETE api/values/5
 [HttpDelete("{id}")]
 public void Delete(int id)
 {
 }
}

Thực hiện GET request, bạn sẽ có kết quả như sau:

HTTP đã được chia thành một module riêng biệt ở Angular 2. Để sử dụng HTTP, bạn cần phải import các contants từ @angular/http.
Ví dụ: chúng ta có thể nhập contants từ @angular/http:

import {
 // The NgModule for using @angular/common/http
 HttpClientModule,

 // the class constants
 HttpClient
} from '@angular/common/http';

Chúng ta sẽ có file app.module.ts như sau:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ValueComponent } from './value/value.component';
import { HttpClientModule } from '@angular/common/http';//add code here

@NgModule({
  declarations: [
    AppComponent,
    ValueComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule////add code here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Mở file value.component.ts, khai báo HttpClient.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';//add code here

@Component({
  selector: 'app-value',
  templateUrl: './value.component.html',
  styleUrls: ['./value.component.css']
})
export class ValueComponent implements OnInit {
  constructor(private http: HttpClient) { }//add code here

  ngOnInit() {
  }
}

private http: HttpClient: tương đương với khai báo biến private tầm vực Class trong C#
import …: tương đương khai báo namespace trong C#
Khai báo biến values, sau đó thêm hàm getValues() để thực hiện lấy data từ ValuesController

export class ValueComponent implements OnInit {
  values: any;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getValue();
  }

  getValue(): void {
    this.http.get('http://localhost:60112/api/values').subscribe(response => {
      this.values = response;
    }, error => {
      console.log(error);
    });
  }
}

Hàm subscribe: được dùng để nhận data trả về từ HttpRequest.
Thêm đoạn code sau vào file value.component.html:

<p>
  value works!
</p>

<p *ngFor="let value of values">
  {{value.id}} {{value.name}}
</p>

Kiểm tra kết quả:
 
Chúc các bạn thành công