AngularJS - Ứng dụng Đầu tiên

Chào mừng 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. Là giáo viên máy tính gần gũi của bạn, tôi rất vui mừng được hướng dẫn các bạn qua ứng dụng AngularJS đầu tiên. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - chúng ta sẽ học từng bước, và trước khi bạn nhận ra, bạn sẽ tạo ra các ứng dụng web động như một chuyên gia!

AngularJS - First Application

Tạo Ứng dụng AngularJS

Hãy bắt đầu từ cơ bản. 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 tương tác. Hãy tưởng tượng nó như một bộ công cụ kỳ diệu làm cho các trang web của chúng ta sống động!

Để tạo ứng dụng AngularJS đầu tiên, chúng ta cần thiết lập một tệp HTML đơn giản. Dưới đây là cách nó trông như thế nào:

<!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>
<div ng-controller="myCtrl">
<h2>Hello, {{name}}!</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'Người mới bắt đầu AngularJS';
});
</script>
</body>
</html>

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

Chúng ta bắt đầu với một cấu trúc HTML tiêu chuẩn.
Thẻ ng-app="myApp" trong thẻ <html> cho biết AngularJS rằng này là phần tử gốc của ứng dụng chúng ta.
Chúng ta bao gồm thư viện AngularJS bằng cách sử dụng thẻ <script> trong phần <head>.
Trong <body>, chúng ta có một <div> với ng-controller="myCtrl". Điều này kết nối HTML của chúng ta với một bộ điều khiển AngularJS.
Trong <div> này, chúng ta có {{name}}. Đây là một biểu thức AngularJS sẽ hiển thị giá trị của name.
Cuối cùng, chúng ta có một thẻ <script> nơi chúng ta xác định module và bộ điều khiển AngularJS của mình.

Chạy Ứng dụng AngularJS

Bây giờ chúng ta đã tạo ra ứng dụng, hãy xem cách chạy nó:

Lưu mã trên vào một tệp có tên index.html.
Mở tệp này trong trình duyệt web (như Chrome hoặc Firefox).

Đó là tất cả! Ứng dụng AngularJS của bạn đang chạy. Có phải dễ dàng hơn bạn tưởng tượng không?

Kết quả

Khi bạn mở tệp index.html trong trình duyệt của bạn, bạn nên thấy:

Hello, Người mới bắt đầu AngularJS!

Phép màu, phải không? Nhưng làm thế nào để nó hoạt động? Hãy cùng tìm hiểu sâu hơn!

Làm thế nào AngularJS tích hợp với HTML

AngularJS tích hợp mượt mà với HTML thông qua những gì chúng ta gọi là "hướng dẫn". Đây là những thuộc tính đặc biệt cho biết AngularJS phải làm gì với một phần tử DOM. Hãy xem xét các hướng dẫn chính 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	Chỉ định bộ điều khiển nào để sử dụng cho phần tử HTML
{{ }}	Hiển thị giá trị của một biểu thức

Dưới đây là giải thích chi tiết hơn:

ng-app: Hướng dẫn này khởi tạo một ứng dụng AngularJS. Nó cho biết AngularJS nên kiểm soát phần này của trang. Trong ví dụ của chúng ta, chúng tôi đặt nó trên thẻ <html>, làm cho toàn bộ trang của chúng tôi trở thành một ứng dụng AngularJS.
ng-controller: Hướng dẫn này chỉ định một lớp bộ điều khiển JavaScript. Bộ điều khiển là nơi chúng ta xác định ứng dụng hành vi bằng cách xác định các hàm và giá trị. Trong ví dụ của chúng ta, myCtrl là bộ điều khiển của chúng ta.
{{ }}: Những dấu ngoặc kép kép này là biểu thức AngularJS. Chúng cho biết AngularJS đánh giá biểu thức bên trong và thay thế nó bằng kết quả. Trong trường hợp của chúng ta, {{name}} được thay thế bằng "Người mới bắt đầu AngularJS".

Bây giờ, hãy xem xét mã JavaScript của chúng ta:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'Người mới bắt đầu AngularJS';
});

angular.module('myApp', []) tạo một module AngularJS mới có tên 'myApp'. Điều này khớp với tên chúng ta đã sử dụng trong ng-app="myApp".
app.controller('myCtrl', function($scope) { ... }) xác định bộ điều khiển của chúng ta. $scope là một đối tượng đặc biệt hoạt động như một cầu nối giữa bộ điều khiển và giao diện người dùng (HTML của chúng ta).
$scope.name = 'Người mới bắt đầu AngularJS' đặt một thuộc tính trên $scope. Điều này cho phép chúng ta sử dụng {{name}} trong HTML của mình.

Và thế là bạn đã tạo ra và hiểu ứng dụng AngularJS đầu tiên của mình. Có phải nó thú vị không?

Nhớ rằng, học lập trình giống như học một ngôn ngữ mới. Nó có thể看起来 phức tạp ban đầu, nhưng với sự thực hành, nó trở thành bản năng thứ hai. Khi tôi lần đầu tiên dạy AngularJS, tôi có một học sinh rất bối rối bởi tất cả các dấu ngoặc kép đến mức anh ấy bắt đầu gọi nó là "ngôn ngữ lông mày"! Nhưng đến cuối khóa học, anh ấy đã tạo ra các ứng dụng phức tạp và cười nhạo sự bối rối ban đầu của mình.

Vậy đừng lo lắng nếu mọi thứ không ngay lập tức rõ ràng. Hãy tiếp tục thực hành, thử thay đổi mã (what happens if you change 'Người mới bắt đầu AngularJS' to your own name?), và quan trọng nhất, hãy vui vẻ! Trong bài học tiếp theo, chúng ta sẽ khám phá thêm các tính năng của AngularJS và bắt đầu xây dựng các ứng dụng phức tạp hơn. Đến那个时候, chúc các bạn viết mã vui vẻ!

Credits: Image by storyset

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

AngularJS - Kiến trúc MVC

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

AngularJS - Chỉ thị