AngularJS - Ứng dụng In-line

Giới thiệu

Xin chào các bạnAngularJS tương lai! Tôi rất vui mừng được làm hướng dẫn viên cho bạn trong hành trình đầyExciting vào thế giới của các ứng dụng AngularJS in-line. Là một người đã dạy lập trình trong nhiều năm hơn tôi muốn thừa nhận (hãy nói rằng tôi nhớ khi các đĩa mềm thực sự柔软), tôi có thể đảm bảo với bạn rằng vào cuối bài hướng dẫn này, bạn sẽ tự tin tạo ra ứng dụng AngularJS in-line đầu tiên của mình.

AngularJS - In-line Application

什么是 In-line Application?

Trước khi chúng ta nhảy vào mã, hãy hiểu chúng ta muốn nói gì bằng "ứng dụng in-line". Hãy tưởng tượng bạn đang ở một tiệc buffet (theo dõi tôi ở đây, tôi诺言 rằng ví dụ này sẽ có ý nghĩa). Một ứng dụng in-line giống như việc có tất cả các món ăn yêu thích của bạn trên một đĩa - mọi thứ bạn cần đều ở đó, sẵn sàng để sử dụng. Trong thuật ngữ AngularJS, điều này có nghĩa là chúng ta sẽ viết toàn bộ ứng dụng của mình trong một tệp HTML duy nhất. Không có tệp JavaScript riêng biệt, không có mô-đun bên ngoài - chỉ có纯粹的, không bị pha trộn AngularJS tốt.

Thiết lập Ứng dụng In-line Đầu tiên của Bạn

Bước 1: Khung HTML

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

<!DOCTYPE html>
<html>
<head>
<title>Ứng dụng In-line 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>

</body>
</html>

Điều này có thể quen thuộc nếu bạn đã từng làm việc với phát triển web trước đây. Nếu không, đừng lo lắng! Chúng tôi chỉ đang thiết lập một tài liệu HTML cơ bản và bao gồm thư viện AngularJS từ một Content Delivery Network (CDN). Hãy nghĩ về điều này như việc mời AngularJS đến buổi tiệc lập trình của chúng ta.

Bước 2: Thêm chỉ thị ng-app

Bây giờ, hãy cho AngularJS biết ứng dụng của chúng ta ở đâu:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Ứng dụng In-line 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>

</body>
</html>

Chúng ta đã thêm ng-app="myApp" vào thẻ <html>. Điều này giống như đặt một biển lớn trước nhà bạn nói, "AngularJS sống ở đây!" Phần myApp là tên chúng ta đang đặt cho ứng dụng của mình.

Tạo Controller Đầu tiên của Bạn

Controller là gì?

Trong AngularJS, một controller giống như não của ứng dụng của bạn. Nó quản lý dữ liệu và hành vi của một phần cụ thể của ứng dụng. Hãy tạo một cái!

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Ứng dụng In-line 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 ng-controller="MainController">
<h1>{{greeting}}</h1>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Hello, AngularJS World!";
});
</script>
</body>
</html>

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

Chúng ta đã thêm ng-controller="MainController" vào thẻ <body>. Điều này告诉 AngularJS phần nào của HTML được kiểm soát bởi controller này.
Trong thẻ <script>, chúng ta tạo module ứng dụng với angular.module('myApp', []).
Chúng ta sau đó xác định controller của mình bằng cách sử dụng app.controller(). Tham số $scope là cách chúng ta truyền dữ liệu giữa controller và view (HTML của chúng ta).
Chúng ta đặt một thuộc tính greeting trên $scope. Điều này làm cho nó khả dụng trong HTML của chúng ta.
Trong HTML, chúng ta sử dụng {{greeting}} để hiển thị giá trị của greeting.

Thêm Tương tác Người dùng

Hãy làm cho ứng dụng của chúng ta tương tác hơn bằng cách thêm một nút thay đổi lời chào:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Ứng dụng In-line 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 ng-controller="MainController">
<h1>{{greeting}}</h1>
<button ng-click="changeGreeting()">Thay đổi Lời Chào</button>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Hello, AngularJS World!";
$scope.changeGreeting = function() {
$scope.greeting = "Greetings, Earthling!";
};
});
</script>
</body>
</html>

Đây là những gì mới:

Chúng ta đã thêm một nút với chỉ thị ng-click. Điều này告诉 AngularJS để gọi hàm changeGreeting() khi nút được nhấp.
Trong controller của chúng ta, chúng ta đã xác định hàm changeGreeting() trên $scope. Hàm này thay đổi giá trị của greeting.

Kết nối Dữ liệu trong Hoạt động

Một trong những tính năng mạnh mẽ nhất của AngularJS là binding hai chiều dữ liệu. Hãy xem nó trong hành động:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Ứng dụng In-line 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 ng-controller="MainController">
<h1>{{greeting}}</h1>
<input type="text" ng-model="name">
<p>Xin chào, {{name}}!</p>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Welcome to our AngularJS App!";
$scope.name = "Anonymous";
});
</script>
</body>
</html>

Trong ví dụ này:

Chúng ta đã thêm một trường nhập với ng-model="name". Điều này liên kết giá trị của trường nhập với thuộc tính name trên $scope.
Chúng ta hiển thị giá trị của name trong đoạn văn bằng cách sử dụng {{name}}.
Khi bạn gõ vào trường nhập, bạn sẽ thấy lời chào cập nhật theo từng thời điểm. Đó là phép màu của binding hai chiều dữ liệu!

Kết luận

Chúc mừng! Bạn vừa tạo ra ứng dụng AngularJS in-line đầu tiên của mình. Chúng ta đã bao gồm các основ của việc thiết lập một ứng dụng AngularJS, tạo một controller, xử lý tương tác người dùng và thực hiện binding hai chiều dữ liệu. Nhớ rằng, như bất kỳ kỹ năng mới nào, việc thành thạo AngularJS đòi hỏi phải gyakorlat. Vậy đừng ngần ngại thử nghiệm, làm hỏng và học từ những sai lầm của bạn. Đó là cách chúng ta đều trở thành những nhà phát triển như ngày nay!

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

Chỉ thị	Mục đích
ng-app	Xác định và khởi động một ứng dụng AngularJS
ng-controller	Xác định một controller cho một phần của ứng dụng
ng-click	Xác định một hàm để chạy khi một phần tử được nhấp
ng-model	Liên kết một trường nhập, chọn hoặc textarea với một thuộc tính trên `$scope`

Tiếp tục lập mã, tiếp tục học và quan trọng nhất, hãy vui vẻ! Nhớ rằng, mọi chuyên gia đều từng là người mới bắt đầu. Hành trình AngularJS của bạn mới chỉ bắt đầu!

Credits: Image by storyset

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

AngularJS - Tải lên tệp

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

AngularJS - Menu Điều hướng