Tiếng Việt

Hướng dẫn AngularJS

Ứng dụng AngularJS

AngularJS - Ứng dụng Todo

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của AngularJS bằng cách xây dựng một ứng dụng Todo đơn giản nhưng mạnh mẽ. Như một giáo viên khoa học máy tính hàng xóm thân thiện, tôi rất vui được hướng dẫn các bạn qua quá trình này, ngay cả khi các bạn chưa bao giờ viết một dòng mã trước đây. Vậy, hãy lấy饮料 yêu thích của bạn, thoải mái và cùng nhau bắt đầu nhé!

AngularJS - ToDo Application

AngularJS là gì?

Trước khi chúng ta bắt đầu viết mã, hãy dành một chút thời gian để hiểu AngularJS là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. HTML sẽ là nền móng và tường, CSS sẽ là sơn và trang trí, và JavaScript sẽ là điện và ống nước. AngularJS giống như một đội ngũ xây dựng siêu hiệu quả giúp bạn kết hợp tất cả các yếu tố này một cách thông minh và có tổ chức.

AngularJS là một khung công tác JavaScript mạnh mẽ giúp mở rộng từ vựng HTML cho ứng dụng của bạn. Nó đặc biệt giỏi trong việc xây dựng các ứng dụng đơn trang động.

Thiết lập dự án của chúng ta

Trước hết, hãy thiết lập dự án của chúng ta. Chúng ta sẽ cần ba tệp:

  1. index.html (tệp HTML chính của chúng ta)
  2. app.js (ứng dụng AngularJS của chúng ta)
  3. style.css (tệp stylesheet của chúng ta)

Hãy bắt đầu với tệp HTML của chúng ta:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Ứng dụng Todo của tôi</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="TodoController">
<h1>Danh sách Todo của tôi</h1>
<!-- Chúng ta sẽ thêm nhiều nội dung hơn ở đây sau -->
</body>
</html>

Hãy phân tích điều này:

  • ng-app="todoApp": Điều này cho biết AngularJS rằng này là phần tử gốc của ứng dụng chúng ta.
  • ng-controller="TodoController": Điều này xác định controller nào nên được sử dụng cho phần này của ứng dụng.
  • Chúng ta đã bao gồm AngularJS từ một CDN và liên kết tệp app.js và style.css của chúng ta.

Tạo ứng dụng AngularJS của chúng ta

Bây giờ, hãy tạo ứng dụng AngularJS của chúng ta trong app.js:

var app = angular.module('todoApp', []);

app.controller('TodoController', function($scope) {
$scope.todos = [
{text: 'Học AngularJS', done: false},
{text: 'Xây dựng một ứng dụng', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

Đây là những gì đang xảy ra:

  • Chúng ta tạo một module AngularJS có tên 'todoApp'.
  • Chúng ta xác định một controller có tên 'TodoController'.
  • Trong controller, chúng ta tạo một mảng các mục todo và một hàm để thêm mới todo.
  • $scope giống như một cây cầu giữa HTML và JavaScript. Nó cho phép chúng ta truy cập các biến và hàm trong HTML.

Hiển thị các Todo của chúng ta

Hãy cập nhật HTML của chúng ta để hiển thị các todo:

<body ng-controller="TodoController">
<h1>Danh sách Todo của tôi</h1>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="Thêm một todo mới">
<input type="submit" value="Thêm">
</form>
</body>

Hãy phân tích điều này:

  • ng-repeat="todo in todos": Điều này tạo ra một <li> mới cho mỗi todo trong mảng todos.
  • ng-model="todo.done": Điều này liên kết checkbox với thuộc tính 'done' của todo.
  • ng-class="{'done': todo.done}": Điều này áp dụng lớp 'done' khi todo.done là true.
  • {{todo.text}}: Điều này hiển thị văn bản của todo.
  • ng-submit="addTodo()": Điều này gọi hàm addTodo khi biểu mẫu được gửi.
  • ng-model="newTodo": Điều này liên kết input với biến newTodo trong controller.

Thêm phong cách cho ứng dụng của chúng ta

Cuối cùng, hãy thêm một chút phong cách cơ bản trong tệp style.css:

body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

.done {
text-decoration: line-through;
color: #888;
}

form {
margin-top: 20px;
}

input[type="text"] {
width: 70%;
padding: 5px;
}

input[type="submit"] {
padding: 5px 10px;
}

CSS này sẽ làm cho ứng dụng của chúng ta trông sạch sẽ và tổ chức.

Kết luận

Chúc mừng! Bạn đã vừa xây dựng xong ứng dụng AngularJS đầu tiên của mình. Dưới đây là bảng tóm tắt các khái niệm chính của AngularJS mà chúng ta đã sử dụng:

Khái niệm Mô tả
ng-app Xác định phần tử gốc của một ứng dụng AngularJS
ng-controller Xác định controller nào nên được sử dụng cho phần tử HTML
ng-repeat Lặp lại một phần tử HTML cho mỗi mục trong một mảng
ng-model Liên kết một input, select, hoặc textarea với một thuộc tính trên scope
ng-submit Xác định hàm nào nên được chạy khi một biểu mẫu được gửi
ng-class Đ apl dụng các lớp CSS một cách động

Nhớ rằng, học lập trình giống như học một ngôn ngữ mới. Nó cần thời gian và sự luyện tập, nhưng với sự kiên trì, bạn sẽ nhanh chóng xây dựng các ứng dụng phức tạp. Hãy tiếp tục viết mã, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ!

Credits: Image by storyset

Hướng Dẫn Trước:
AngularJS - Lernational hóa
Hướng Dẫn Tiếp Theo:
AngularJS - Ứng dụng Ghi chú