AngularJS Includes: Tái sử dụng mã HTML

Includes trong AngularJS là một cách hiệu quả để tái sử dụng các đoạn mã HTML trong ứng dụng của bạn. Chúng giúp bạn tổ chức mã và tăng tính bảo trì của ứng dụng.

Sử dụng ng-include

Directive ng-include được sử dụng để bao gồm một đoạn mã HTML từ một file khác.

HTML

<div ng-include="'myTemplate.html'"></div>

Tạo một template

Tạo một file HTML chứa đoạn mã HTML mà bạn muốn bao gồm.

HTML

<p>Đây là một template.</p>

Truyền dữ liệu vào template

Bạn có thể truyền dữ liệu vào template bằng cách sử dụng một đối tượng.

HTML

<div ng-include="'myTemplate.html'" ng-controller="MyController">
</div>

JavaScript

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.name = 'World';
  });

Sử dụng ng-include với một biểu thức

Bạn có thể sử dụng một biểu thức để xác định tên của file template.

HTML

<div ng-include="'myTemplate{{ templateName }}.html'"></div>

Các tính năng của Includes

• Tái sử dụng mã HTML: Bao gồm các đoạn mã HTML từ các file khác.
• Truyền dữ liệu: Truyền dữ liệu vào template.
• Định dạng động: Sử dụng biểu thức để xác định tên của file template.

Các ứng dụng của Includes

• Tạo các component tái sử dụng được.
• Tổ chức mã ứng dụng.
• Tăng tính bảo trì của ứng dụng.