AngularJS - Bao gồm: Hướng dẫn cho người mới bắt đầu

Xin chào, các nhà phát triển AngularJS tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới của AngularJS bao gồm. Là một người đã dạy lập trình hơn một thập kỷ, tôi có thể告诉 bạn rằng việc thành thạo bao gồm sẽ làm cho cuộc sống của bạn dễ dàng hơn rất nhiều. Vậy, chúng ta hãy cùng bắt đầu nào!

AngularJS - Includes

AngularJS bao gồm là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu xem bao gồm là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Bạn sẽ không tạo từng viên gạch từ đầu, đúng không? Bạn sẽ sử dụng các thành phần đã预制. Đó chính xác là điều mà bao gồm làm trong AngularJS - chúng cho phép bạn tái sử dụng các đoạn HTML trên toàn bộ ứng dụng của bạn.

Tại sao sử dụng bao gồm?

Tái sử dụng: Viết một lần, sử dụng nhiều lần!
Dễ bảo trì: Cập nhật ở một nơi, thay đổi sẽ phản ánh ở mọi nơi.
Mã sạch sẽ hơn: Giữ cho tệp HTML chính của bạn gọn gàng.

Cách sử dụng AngularJS bao gồm

Hãy bắt đầu với một ví dụ đơn giản. Hãy tưởng tượng bạn có một trang web với một header mà bạn muốn hiển thị trên mọi trang.

Ví dụ 1: Bao gồm cơ bản

Đầu tiên, tạo một tệp叫做 header.html với nội dung header của bạn:

<!-- header.html -->
<div>
<h1>Chào mừng đến với trang web tuyệt vời của tôi</h1>
<nav>
<a href="#home">Trang chủ</a>
<a href="#about">Về chúng tôi</a>
<a href="#contact">Liên hệ</a>
</nav>
</div>

Bây giờ, trong tệp HTML chính của bạn, bạn có thể bao gồm header này bằng cách sử dụng chỉ thị ng-include:

<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-include="'header.html'"></div>

<!-- Phần nội dung còn lại của trang -->
</body>
</html>

Khi bạn chạy điều này, AngularJS sẽ lấy nội dung của header.html và chèn nó vào nơi có chỉ thị ng-include. Đó là phép thuật, phải không?

Ví dụ 2: Bao gồm động

Nếu bạn muốn thay đổi nội dung được bao gồm dựa trên một điều kiện nào đó, AngularJS cũng có thể giúp bạn!

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myController">
<div ng-include="templateUrl"></div>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.templateUrl = 'header.html';

$scope.changeTemplate = function() {
$scope.templateUrl = 'footer.html';
};
});
</script>

<button ng-click="changeTemplate()">Thay đổi thành Footer</button>
</body>
</html>

Trong ví dụ này, chúng ta sử dụng một biến templateUrl để xác định tệp mẫu nào sẽ được bao gồm. Nhấn nút sẽ thay đổi nội dung bao gồm từ header thành footer.

Kỹ thuật nâng cao

Ví dụ 3: Truyền dữ liệu vào bao gồm

Đôi khi, bạn có thể muốn truyền dữ liệu vào mẫu bao gồm. Dưới đây là cách bạn có thể làm điều đó:

<!-- greeting.html -->
<div>
<h2>Hello, {{name}}!</h2>
<p>Welcome to our {{type}} website.</p>
</div>

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myController">
<div ng-include="'greeting.html'" ng-init="name='John'; type='awesome'"></div>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
// Logic của controller ở đây
});
</script>
</body>
</html>

Trong ví dụ này, chúng ta sử dụng ng-init để truyền dữ liệu vào mẫu bao gồm. Các giá trị của name và type sẽ khả dụng trong tệp greeting.html.

Practices tốt nhất

Giữ đơn giản: Chỉ bao gồm những gì cần thiết.
Sử dụng đường dẫn tương đối: Làm cho mã của bạn dễ di chuyển hơn.
Lưu trữ các mẫu: Để có hiệu suất tốt hơn trong các ứng dụng lớn hơn.

Mối nguy hiểm phổ biến và cách tránh chúng

Quên dấu phẩy kép: Luôn bao bọc URL của bạn trong dấu phẩy kép.
Bao gồm lặp lại: Hãy cẩn thận không bao gồm một mẫu trong chính nó.
Sử dụng quá nhiều bao gồm: Mặc dù hữu ích, đừng lạm dụng. Quá nhiều bao gồm có thể làm cho ứng dụng của bạn khó hiểu hơn.

Kết luận

AngularJS bao gồm là một công cụ mạnh mẽ trong bộ công cụ phát triển web của bạn. Chúng giúp giữ cho mã của bạn DRY (Don't Repeat Yourself) và làm cho ứng dụng của bạn dễ bảo trì hơn. Nhớ rằng, thực hành làm cho hoàn hảo, vì vậy đừng ngại thử nghiệm với các kịch bản bao gồm khác nhau trong các dự án của bạn.

Khi chúng ta kết thúc, tôi nhớ lại một học sinh từng nói với tôi, "AngularJS bao gồm giống như các khối LEGO cho các trang web!" Và bạn biết đấy? Họ hoàn toàn đúng. Vậy hãy đi forth và xây dựng điều gì đó tuyệt vời với các khối LEGO mới của bạn!

Chúc mọi người viết mã vui vẻ!

Credits: Image by storyset