AngularJS - Ứng dụng Đăng nhập

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị để tạo một ứng dụng đăng nhập sử dụng AngularJS. Là một giáo viên khoa học máy tính gần gũi, tôi sẽ hướng dẫn bạn qua quy trình này từng bước một. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ bắt đầu từ cơ bản và dần dần nâng cao. Cuối cùng của bài hướng dẫn này, bạn sẽ có một ứng dụng đăng nhập hoạt động và một sự hiểu biết vững chắc về các khái niệm của AngularJS. Hãy cùng bắt đầu!

AngularJS - Login Application

1. Giới thiệu về AngularJS

Trước khi bắt đầu lập code, 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à - AngularJS giống như một bộ công cụ đáng tin cậy, đầy đủ các công cụ hữu ích để giúp công việc của bạn dễ dàng hơn. Đây là một khung công tác JavaScript giúp chúng ta tạo ra các ứng dụng web động với ít công sức hơn.

1.1 Tại sao lại chọn AngularJS?

AngularJS mang lại nhiều lợi ích:

Kết nối dữ liệu hai chiều
Phương pháp tiếp cận modul
Chiếu lệ thuộc
Hướng dẫn để mở rộng HTML

Những tính năng này có thể听起来 như là ngôn ngữ kỹ thuật vào lúc này, nhưng đừng lo lắng - chúng ta sẽ khám phá chúng khi xây dựng ứng dụng đăng nhập của mình.

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

2.1 Tạo cấu trúc HTML cơ bản

Hãy bắt đầu bằng cách tạo một tệp HTML cơ bản cho ứng dụng đăng nhập của chúng ta. Mở trình soạn thảo văn bản yêu thích của bạn và tạo một tệp mới叫做 index.html. Dưới đây là cấu trúc ban đầu:

<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>Ứng dụng Đăng nhập AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="LoginController">
<h1>Xin chào đến ứng dụng Đăng nhập của chúng tôi</h1>
<!-- Chúng ta sẽ thêm biểu mẫu đăng nhập ở đây -->
</body>
</html>

Trong HTML này, chúng ta đã bao gồm thư viện AngularJS từ CDN và liên kết đến tệp app.js (mà chúng ta sẽ tạo sau). Các thuộc tính ng-app và ng-controller là các hướng dẫn AngularJS mà chúng ta sẽ giải thích sau.

2.2 Tạo mô-đun và bộ điều khiển AngularJS

Bây giờ, hãy tạo tệp app.js trong cùng thư mục với tệp HTML của chúng ta:

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

app.controller('LoginController', function($scope) {
$scope.user = {
username: '',
password: ''
};

$scope.login = function() {
// Chúng ta sẽ triển khai phần này sau
};
});

Ở đây, chúng ta đang tạo một mô-đun AngularJS叫做 loginApp và một bộ điều khiển叫做 LoginController. Bộ điều khiển có một đối tượng user với các thuộc tính username và password, và một hàm login mà chúng ta sẽ triển khai sau.

3. Xây dựng biểu mẫu đăng nhập

Bây giờ chúng ta đã có cấu trúc cơ bản, hãy thêm biểu mẫu đăng nhập vào HTML của chúng ta:

<form ng-submit="login()">
<label for="username">Tên đăng nhập:</label>
<input type="text" id="username" ng-model="user.username" required>

<label for="password">Mật khẩu:</label>
<input type="password" id="password" ng-model="user.password" required>

<button type="submit">Đăng nhập</button>
</form>

Biểu mẫu này sử dụng các hướng dẫn AngularJS như ng-submit và ng-model. Hướng dẫn ng-submit gọi hàm login() của chúng ta khi biểu mẫu được gửi, trong khi ng-model liên kết các giá trị đầu vào với đối tượng user trong bộ điều khiển.

4. Triển khai hàm đăng nhập

Hãy cập nhật hàm login trong bộ điều khiển của chúng ta:

$scope.login = function() {
if ($scope.user.username === 'admin' && $scope.user.password === 'password') {
$scope.message = 'Chào mừng, ' + $scope.user.username + '!';
} else {
$scope.message = 'Tên đăng nhập hoặc mật khẩu không hợp lệ.';
}
};

Hàm này kiểm tra xem tên đăng nhập và mật khẩu đã nhập có khớp với các giá trị cứng mã hóa của chúng ta hay không. Trong một ứng dụng thực tế, bạn thường sẽ kiểm tra chúng chống lại cơ sở dữ liệu.

5. Hiển thị kết quả đăng nhập

Để hiển thị kết quả đăng nhập, thêm đoạn này vào HTML của bạn:

<p>{{message}}</p>

Cặp dấu ngoặc kép {} là cách AngularJS hiển thị dữ liệu từ bộ điều khiển trong giao diện người dùng.

6. Thêm một chút phong cách

Hãy làm cho ứng dụng của chúng ta trông đẹp hơn với một chút CSS. Thêm đoạn này vào tệp HTML của bạn:

<style>
body {
font-family: Arial, sans-serif;
max-width: 300px;
margin: 0 auto;
padding: 20px;
}
input, button {
display: block;
margin: 10px 0;
width: 100%;
padding: 5px;
}
</style>

7. Ứng dụng hoàn chỉnh

Dưới đây là tệp index.html hoàn chỉnh của chúng ta:

<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>Ứng dụng Đăng nhập AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 300px;
margin: 0 auto;
padding: 20px;
}
input, button {
display: block;
margin: 10px 0;
width: 100%;
padding: 5px;
}
</style>
</head>
<body ng-controller="LoginController">
<h1>Xin chào đến ứng dụng Đăng nhập của chúng tôi</h1>
<form ng-submit="login()">
<label for="username">Tên đăng nhập:</label>
<input type="text" id="username" ng-model="user.username" required>

<label for="password">Mật khẩu:</label>
<input type="password" id="password" ng-model="user.password" required>

<button type="submit">Đăng nhập</button>
</form>
<p>{{message}}</p>
</body>
</html>

Và đây là tệp app.js hoàn chỉnh của chúng ta:

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

app.controller('LoginController', function($scope) {
$scope.user = {
username: '',
password: ''
};

$scope.login = function() {
if ($scope.user.username === 'admin' && $scope.user.password === 'password') {
$scope.message = 'Chào mừng, ' + $scope.user.username + '!';
} else {
$scope.message = 'Tên đăng nhập hoặc mật khẩu không hợp lệ.';
}
};
});

8. Kết luận

Chúc mừng! Bạn đã tạo thành công ứng dụng đăng nhập AngularJS đầu tiên của mình. Chúng ta đã bao gồm rất nhiều nội dung, từ việc thiết lập mô-đun AngularJS và bộ điều khiển đến việc tạo biểu mẫu với kết nối dữ liệu hai chiều và triển khai một hàm đăng nhập đơn giản.

Nhớ rằng, đây chỉ là phần nổi của tảng băng khi nói đến AngularJS. Khi bạn tiếp tục hành trình của mình, bạn sẽ khám phá nhiều tính năng mạnh mẽ hơn giúp bạn xây dựng các ứng dụng web phức tạp, tương tác.

Dưới đây là bảng tóm tắt các khái niệm AngularJS chính mà chúng ta đã sử dụng:

Khái niệm	Mô tả
Mô-đun	Một容器 cho các phần khác nhau của ứng dụng
Bộ điều khiển	Quản lý dữ liệu và hành vi của ứng dụng
Hướng dẫn	Mở rộng HTML với các thuộc tính và phần tử tùy chỉnh
Kết nối dữ liệu hai chiều	Đồng bộ hóa dữ liệu giữa mô hình và giao diện người dùng
Biểu thức	Truy cập các biến và hàm từ phạm vi

Tiếp tục thực hành, hãy luôn tò mò và chúc bạn may mắn trong việc lập trình!

Credits: Image by storyset

Hướng Dẫn Trước:

AngularJS - Ứng dụng Bootstrap

Hướng Dẫn Tiếp Theo:

AngularJS - Tải lên tệp