Tiếng Việt

Hướng dẫn AngularJS

Ứng dụng AngularJS

AngularJS - Ứng dụng Ghi Chú: Xây Dựng Ứng Dụng Web Đầu Tiên Của Bạn

Xin chào, các bạn đang học lập trình! Tôi rất vui mừng được hướng dẫn các bạn bắt đầu hành trình thú vị để tạo ra ứng dụng web đầu tiên của mình sử dụng AngularJS. Như một người đã dạy lập trình hơn một thập kỷ, tôi có thể đảm bảo rằng cuối cùng của bài hướng dẫn này, các bạn sẽ có một ứng dụng ghi chú hoạt động và hiểu rõ các kiến thức cơ bản về AngularJS. Hãy cùng bắt đầu nào!

AngularJS - Notepad Application

AngularJS Là Gì?

Trước khi bắt đầu lập mã, hãy cùng 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ư khung công tác cung cấp cấu trúc và công cụ giúp quá trình xây dựng ngôi nhà của bạn dễ dàng và có tổ chức 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.

Thiết lập Môi Trường Phát Triển

Trước tiên, chúng ta cần thiết lập không gian làm việc. Đừng lo lắng; nó đơn giản hơn việc thiết lập một bàn làm việc thực tế!

  1. Mở trình soạn thảo văn bản yêu thích của bạn (tôi khuyến nghị Visual Studio Code cho người mới bắt đầu).
  2. Tạo một thư mục mới gọi là "AngularJS-Notepad".
  3. Trong thư mục này, tạo ba tệp:
  • index.html
  • app.js
  • style.css

Tạo Cấu Trúc HTML

Hãy bắt đầu với tệp index.html của chúng ta. Đây giống như bản vẽ của ngôi nhà.

<!DOCTYPE html>
<html ng-app="notepadApp">
<head>
<title>AngularJS Notepad</title>
<link rel="stylesheet" href="style.css">
<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="NotepadController">
<h1>My Notepad</h1>
<textarea ng-model="noteContent"></textarea>
<p>Số ký tự: {{noteContent.length}}</p>
</body>
</html>

Hãy phân tích này:

  • ng-app="notepadApp": Điều này告诉 AngularJS rằng đây là gốc của ứng dụng của chúng ta.
  • ng-controller="NotepadController": Điều này xác định bộ điều khiển nào nên quản lý phần trang này.
  • ng-model="noteContent": Điều này liên kết textarea với một biến叫做 noteContent trong bộ điều khiển của chúng ta.
  • {{noteContent.length}}: Đây là một biểu thức hiển thị độ dài của ghi chú của chúng ta.

Thêm Style Cho Ứng Dụng

Bây giờ, hãy thêm một chút style cơ bản để làm cho ghi chú của chúng ta trông đẹp hơn. Trong tệp style.css, thêm:

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

textarea {
width: 100%;
height: 200px;
margin-bottom: 10px;
}

h1 {
color: #333;
}

CSS này sẽ đặt nội dung của chúng ta ở giữa, đặt phông chữ đẹp và style textarea và tiêu đề.

Tạo Ứng Dụng AngularJS

Bây giờ hãy làm phần thú vị - hãy làm cho ghi chú của chúng ta sống động với AngularJS! Trong tệp app.js của bạn:

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

app.controller('NotepadController', function($scope) {
$scope.noteContent = '';
});

Hãy phân tích này:

  1. Chúng ta tạo một mô-đun AngularJS tên là 'notepadApp'.
  2. Chúng ta xác định một bộ điều khiển tên là 'NotepadController'.
  3. Trong bộ điều khiển, chúng ta khởi tạo noteContent là một chuỗi trống.

Thêm Nhiều Tính Năng

Bây giờ chúng ta đã có một ghi chú cơ bản, hãy thêm một số tính năng để làm cho nó hữu ích hơn!

1. Tính Năng Lưu và Tải

Hãy thêm nút để lưu và tải ghi chú. Cập nhật HTML của bạn:

<body ng-controller="NotepadController">
<h1>My Notepad</h1>
<textarea ng-model="noteContent"></textarea>
<p>Số ký tự: {{noteContent.length}}</p>
<button ng-click="saveNote()">Lưu Ghi Chú</button>
<button ng-click="loadNote()">Tải Ghi Chú</button>
</body>

Và cập nhật app.js của bạn:

app.controller('NotepadController', function($scope) {
$scope.noteContent = '';

$scope.saveNote = function() {
localStorage.setItem('savedNote', $scope.noteContent);
alert('Ghi chú đã được lưu!');
};

$scope.loadNote = function() {
$scope.noteContent = localStorage.getItem('savedNote') || '';
alert('Ghi chú đã được tải!');
};
});

Ở đây, chúng ta sử dụng localStorage để lưu và tải ghi chú. Hãy tưởng tượng nó như một quyển sổ nhỏ mà trình duyệt của bạn có thể ghi chú lại thông tin để nhớ sau này.

2. Tính Năng Đếm Từ

Hãy thêm tính năng đếm từ. Cập nhật HTML của bạn:

<p>Số ký tự: {{noteContent.length}} | Số từ: {{wordCount()}}</p>

Và thêm hàm này vào bộ điều khiển của bạn trong app.js:

$scope.wordCount = function() {
return $scope.noteContent.split(/\s+/).filter(function(n) { return n != '' }).length;
};

Hàm này chia nội dung ghi chú bằng khoảng trống và đếm các phần tử không phải trống, cho chúng ta biết số từ.

Kết Hợp Tất Cả

Dưới đây là bảng tóm tắt các hướng dẫn AngularJS và biểu thức chúng ta đã sử dụng:

Hướng dẫn/Biểu thức Mục Đích
ng-app Xác định gốc của ứng dụng AngularJS
ng-controller Xác định bộ điều khiển để sử dụng cho phần HTML
ng-model Liên kết giá trị của các控件 với dữ liệu ứng dụng
ng-click Xác định biểu thức AngularJS để đánh giá khi phần tử được nhấp
{{expression}} Xuất giá trị của biểu thức

Chúc mừng! Bạn đã vừa xây dựng ứng dụng AngularJS đầu tiên của mình. Chúng ta đã bao gồm các kiến thức cơ bản về việc thiết lập ứng dụng AngularJS, sử dụng bộ điều khiển, làm việc với các mô hình và thậm chí lưu trữ dữ liệu cục bộ.

Nhớ rằng, học lập trình giống như học một ngôn ngữ mới. Nó đòi hỏi sự luyện tập, kiên nhẫn và kiên trì. Đừng nản lòng nếu điều gì đó không hiểu ngay lập tức - đó đều là một phần của quá trình học tập. Hãy thử nghiệm với ứng dụng ghi chú của bạn, thử thêm các tính năng mới và quan trọng nhất là, hãy vui vẻ!

Trong những năm dạy học của tôi, tôi đã thấy rất nhiều học sinh đi từ người mới bắt đầu đến trở thành những nhà phát triển thành thạo. Bạn đang trên cùng hành trình thú vị đó. Hãy tiếp tục lập mã, tiếp tục học hỏi, và trước khi bạn nhận ra, bạn sẽ xây dựng các ứng dụng web phức tạp một cách dễ dàng!

Credits: Image by storyset

Hướng Dẫn Trước:
AngularJS - Ứng dụng ToDo
Hướng Dẫn Tiếp Theo:
AngularJS - Ứng dụng Bootstrap