Từ bài này chúng ta sẽ bắt đầu đi vào tìm hiểu cách sử dụng Angular 2.

Tạo project Angular

Chúng ta tạo một project bằng cách lấy bộ code mẫu từ trang Github của Angular về như trong bài Cài đặt đã hướng dẫn, đầu tiên bạn mở Command Prompt (cmd) lên, sau đó gõ lệnh sau:

C:\Project>git clone https://github.com/angular/quickstart.git displaying_data

Lệnh trên sẽ yêu cầu git tạo một thư mục với tên displaying_data, sau đó lấy bộ code từ project quickstart về từ trang Github của Angular.

Sau đó bạn gõ các lệnh sau:

C:\Project>cd displaying_data
...
C:\Project\displaying_data>npm install
...

Lệnh cd displaying_data sẽ di chuyển thư mục hiện tại trong Command Prompt vào thư mục displaying_data, sau đó lệnh npm install sẽ tải và cài các module cần thiết từ hệ thống npm về.

Vậy là chúng ta tạo project xong.

Lưu ý là trong thư mục này có rất nhiều file không cần thiết, chúng ta có thể xóa chúng đi bằng cách chạy 3 lệnh sau:

C:\Project\displaying_data>for /f %i in (non-essential-files.txt) do del %i /F /S /Q
...
C:\Project\displaying_data>rd .git /s /q
...
C:\Project\displaying_data>rd e2e /s /q
...

Trích xuất dữ liệu và hiển thị

Ở đây chúng ta sẽ khai báo biến trong lớp component và hiển thị lên màn hình.

Chúng ta sửa lại file app.component.ts trong thư mục src\app như sau:

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

@Component({
    selector: 'my-app',
    template: `
              <h1>{{ title }}</h1>
              <h2>My favorite idol is: {{myIdol}}<h2>
              `     
})
export class AppComponent { 
    title = "My idol list";
    myIdol = "Steve Jobs";
}

Trong file này chúng ta định nghĩa một lớp Component là AppComponent, lớp này có 2 thuộc tính là title và myIdol.

template: `        
          <h1>{{ title }}</h1>
          <h2>My favorite idol is: {{ myIdol }}
          <h2>
          `   

Tham số template trong phần khai báo @Component là đoạn code HTML sẽ được hiển thị lên màn hình, ở đây chúng ta hiển thị dữ liệu của 2 thuộc tính title và myIdol.

Lưu ý: các biến sẽ được bọc trong cặp dấu ngoặc nhọn {{}}. Chuỗi được bọc trong dấu huyền `` có thể ghi trên nhiều dòng.

Sau đó bạn có thể chạy lệnh npm start để chạy project rồi.

C:\Project\displaying-data>npm start

> angular-quickstart@1.0.0 prestart C:\Project\displaying-data
> npm run build

> angular-quickstart@1.0.0 build C:\Project\displaying-data>
> tsc -p src/

> angular-quickstart@1.0.0 start C:\Project\displaying-data>
> concurrently "npm run build:watch" "npm run serve"
...

Ở đây chúng ta không làm công việc gì như tạo đối tượng cả, Angular sẽ tạo giùm cho chúng ta. Tham số selector trong phần khai báo @Component ở trên định nghĩa tên thẻ sẽ được gọi trong file HTML, ở đây đã được đặt sẵn là my-app, trong file src\index.html có sẵn đoạn code tạo thẻ <my-app></my-app> để tham chiếu đến component này rồi.

Khi chúng ta chạy lệnh npm start, npm sẽ khởi động project từ file main.ts, đoạn code trong này sẽ tạo đối tượng từ lớp AppModule trong file app.module.ts, trong lớp AppModule này lại tham chiếu đến lớp AppComponent mà chúng ta vừa sửa ở trên.

Duyệt dữ liệu với *ngFor

Chúng ta dùng chỉ thị *ngFor để thực hiện việc duyệt các kiểu dữ liệu danh sách (như mảng). Ví dụ chúng ta sửa lại file app.component.ts như sau:

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

@Component({
    selector: 'my-app', 
    template: `
              <h1>{{ title }}</h1>
              <h2>My favorite idol is: {{ myIdol }}</h2>
              There are some more:
              <ul>                  
                  <li *ngFor="let idol of idols">
                      {{ idol }}
                  </li>
              </ul>
              `
})
export class AppComponent { 
    title = "My idol list";
    idols = [ 'Steve Jobs', 'Bill Gates', 'Mark Zuckerberg', 'Linus Torvalds' ];
    myIdol = this.idols[0];
}

Trong lớp AppComponent chúng ta có một mảng là idols, thuộc tính myIdol là giá trị của phần tử đầu tiên trong mảng.

Trong tham số template, chúng ta duyệt mảng idols và hiển thị trong thẻ <ul></ul>. Ở đây chúng ta dùng thuộc tính *ngFor="let idol of idols" để thực hiện việc duyệt mảng.

Biểu thức điều kiện

Chúng ta dùng chỉ thị *ngIf để thực hiện biểu thức điều kiến, ví dụ chúng ta sửa lại đoạn code app.component.ts như sau:

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

@Component({
    selector: 'my-app', 
    template: `              
              <h1>{{ title }}</h1>
              <h2>My favorite idol is: {{ myIdol }}</h2>
             <p *ngIf="idols.length > 1">There are some more:</p>
              <ul>                  
                  <li *ngFor="let idol of idols">
                      {{ idol }}
                  </li>
              </ul>
              `
})
export class AppComponent { 
    title = "My idol list";
    idols = [ 'Steve Jobs', 'Bill Gates', 'Mark Zuckerberg', 'Linus Torvalds' ];
    myIdol = this.idols[0];
}

Theo sau *ngIf là một câu lệnh so sánh hay bất cứ một biểu thức là mà có trả về giá trị true hoặc false, nếu true thì chuỗi trong cặp thẻ <p></p> mới được hiển thị.