Tiếng Việt

Hướng dẫn AngularJS

Ứng dụng AngularJS

AngularJS - Ứng dụng Bootstrap

Xin chào các bạn 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 và học cách khởi tạo một ứng dụng. 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 từng bước qua quá trình này, đảm bảo bạn hiểu rõ từng đoạn mã chúng ta viết. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu nhé!

AngularJS - Bootstrap Application

AngularJS là gì?

Trước khi chúng ta bắt đầu khởi tạo ứng dụng, hãy dành một chút thời gian để hiểu AngularJS là gì. AngularJS là một khung công tác JavaScript mạnh mẽ giúp chúng ta xây dựng các ứng dụng web động. Nó giống như một cây kéo đa năng cho các nhà phát triển web, cung cấp các công cụ để làm cho cuộc sống của chúng ta dễ dàng hơn và mã của chúng ta có tổ chức hơn.

Hãy tưởng tượng AngularJS như một trợ lý hữu ích giúp tổ chức mã của bạn và làm cho việc tạo các trang web tương tác trở nên dễ dàng hơn. Nó giống như có một người bạn siêu thông minh giúp bạn xây dựng những điều tuyệt vời!

Khởi tạo một ứng dụng AngularJS

Bây giờ, hãy đến với phần thú vị - khởi tạo ứng dụng AngularJS của chúng ta. Khởi tạo chỉ là một cách nói hoa mỹ để nói "bắt đầu" hoặc "khởi động" ứng dụng của chúng ta. Nó giống như quay chìa khóa trong ổ khóa của xe của bạn - nó khởi động mọi thứ!

Bước 1: Thiết lập HTML

Đầu tiên, chúng ta cần tạo một tệp HTML sẽ служить nền tảng cho ứng dụng AngularJS của chúng ta. Hãy gọi nó là index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Ứng dụng AngularJS đầu tiên của tôi</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h1>Chào mừng đến với ứng dụng AngularJS của tôi!</h1>
<div ng-controller="MainController">
<p>{{ message }}</p>
</div>
<script src="app.js"></script>
</body>
</html>

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

  1. Thuộc tính ng-app="myApp" trong thẻ <html> cho biết đây là phần tử gốc của ứng dụng của chúng ta.
  2. Chúng ta bao gồm thư viện AngularJS bằng một thẻ <script>.
  3. Chúng ta có một <div> với ng-controller="MainController". Đây sẽ là nơi chúng ta hiển thị nội dung động của mình.
  4. {{ message }} là một placeholder cho dữ liệu mà chúng ta sẽ định nghĩa trong JavaScript.
  5. Chúng ta liên kết đến tệp app.js, mà chúng ta sẽ tạo tiếp theo.

Bước 2: Tạo tệp JavaScript

Bây giờ, hãy tạo tệp app.js của chúng ta:

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

app.controller('MainController', function($scope) {
$scope.message = "Xin chào, thế giới AngularJS!";
});

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

  1. Chúng ta tạo một mô-đun Angular tên là 'myApp' sử dụng angular.module('myApp', []).
  2. Chúng ta xác định một controller tên là 'MainController' sử dụng app.controller().
  3. Trong controller, chúng ta đặt $scope.message thành lời chào của chúng ta. Điều này sẽ được hiển thị trong HTML của chúng ta ở nơi có {{ message }}.

Hiểu rõ phép thuật

Bây giờ, bạn có thể tự hỏi, "Làm thế nào để tất cả những điều này hoạt động cùng nhau?" Câu hỏi tuyệt vời! Hãy để tôi giải thích:

  1. Khi trang tải, AngularJS tìm kiếm hướng dẫn ng-app. Điều này cho biết AngularJS bắt đầu làm việc từ đâu.
  2. Nó sau đó tìm kiếm mô-đun chúng ta đã xác định (myApp) và khởi tạo nó.
  3. Tiếp theo, nó tìm thấy hướng dẫn ng-controller và kết nối nó với MainController của chúng ta.
  4. Controller đặt message trên $scope, giống như một người đưa tin giữa JavaScript và HTML của chúng ta.
  5. Cuối cùng, AngularJS thay thế {{ message }} trong HTML của chúng ta bằng thông điệp thực tế mà chúng ta đã xác định.

Nó giống như một vũ điệu được choreographed tốt, với mỗi phần chơi vai trò của mình hoàn hảo!

Mở rộng ứng dụng của chúng ta

Bây giờ chúng ta đã có những điều cơ bản, hãy thêm một chút chức năng vào ứng dụng của chúng ta. Chúng ta sẽ tạo một danh sách công việc đơn giản:

Cập nhật index.html của bạn:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Ứng dụng To-Do AngularJS của tôi</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h1>Danh sách công việc của tôi</h1>
<div ng-controller="TodoController">
<input type="text" ng-model="newTask">
<button ng-click="addTask()">Thêm công việc</button>
<ul>
<li ng-repeat="task in tasks">{{ task }}</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>

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

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

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

$scope.addTask = function() {
if($scope.newTask) {
$scope.tasks.push($scope.newTask);
$scope.newTask = '';
}
};
});

Hãy phân tích những gì mới:

  1. Chúng ta đã thêm một trường nhập với ng-model="newTask". Điều này tạo ra một liên kết hai chiều giữa trường nhập và $scope.newTask.
  2. ng-click="addTask()" trên nút cho biết AngularJS sẽ gọi hàm addTask() khi được nhấp.
  3. ng-repeat="task in tasks" tạo ra một mục danh sách cho mỗi công việc trong mảng tasks.
  4. Trong JavaScript, chúng ta khởi tạo $scope.tasks với hai công việc.
  5. Hàm addTask() thêm công việc mới vào mảng và làm sạch trường nhập.

Kết luận

Chúc mừng! Bạn đã khởi tạo thành công ứng dụng AngularJS đầu tiên của mình và thậm chí đã thêm một chút chức năng vào nó. Hãy 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ự thực hành và kiên nhẫn. Nhưng với mỗi bước, bạn đang trở nên thành thạo hơn trong ngôn ngữ của phát triển web.

Khi chúng ta kết thúc, đây là bảng tóm tắt các hướng dẫn AngularJS chính mà chúng ta đã sử dụng:

Hướng dẫn Mục đích
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 sẽ được sử dụng cho phần tử HTML
ng-model Tạo một liên kết hai chiều dữ liệu
ng-click Xác định hàm nào sẽ được chạy khi phần tử được nhấp
ng-repeat Lặp lại một phần HTML cho mỗi mục trong một mảng

Tiếp tục khám phá, tiếp tục lập trình, và quan trọng nhất, tiếp tục vui vẻ! Thế giới phát triển web là rộng lớn và thú vị, và bạn đã bước những bước đầu tiên vào nó. Hẹn gặp lại lần sau, chúc bạn lập trình vui vẻ!

Credits: Image by storyset

Hướng Dẫn Trước:
AngularJS - Ứng dụng Ghi chú
Hướng Dẫn Tiếp Theo:
AngularJS - Ứng dụng Đăng nhập