Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic
Code

Tạo một ứng dụng Quản lý Tác vụ bằng Ionic: Phần 2

by
Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong phần đầu của loạt bài hướng dẫn, bạn đã tạo giao diện người dùng và điều hướng cho ứng dụng quản lý tác vụ. Trong hướng dẫn này, bạn sẽ học cách cài đặt tính năng cho ứng dụng quản lý tác vụ bằng Ionic để thêm và liệt kê các tác vụ.

Bắt đầu

Hãy bắt đầu bằng cách nhân bản mã nguồn từ phần đầu tiên của loạt bài hướng dẫn.

Chuyển đến thư mục của dự án và cài đặt các phụ thuộc cần thiết.

Chạy ứng dụng của bạn từ thư mục của dự án.

Bạn sẽ thấy ứng dụng đang chạy tại http://localhost:8100/.

Giao tiếp giữa các thành phần

Bạn đã tạo ra thành phần AddList để thêm và liệt kê các tác vụ tương ứng. Để làm cho chúng hoạt động đồng bộ, bạn cần duy trì liên lạc giữa hai thành phần. Để giao tiếp giữa các thành phần, bạn sẽ sử dụng một CommonService.

Tạo một thư mục đặt tên là service trong thư mục src/pages.

Tạo một tập tin dịch vụ gọi là common.service.ts và thêm code sau đây vào đó:

Bạn sẽ theo dõi danh sách tác vụ trong dịch vụ thông thường và nó sẽ được chia sẻ giữa các thành phần AddList.

Định nghĩa một biến được gọi là tasks trong tập tin common.service.ts. Bạn sẽ giữ danh sách tác vụ của bạn trong mảng tasks này.

Tạo một thư mục có tên là task bên trong thư mục src/pages. Tạo một tập tin đặt tên là task.model.ts và thêm vào đó code sau đây:

Bạn sẽ sử dụng lớp Task ở trên để tạo đối tượng của một tác vụ mới.

Khi người dùng nhấp vào nút Thêm tác vụ từ thành phần Add, bạn sẽ thêm các phần tử vào biến tasks trong tập tin common.service.ts. Vì vậy, hãy tạo một phương thức gọi là addTask nằm trong tập tin common.service.ts, cái mà bạn sẽ gọi từ thành phần Add.

Thêm một tác vụ vào danh sách

Để thêm một tác vụ vào danh sách các tác vụ, bạn cần import tập tin common.service.ts bên trong thành phần AddPage.

Khởi tạo CommonService bên trong phương thức contstructor của thành phần AddPage.

Bên trong thành phần AddPage, tạo một phương thức gọi là add nơi bạn sẽ thêm tác vụ vào biến tasks.

Phương thức add trong thành phần AddPage sẽ trông giống như sau:

Như đã thấy ở trong phương thức trên, bạn đã gọi phương thức addTask từ dịch vụ chung để thêm một tác vụ vào danh sách tasks.

Một khi phần tử được thêm vào, bạn gọi phương thức dismiss để huỷ bỏ popup. Tập tin add.component.ts sẽ trông như thế này:

Trong trang add.component.html, thêm chỉ thị ngModel vào phần tử input.

Thêm sự kiện click vào nút trong add.component.html để kích hoạt phương thức add bên trong add.component.ts.

Lưu các thay đổi ở trên và thử khởi động lại máy chủ ionic. Trỏ trình duyệt đến http://localhost:8100 và bạn sẽ có thể thấy ứng dụng dành cho thiết bị di động ở trong trình duyệt.

Nhấp vào biểu tượng Thêm để thêm một tác vụ. Nhập tên tác vụ và nhấp vào nút thêm. Popup sẽ biến mất.

Liệt kê các phần tử

Một khi tác vụ được thêm vào danh sách tasks, bạn cần cập nhật view tương ứng. Vì vậy, để theo dõi tác vụ khi được thêm vào danh sách, bạn sẽ cần sử dụng Subject của Angular.

Định nghĩa một subject được gọi là task_subject bên trong tập tin common.service.ts.

Khi tác vụ được thêm vào danh sách tasks, bạn cần kích hoạt subject task_subject để thông báo cho subscriber biết rằng một tác vụ đã được thêm vào.

Hãy sửa đổi phương thức addTask bên trong tập tin common.service.ts để thêm code sau đây vào:

Đây là phương thức addTask đã được sửa đổi:

Subscribe đối tượng subject task_subject bên trong tập tin list.component.ts.

Bất cứ khi nào một tác vụ mới được thêm vào tasks từ commonService đều được gán vào tasks trong list.component.html và view được cập nhật.

Tập tin list.component.ts sẽ trông như sau:

Hãy sửa đổi list.component.html để lặp qua biến tasks từ tập tin list.component.ts. Nó sẽ trông giống như sau:

Lưu các thay đổi ở trên và khởi động lại máy chủ. Hãy thử thêm một tác vụ mới và nó sẽ được hiển thị trên màn hình liệt kê tác vụ.

Ionic Task Manager

Bây giờ hãy cài đặt tính năng đánh dấu các tác vụ đã hoàn thành. Mỗi khi một tác vụ mới được thêm vào, bạn sẽ thêm một thuộc tính IsDonefalse.

Hãy giữ hai mảng khác nhau cho các tác vụ đang chờ xử lý và các tác vụ đã hoàn thành.

Mỗi khi một tác vụ mới được thêm vào, bạn sẽ cập nhật hai mảng ở trên như sau:

Khi người dùng nhấp vào hộp kiểm, bạn cần phải chuyển đổi trạng thái IsDone. Thêm một phương thức gọi là checkPendingItem để chuyển đổi trạng thái IsDone cho các tác vụ đang chờ xử lý.

Tương tự, hãy thêm một phương thức khác gọi là checkDoneItem để chuyển đổi trạng thái tác vụ cho các mục đã hoàn thành. Phương thức sẽ như sau:

Khi trạng thái IsDone được chuyển đổi, bạn cần cập nhật các tác vụ. Định nghĩa một phương thức được gọi là updateTask, được gọi sau khi chuyển đổi trạng thái IsDone trong cả hai phương thức trên.

Hãy chỉnh sửa code trong list.component.html để hiển thị riêng lẻ pendingTasksdoneTasks. Tập tin list.component.html đã sửa đổi sẽ như sau:

Lưu các thay đổi ở trên và khởi động lại máy chủ ionic. Bạn sẽ thấy ứng dụng đang chạy tại http://localhost:8100.

Ionic Task Manager App Listing

Tóm tắt

Trong bài hướng dẫn này, bạn đã được học cách cài đặt tính năng thêm và liệt kê các tác vụ trong ứng dụng di động quản lý tác vụ bằng Ionic. Bạn đã thấy cách sử dụng một dịch vụ Angular để chia sẻ dữ liệu giữa hai thành phần. Trong bài hướng dẫn này, bạn sử dụng dịch vụ của Angular để lưu giữ dữ liệu trong một danh sách chung khi được thêm vào từ thành phần Add và hiển thị nó trong thành phần List.

Hãy cho chúng tôi biết những suy nghĩ của bạn trong phần bình luận bên dưới nhé.

Mã nguồn từ hướng dẫn này có sẵn trên GitHub.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.