Series Angular step by step cho người mới bắt đầu (Phần 1)

Mục tiêu của tutorial này là xây dựng một ứng dụng quản lý danh sách các heros.

Ứng dụng sẽ đi qua các nguyên tắt cốt lõi của Angular. Bạn sẽ xây dựng một ứng dụng cơ bản với các tính năng mà bạn thường bắt gặp như: thu thập và hiển thị danh sách anh hùng, chỉnh sửa chi tiết của anh hùng đã chọn và điều hướng giữa các chế độ xem khác nhau.

Bạn sẽ sử dụng các directive được xây dựng sẵn để hiển thị và ẩn các phần tử và hiển thị danh sách các anh hùng. Bạn sẽ tạo ra các thành phần để hiển thị chi tiết anh hùng và hiển thị một loạt các anh hùng. Bạn sẽ sử dụng ràng buộc dữ liệu một chiều (one-way data binding) cho dữ liệu read only. Bạn sẽ thêm các trường có thể chỉnh sửa để cập nhật model với ràng buộc dữ liệu hai chiều (two-way data binding). Bạn sẽ ràng buộc các methods trong component với các sự kiện của người dùng, như nhấn phím và nhấp chuột. Bạn sẽ cho phép người dùng chọn một anh hùng từ một danh sách chủ và chỉnh sửa anh hùng đó trong khung nhìn chi tiết. Bạn sẽ định dạng dữ liệu bằng pipes. Bạn sẽ tạo ra một shared service để thao tác với heroes. Và bạn sẽ sử dụng routing để điều hướng giữa các chế độ xem khác nhau và các trang.

Bạn sẽ được học vừa đủ về phần lõi của Angular để tự tin hơn với Angular, sau đó bạn có thể làm bất cứ gì bạn muốn.

Sử dụng các công cụ để phát triển ứng dụng nhanh hơn và dễ dàng hơn trong việc bảo trì so với việc làm tay tất cả. Angular CLI là một công cụ command line interface giúp tạo project dễ dàng hơn. Mục tiêu trong hướng dẫn này là tạo ra và chạy một ứng dụng bằng TypeScript sử dụng Angular CLI.

Step 1. Set up the Development Environment

Bạn cần cài đặt môi trường thành công trước khi làm bất cứ thứ gì. Trước hết cần có Nodejs và npm được cài đặt trên máy tính của bạn. Sử dụng các lệnh như dưới để kiểm tra nếu máy bạn đã có cài đặt:

$ node -v        
v6.11.0
$ npm -v                  
5.3.0

Sau đó cài đặt Angular CLI

$ npm install -g @angular/cli

Step 2. Create a new project

Tạo ra một app mới bằng câu lệnh bên dưới. Trong đó my-app là tên của ứng dụng.

$ ng new my-app

Step 3: Serve the application

Di chuyển đến thư mục chứa source của app và chạy ứng dụng bằng lệnh sau:

$ cd my-app
$ ng serve --open

ng serve dùng để khởi chạy server, option --open (có thể viết tắt là -o) sẽ mở một tab mới trên trình duyệt và truy cập sẵn ứng dụng ở địa chỉ http://localhost:4200

Theo hướng dẫn bên trên để tạo ra một project mới tên là angular-tour-of-heroes

Cấu trúc thư mục được tạo ra như sau:

angular-tour-of-heroes
 |-- src
 |   |-- app
 |   |   |-- app.component.ts
 |   |   |-- app.module.ts
 |   |-- main.ts
 |   |-- index.html
 |   |-- styles.css
 |   |-- systemjs.config.js
 |   |-- tsconfig.json
 |-- node_modules ...
 |-- package.json

Sau khi hoàn thành trang này, code của bạn sẽ trông như thế này.

$ npm start

Gõ lệnh trên vào terminal để chạy trình biên dịch TypeScript trong chế độ Watch mode, tự động recompiling code khi có thay đổi, và tự động referesh trình duyệt ngay lập tức để thấy những thay đổi.

Thêm 2 thuộc tính bên dưới vào AppComponent. Thuộc tính title dành cho tên app, thuộc tính hero là tên của hero - "Windstorm".

// app.component.ts (AppComponent class)
export class AppComponent {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}

Bây giờ sửa template trong @Component để binding dữ liệu với các thuộc tính vừa tạo

// app.component.ts (@Component)
template: `<h1>{{title}}</h1><h2>{{hero}} details!</h2>`

Browser sẽ tự động tải lại và hiển thị title và hero name.

Cặp ngoặc {{ và }} là cú pháp nội suy của Angular.

Hero object

Một hero cần nhiều thuộc tính hơn nữa, chúng ta sẽ chuyển hero từ một string thành một object. Tạo một lớp Hero với 2 thuộc tính là id và name. Đặt các thuộc tính này vào đầu file app.component.ts (nằm bên dưới thủ tục import).

// src/app/app.component.ts (Hero class)
export class Hero {
  id: number;
  name: string;
}

Trong lớp AppComponent, khởi tạo lại đối tượng hero để nó là 1 instance của lớp Hero thay vì 1 string.

// src/app/app.component.ts (hero property)
hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

Object hero đã bị thay đổi nên cần thay đổi lại cách binding tên hero ở template.

// src/app/app.component.ts
template: `<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>`

Khi browser tải lại trang thì tên sẽ lại được hiển thị.

Adding HTML with multi-line template strings

Để hiển thị nhiều thông tin của hero hơn có thể sử dụng các thẻ HTML trong template. Sử dụng ký tự ` để viết mã HTML trong nhiều dòng, đây là tính năng template literals trong JS ES5 và TypeScript, bạn đọc có thể xem thêm tại đây.

// app.component.ts (AppComponent's template)
template: `
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

Người dùng có thể đổi tên của một hero bằng cách nhập trong <input> textbox, textbox sẽ hiển thị tên của hero và cập nhập thông tin người dùng nhập vào.

Để làm được điều này, chúng ta cần một two-way binding giữa thẻ <input> và thuộc tính hero.name.

Two-way binding

Sửa thẻ hero name trong template lại như thế này:

// src/app/app.component.ts
<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>

[(ngModel)] là cú pháp của Angular để bind giữa thuộc tính hero.name và textbox. Dữ liệu được đồng bộ theo 2 hướng, khi thuộc tính thay đổi thì giá trị trên textbox thay đổi và khi thay đổi trên textbox thì giá trị của thuộc tính hero.name cũng bị thay đổi.

Thật không may, trình duyệt sẽ báo lỗi, ứng dụng bị crash. Bạn nên nhìn qua một chút trên console của trình duyệt, bạn sẽ thấy Angular thông báo rằng "ngModel ... isn't a known property of input."

Mặc dù NgModel là một directive hợp lệ của Angular, nhưng mặc định nó không được import sẵn. Nó nằm trong module FormsModule, cần phải khai báo trước khi sử dụng.

Import the FormsModule

Mở file app.module.ts và import FormsModule từ thư viện @angular/forms. Sau đó khai báo FormsModule vào phần imports của @NgModule, ở đây sẽ chứa danh sách các module ngoài mà app cần dùng đến.

Phần code sẽ giống như thế này:

// app.module.ts (FormsModule import)
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here
 
import { AppComponent }  from './app.component';
 
@NgModule({
  imports: [
    BrowserModule,
    FormsModule // <-- import the FormsModule before binding with [(ngModel)]
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Khi browser tải lại, bạn sẽ thấy app lại hoạt động và có thể edit tên hero, thay đổi sẽ phản ánh trực tiếp ở thẻ <h2> ngay phía trên.

Tóm tắt những thứ bạn đã đi qua:

• Ứng dụng Tour of Heroes sử dụng dấu ngoặc nhọn ({{ }}) nội suy (một hình thức của one-way binding) để hiển thị tiêu đề của app và thuộc tính của Hero object.
• Viết một multi-line template sử dụng chuẩn ES2015 để template trông dễ đọc hơn.
• Thêm two-way data binding vào thẻ <input> sử dụng built-in ngModel directive.

Trong tutorial tiếp theo, bạn sẽ được hướng dẫn cách hiển thị danh sách hero và cho phép người xem thông tin chi tiết của từng hero bất kỳ. Bạn cũng sẽ được học về làm thể nào để nhận danh sách heroes và hiển thị chúng lên template.

Lược dịch từ https://angular.io