Làm thử một app Angular - phần 01

Chào các bạn, hôm nay chúng ta sẽ cùng nhau học tutorial Tour Of Heroes của Angular nhé.

Link chính thức của tutorial ở đây: https://angular.io/tutorial

Trước khi vào bài thì mình xin lưu ý với các bạn là bài viết này sẽ dựa trên link tài liệu ở trên, mình chỉ cùng các bạn học tutorial này thôi. Bắt đầu thôi:

Chúng ta cùng xem sơ qua phần tutorial này sẽ làm những gì nhé:

1. "Tour of Heroes" chẳng qua là hiển thị danh sách các heroes được lấy từ server.
2. Có thể **thêm, sửa, xoá **các heroes trong danh sách trên.
3. App có thể navigate qua lại giữa các trang.
4. Mỗi lần thêm, sửa, xoá hay lấy dữ liệu từ server thì hiển thị message kiểu như: "Đã xoá Hero với id là 1", "Đã thêm Hero mới với tên là abc", "Đã lấy dữ liệu từ server", ...

Điều quan trọng chính là làm hoàn toàn bằng Angular nên tutorial này đáng để tìm hiểu.

Mục tiêu của phần này là gì?

1. Cài đặt Angular CLI.
2. Tạo mới và chạy thử app Angular vừa tạo.
3. Thử sửa vài chỗ coi thử chạy OK không.

Phần này là mục số 2 - The Application Shell trong trang chính thức nhé các bạn. Link: https://angular.io/tutorial/toh-pt0

Trước tiên chúng ta cần cài đặt "thứ" để tạo mới một app Angular, tương tự như với Ruby On Rails thì ta sử dụng cú pháp rails new your-app vậy.

Đối với Angular thì chúng ta sử dụng Angular CLI, giờ thì mở Terminal lên gõ vào dòng sau nhé:

npm install -g @angular/cli

Sau khi đợi cài xong thì chúng ta tạo một app mới với tên tuỳ thích, mình thì lấy tên là angular-report-viblo, tiếp tục gõ đoạn sau vào Terminal và đợi thôi:

ng new angular-report-viblo

Sau khi tạo xong thì chạy thử xem nó có hoạt động không rồi tính tiếp nào.

cd angular-report-viblo
ng serve

Rồi bật trình duyệt lên gõ http://localhost:4200 . Angular CLI đặt cổng 4200 làm mặc định, trong trường hợp muốn chuyển cổng thì chỉ cần gõ:

ng serve --port 3000

Xem kết quả nào:

Chạy được như này là ngon rồi, nếu mà bạn nào không chạy được thì vui lòng google nhé, tại mình tạo chưa bao giờ bị lỗi gì :v

Giờ thử sửa chút code xem thử nào, nhưng trước khi sửa thì cùng tìm hiểu xem Angular này có gì mới nhé.

Mở app lên và vào thư mục angular-report-viblo/src/app:

Các khái niệm về Component, Type Script, ... sẽ được đề cập ở các bài viết khác nha các bạn!

Giờ sửa code nào:

• Sửa title xem sao:

# src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Test title';
}

• Sửa code HTML lại luôn:

# src/app/app.component.html
<h1>{{title}}</h1>

• Tiện tay thêm chút CSS vào

/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

Xong, test thử xem nó chạy như nào rồi:

Có vẻ ngon rồi đó, các bạn có thể điều chỉnh tuỳ thích, có thể thêm biến và hiển thị nó ra tuỳ ý. Ví dụ thêm thử subTitle để hiển thị xem sao:

• Thêm subTitle vào trong app.component.ts

# src/app/app.component.ts

• Để hiển thị thì phải thêm nó vào view chứ nhỉ app.component.html

<h1>{{title}}</h1>
<h2>{{subTitle}}</h2>

Refresh lại trang rồi xem kết quả thôi

Rồi ngon rồi đó, tổng kết thử nãy giờ làm gì:

• Cài đặt thành công Angular CLI
• Biết cách tạo app Angular mới và chạy thử nó.
• Biết tạm tạm cấu trúc một Component trong Angular để thêm một chút code trong đó.

Mục tiêu của phần này là gì?

1. ÁD
2. 123

Phần này là phần số 3 ở trên tutorial chính thức nhé các bạn: https://angular.io/tutorial/toh-pt1

App này là app gì? App tạo ra danh sách các Heroes, vì vậy tạo Hero Component thôi :v

Tạo heroes component

Có thể sử dụng Angular CLI để tạo component mới bằng cú pháp ng generate component heroes nhưng mình nghĩ để dễ nắm bắt được cấu trúc của Angular thì nên tự tạo bằng tay. Ai thích thì tạo bằng cú pháp vừa nhắc cũng được.

Tạo bằng tay thì làm các bước như sau:

• Trong Angular thì mình thấy hay quy ước mỗi Component sẽ nằm trong một thư mục, vì vậy nên ta tạo thư mục heroes trước. Đường dẫn sau khi tạo như sau: src/app/heroes/
• Bên trong src/app/heroes/ tạo thêm 3 thành phần sau: heroes.component.ts, heroes.component.html, heroes.component.css .
• Thêm code bên trong src/app/heroes/heroes.component.ts để Angular biết nó là một Component:

import { Component } from '@angular/core';

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

export class HeroesComponent {  }

• Thêm ít HTML để coi thử nó chạy OK không: src/app/heroes.component.html

<h3>Test Heroes Component</h3>

• Ngang đây coi như xong phần tạo Component, tuy nhiên mình mới tạo thôi, chưa có nói cho Angular biết nó nằm đâu để sử dụng. Thêm nó vào src/app/app.module.ts liền:

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


import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';


@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• Thêm nó vào src/app/app.module.ts xong rồi mà nó vẫn chưa hiển thị, như này là đang thiếu chưa thêm vào view đó. Thêm vào view src/app/app.component.html:

<h1>{{title}}</h1>
<h2>{{subTitle}}</h2>
<app-heroes></app-heroes>

Cặp HTML này sẽ dựa trên tên của selector trong từng Component nhé các bạn! Đoạn này nè

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

Vậy là tạo thành công rồi đó, cùng check thử xem trình duyệt hiển thị OK chưa nào:

Hiển thị ra như trên là OK rồi đó, nói dài dòng nãy giờ vậy thôi chứ các bước khi tạo một Component như sau:

1. Tạo thư mục tương ứng với tên của component.
2. Tạo 3 thành phần tương ứng với đuôi: .component.ts, .component.html, .component.css
3. Thêm Component vừa tạo vào trong src/app/app.module.ts để Angular biết mà sử dụng.
4. Muốn hiển thị để xem như nào thì cứ thêm cặp selector vào view thôi.

HOẶC: đơn giản chỉ cần chạy câu lệnh ng generate component heroes

Giờ thử tìm hiểu sơ về các nội dung trong Component nhé:

• selector : Tên sẽ sử dụng trong view nhé các bạn.
• templateUrl : Nơi lưu trữ view cho riêng Component.
• styleUrls : Nơi lưu trữ CSS cho riêng Component.

Bạn nào chạy câu lệnh để tạo Component thì trong src/app/app.component.ts sẽ có OnInit và implements OnInit, tạm thời chúng ta chưa cần nên mình không bỏ nó vào. Lát đụng đến giải thích sau nhé.

Tạo class Hero

Nãy giờ mình thử hiển thị các title, subTitle các kiểu rồi, giờ thử hiển thị object Hero xem ra sao.

• Đầu tiên phải thêm class Hero vào nhé:

# src/app/app.component.ts
import { Component } from '@angular/core';

export class Hero {
  id: number;
  name: string;
}

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

export class HeroesComponent { 
  
}

• Sau đó tạo Hero property để lát hiển thị bên view nào:

import { Component } from '@angular/core';

export class Hero {
  id: number;
  name: string;
}

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

export class HeroesComponent {
  hero: Hero = {
    id: 1,
    name: 'Draven'
  }
}

• Ngại chi nữa, thêm Draven vào view liền Phần view này ta nên sử dụng view trên trang angular.io đi cho nó đẹp nha.

<h2>{{ hero.name | uppercase }} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

• Nãy mình quên thêm CSS vào, giờ thêm CSS vào cho cả app luôn nhé các bạn: src/styles.css

/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

F5 lại trình duyệt và xem kết quả nào:

Ngon rồi đó, giờ đến phần làm sao để edit tên của Draven nè.

Sửa tên Hero

Để sửa tên Hero thì chúng ta sử dụng kỹ thuật gọi là two-way bindings.

• Đầu tiên thêm input với kĩ thuật two-way bindings trên vào src/app/heroes/heroes.component.html

<h2>{{ hero.name | uppercase }} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
  <label>Name: </label>
  <input [(ngModel)]="hero.name">
</div>

• Sau đó thêm FormsModule vào trong src/app/app.module.ts để Angular hiểu được đoạn code trên:

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


import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';


@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Rồi, chạy thử và edit Draven thành Vayne xem như nào

Được liền, vậy là OK rồi đó, giờ thì đến phần tổng kết nãy giờ làm được gì.

1. Biết cách tạo Component bằng 2 cách.
2. Biết cách hiển thị Object.
3. Biết cách sử dụng kĩ thuật two-way bindings

Tới ngang đây mình hơi mệt rồi, nên hẹn các bạn ở bài tiếp theo nhá. Cảm ơn các bạn đã theo dõi!