Đã đến lúc tạo một Ứng dụng AngularJS thực sự.
Làm một danh sách mua sắm
Cho phép sử dụng một số tính năng AngularJS để tạo danh sách mua sắm, nơi bạn có thể thêm hoặc xóa các mặt hàng:
Giải thích ứng dụng
Bước 1. Bắt đầu:
Bắt đầu bằng cách gọi một ứng dụng myShoppingListvà thêm một bộ điều khiển được đặt tên myCtrlcho nó.
Bộ điều khiển thêm một mảng được đặt tên productscho hiện tại $scope.
Trong HTML, chúng tôi sử dụng ng-repeatchỉ thị để hiển thị danh sách bằng cách sử dụng các mục trong mảng.
Thí dụ
Cho đến nay, chúng tôi đã tạo một danh sách HTML dựa trên các mục của một mảng:
[pre2023][lang]javascript[/lang][skill]MTViet Code[/skill][laka]e1[/laka]
- {{x}}
Bước 2. Thêm các mục:
Trong HTML, hãy thêm trường văn bản và liên kết trường đó với ứng dụng bằng lệnh ng-model .
Trong bộ điều khiển, hãy đặt tên cho một hàm addItemvà sử dụng giá trị của trường addMeđầu vào để thêm một mục vào productsmảng.
Thêm một nút và cung cấp cho nó một ng-clickchỉ thị sẽ chạy addItemchức năng khi nút được nhấp.
Thí dụ
Bây giờ chúng ta có thể thêm các mặt hàng vào danh sách mua sắm của mình:
[pre2023][lang]javascript[/lang][skill]MTViet Code[/skill][laka]e2[/laka] [xuongdongMT]
- {{x}}
Bước 3. Xóa các mục:
Chúng tôi cũng muốn có thể xóa các mặt hàng khỏi danh sách mua sắm.
Trong bộ điều khiển, hãy tạo một hàm có tên removeItem, lấy chỉ mục của mục bạn muốn xóa, làm tham số.
Trong HTML, hãy tạo một phần tử cho mỗi mục và cung cấp cho chúng một ng-clickchỉ thị gọi removeItem hàm với hiện tại $index.
Thí dụ
Bây giờ chúng tôi có thể xóa các mặt hàng khỏi danh sách mua sắm của mình:
[pre2023][lang]javascript[/lang][skill]MTViet Code[/skill][laka]e3[/laka] [xuongdongMT] [xuongdongMT]
- {{x}}×
Bước 4. Xử lý lỗi:
Ứng dụng có một số lỗi, như nếu bạn cố gắng thêm cùng một mục hai lần, ứng dụng sẽ bị treo. Ngoài ra, nó không nên được phép thêm các mục trống.
Chúng tôi sẽ khắc phục điều đó bằng cách kiểm tra giá trị trước khi thêm các mặt hàng mới.
Trong HTML, chúng tôi sẽ thêm một vùng chứa thông báo lỗi và viết thông báo lỗi khi ai đó cố gắng thêm một mục hiện có.
Thí dụ
Một danh sách mua sắm, với khả năng viết thông báo lỗi:
[pre2023][lang]javascript[/lang][skill]MTViet Code[/skill][laka]e4[/laka] - {{x}}×
{{errortext}}
[/pre2023]
Bước 5. Thiết kế:
Ứng dụng hoạt động, nhưng có thể sử dụng một thiết kế tốt hơn. Chúng tôi sử dụng biểu định kiểu W3.CSS để tạo kiểu cho ứng dụng của mình.
Thêm biểu định kiểu W3.CSS và bao gồm các lớp thích hợp trong toàn bộ ứng dụng và kết quả sẽ giống như danh sách mua sắm ở đầu trang này.
Thí dụ
Tạo kiểu cho ứng dụng của bạn bằng biểu định kiểu W3.CSS: