Tạo bài viết
Đăng ký
07/11/2019, 15:04

Hướng dẫn Angular 2: Tạo CRUD App bằng Angular CLI

Đây là bài viết đầu tiên trong series 4 bốn phần hướng dẫn cách viết một ứng dụng Todo (quản lý công việc) trong Angular 2: Part 1— Cài đặt và khởi chạy phiên bản ứng dụng Todo đầu tiên Part 2— Tạo các thành phần khác nhau để hiển thị list trong todo và todo riêng biệt Part 3— ...

Đây là bài viết đầu tiên trong series 4 bốn phần hướng dẫn cách viết một ứng dụng Todo (quản lý công việc) trong Angular 2:

  1. Part 1— Cài đặt và khởi chạy phiên bản ứng dụng Todo đầu tiên
  2. Part 2— Tạo các thành phần khác nhau để hiển thị list trong todo và todo riêng biệt
  3. Part 3— Cập nhật dịch vụTodo để giao tiếp REST API
  4. Part 4— Dùng Component Router để định tuyết các thành phần khác nhau

Chú thích: ứng dụng todo là một ứng dụng đơn giản nhắc nhở một loạt công việc cần làm trong ngày/tuần, với mỗi todo là một công việc phải hoàn thành.

Trong bài viết này, chúng ta sẽ đi sâu vào cấu trúc cơ bản của ứng dụng để cho ra đời một ứng dụng trông như sau:

Đến cuối series này, cấu trúc ứng dụng của chúng ta sẽ như sau:

Những mục được bảo đỏ sẽ được nhắc đến trong bài viết này, những khái niệm còn lại sẽ được giới thiệu trong các bài viết sau của series.

Trong phần đầu tiên này, bạn được hướng dẫn cách:

  • Khởi tạo ứng dụng Todo bằng Angular CLI
  • Tạo class Todo để thể hiện các mục todo riêng biệt
  • Tạo dịch vụ TodoDataService để tạo, cập nhật và bỏ mục todo
  • Dùng thành tố AppComponent để hiển thị giao diện người dùng
  • Deploy ứng dụng đến page GitHub của bạn

Bắt đầu nhé!

Khởi tạo ứng dụng Todo bằng Angular CLI

Một trong những cách bắt đầu một ứng dụng Angular 2 tốt nhất là dùng command-line interface (CLI) của Angular.

Để cài đặt Angular CLI, chạy:

$ npm install -g angular-cli
1
2
3
 
$ npm install -g angular-cli
 

Đoạn trên sẽ cài đặt lệnh ng gobal lên hệ thống.

Để xác nhận xem quá trình cài đặt đã thành công hay chưa, bạn có thể chạy:

$ ng version
1
2
3
 
$  ng version
 

Đoạn lệnh trên sẽ hiển thị phiên bản bạn đã cài đặt:

angular-cli: 1.0.0-beta.21 node: 6.1.0 os: darwin x64
1
2
3
4
5
 
angular-cli: 1.0.0-beta.21
node: 6.1.0
os: darwin x64
 

Sau khi đã cài đặt Angular CLI, bạn đã có thể sử dụng công cụ để khởi tạo ứng dụng Todo của mình:

$ ng new todo-app
1
2
3
 
$ ng new todo-app
 

Đoạn lệnh này sẽ tạo một thư mục mới với tất cả những file cần thiết để bắt đầu:

todo-app
├── README.md
├── angular-cli.json
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── index.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.json
│   └── typings.d.ts
└── tslint.json

Nếu vẫn chưa quá quen thuộc với Angular CLI, bạn có thể đọc thêm tại The Ultimate Angular CLI Reference.

Giờ đây bạn đã có thể điều hướng đến thư mục mới:

$ cd todo-app
1
2
3
 
$ cd todo-app
 

Và khởi động được Angular CLI development server:

$ ng serve
1
2
3
 
$ ng serve
 

Đoạn lệnh sẽ khởi động local development server truy cập được từ trình duyệt http://localhost:4200/.

Angular CLI development server có hỗ trợ LiveReload, nên mỗi khi file nguồn thay đổi trình duyệt sẽ tự động tải lại ứng dụng.

Tiện quá các bạn nhỉ?

Tạo Todo Class

Vì Angular CLI tạo được file TypeScript, chúng ta có thể dùng class để thể hiện mục todo:

Chúng ta hãy thử dùng Angular CLI để tạo class Todo nhé:

$ ng generate class Todo --spec
1
2
3
 
$ ng generate class Todo --spec
 

Đoạn lệnh sẽ tạo:

src/app/todo.spec.ts src/app/todo.ts
1
2
3
4
 
src/app/todo.spec.ts
src/app/todo.ts
 

Hãy mở src/app/todo.ts:

export class Todo { }
1
2
3
4
 
export class Todo {
}
 

Và thêm logic ta cần:

export class Todo { id: number; title: string = '; complete: boolean = false; constructor(values: Object = {}) { Object.assign(this, values); } }
1
2
3
4
5
6
7
8
9
10
11
 
export class Todo {
  id: number;
  title: string = ';
  complete: boolean = false;
 
  constructor(values: Object = {}) {
    Object.assign(this, values);
  }
}
 

Trong Todo class definition này, chúng ta sẽ chỉ định rằng mỗi instance Todo có 3 tính chất:

  • id: số, ID chuyên biệt của todo item
  • title: string, tên của todo item
  • complete: boolean,todo item đã hoàn thành hay chưa

Chúng ta còn phải cung cấp logic hàm dựng cho phép chỉ định property value trong quá trình thực thể hóa (instantiation) để có thể dễ dàng tạo được những instance Todo mới như sau:

let todo = new Todo({ title: 'Read SitePoint article', complete: false });
1
2
3
4
5
6
 
let todo = new Todo({
  title: 'Read SitePoint article',
  complete: false
});
 

Đến đây, hãy thêm unit test để đảm bảo constructor logic của chúng ta làm việc như dự đoán.

Khi tạo class Todo, ta đã dùng tùy chọn --spec. Tùy chọn này sẽ khiến Angular CLI cũng tạo thêm src/app/todo.spec.ts với unit test cơ bản cho ta luôn:

import {Todo} from './todo'; describe('Todo', () => { it('should create an instance', () => { expect(new Todo()).toBeTruthy(); }); });
1
2
3
4
5
6
7
8
9
 
import {Todo} from './todo';
 
describe('Todo', () => {
  it('should create an instance', () => {
    expect(new Todo()).toBeTruthy();
  });
});
 

Hãy thêm vào unit test nữa để đảm bảo constructor logic làm việc đúng như dự đoán:

import {Todo} from './todo'; describe('Todo', () => { it('should create an instance', () => { expect(new Todo()).toBeTruthy(); }); it('should accept values in the constructor', () => { let todo = new Todo({ title: 'hello', complete: true }); expect(todo.title).toEqual('hello'); expect(todo.complete).toEqual(true); }); });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
import {Todo} from './todo';
 
describe('Todo', () => {
  it('should create an instance', () => {
    expect(new Todo()).toBeTruthy();
  });
 
  it('should accept values in the constructor', () => {
    let todo = new Todo({
      title: 'hello',
      complete: true
    });
    expect(todo.title).toEqual('hello');
    expect(todo.complete).toEqual(true);
  });
});
 

Để xác định xem code của chúng ta đã đúng hay chưa, giờ đây ta sẽ chạy:

$ ng test
1
2
3
 
$ ng test
 

để thực thi Karma test runner và chạy tất cả unit test ta cần. Out của bạn sẽ như sau:

[karma]: No captured browser, open http://localhost:9876/ [karma]: Karma v1.2.0 server started at http://localhost:9876/ [launcher]: Launching browser Chrome with unlimited concurrency [launcher]: Starting browser Chrome [Chrome 54.0.2840 (Mac OS X 10.12.0)]: Connected on socket /#ALCo3r1JmW2bvt_fAAAA with id 84083656 Chrome 54.0.2840 (Mac OS X 10.12.0): Executed 5 of 5 SUCCESS (0.159 secs / 0.154 secs)
1
2
3
4
5
6
7
8
 
[karma]: No captured browser, open http://localhost:9876/
[karma]: Karma v1.2.0 server started at http://localhost:9876/
[launcher]: Launching browser Chrome with unlimited concurrency
[launcher]: Starting browser Chrome
[Chrome 54.0.2840 (Mac OS X 10.12.0)]: Connected on socket /#ALCo3r1JmW2bvt_fAAAA with id 84083656
Chrome 54.0.2840 (Mac OS X 10.12.0): Executed 5 of 5 SUCCESS (0.159 secs / 0.154 secs)
 

Sau khi ta đã có class Todo hoạt động được để thể hiện một todo riêng biệt, tiếp đến hãy tạo service TodoDataService để quản lý tất cả mục todo.

Tạo TodoDataService Service

TodoDataService sẽ đảm nhận nhiệm vụ quản lý Todo item.

Trong các phần tiếp theo của series, chúng ta sẽ tìm hiểu các giao tiếp với EST API, nhưng lúc này chúng ta sẽ chỉ lưu trữ tất cả dữ liệu trong bộ nhớ.

Hãy sử dụng Angular CLI lần nữa để tạo service:

$ ng generate service TodoData
1
2
3
 
$ ng generate service TodoData
 

Với output:

installing service create src/app/todo-data.service.spec.ts create src/app/todo-data.service.ts WARNING Service is generated but not provided, it must be provided to be used
1
2
3
4
5
6
 
installing service
  create src/app/todo-data.service.spec.ts
  create src/app/todo-data.service.ts
  WARNING Service is generated but not provided, it must be provided to be used
 

Khi tạo service, Angular CLI cũng tạo thêm unit test theo mặc định, nên ta không cần phải dùng thêm tùy chọn --spec.

Angular CLI đã tạo đoạn code sau cho TodoDataService của ta trong src/app/todo-data.service.ts:

import { Injectable } from '@angular/core'; @Injectable() export class TodoDataService { constructor() { } }
1
2
3
4
5
6
7
8
9
10
 
import { Injectable } from '@angular/core';
 
@Injectable()
export class TodoDataService {
 
  constructor() { }
 
}
 

Và một unit test tương ứng trong src/app/todo-data.service.spec.ts:

/* tslint:disable:no-unused-variable */ import { TestBed, async, inject } from '@angular/core/testing'; import { TodoDataService } from './todo-data.service'; describe('TodoDataService', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [TodoDataService] }); }); it('should ...', inject([TodoDataService], (service: TodoDataService) => { expect(service).toBeTruthy(); })); });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
/* tslint:disable:no-unused-variable */
 
import { TestBed, async, inject } from '@angular/core/testing';
import { TodoDataService } from './todo-data.service';
 
describe('TodoDataService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [TodoDataService]
    });
  });
 
  it('should ...', inject([TodoDataService], (service: TodoDataService) => {
    expect(service).toBeTruthy();
  }));
});
 

Hãy mở src/app/todo-data.service.ts và thêm todo management logic của chúng ta vào TodoDataService:

import {Injectable} from '@angular/core'; import {Todo} from './todo'; @Injectable() export class TodoDataService { // Placeholder for last id so we can simulate // automatic incrementing of id's lastId: number = 0; // Placeholder for todo's todos: Todo[] = []; constructor() { } // Simulate POST /todos addTodo(todo: Todo): TodoDataService { if (!todo.id) { todo.id = ++this.lastId; } this.todos.push(todo); return this; } // Simulate DELETE /todos/:id deleteTodoById(id: number): TodoDataService { this.todos = this.todos .filter(todo => todo.id !== id); return this; } // Simulate PUT /todos/:id updateTodoById(id: number, values: Object = {}): Todo { let todo = this.getTodoById(id); if (!todo) { return null; } Object.assign(todo, values); return todo; } // Simulate GET /todos getAllTodos(): Todo[] { return this.todos; } // Simulate GET /todos/:id getTodoById(id: number): Todo { return this.todos .filter(todo => todo.id === id) .pop(); } // Toggle todo complete toggleTodoComplete(todo: Todo){ let updatedTodo = this.updateTodoById(todo.id, { complete: !todo.complete }); return updatedTodo; } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
import {Injectable} from '@angular/core';
import {Todo} from './todo';
 
@Injectable()
export class TodoDataService {
 
  // Placeholder for last id so we can simulate
  // automatic incrementing of id's
  lastId: number = 0;
 
  // Placeholder for todo's
  todos: Todo[] = [];
 
  constructor() {
  }
 
  // Simulate POST /todos
  addTodo(todo: Todo)

Bùi Văn Nam

27 chủ đề

7090 bài viết

Có thể bạn quan tâm
0
Các chủ đề đang được quan tâm
phần mềm lập trình php | lập trình web php + mysql | khóa học lập trình php | tự học lập trình php | học php cơ bản thachpham | Code24h | Cho thuê phòng trọ hà nội | Cho thuê phòng trọ bình thạnh | Cho thuê phòng trọ | Cho thuê nhà trọ
Đăng ký

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN
VỀ CODE24H
HỢP TÁC VÀ LIÊN KẾT
KẾT NỐI VỚI CHÚNG TÔI
TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

CCode 24h, code mọi lúc, mọi nơi

© Copy right 2018 - 2024