$templateCache trong AngularJS

Bài đăng này đã không được cập nhật trong 9 năm

Introduction

Trong AngularJS, có rất nhiều cách để bạn có thể customize templates trong hệ thống của bạn. Bài viết này sẽ giới thiệu cách sử dụng và các điểm khác nhau giữa các cách dùng template .

Sử dụng Templates với String

Khởi tạo trang index

<!DOCTYPE html>
<html>
<head>
  <title>$templateCache</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular-route.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-app="app">
  <div ng-view></div>
</body>
</html>

và code js cho trang index

(function(){

  function TestCtrl() {
    this.user = {name: 'Blake'};
  }

  angular.module('app', ['ngRoute'])
  .config(function($routeProvider){
    $routeProvider.when('/', {
      controller: 'TestCtrl as test',
      template: 'Hello {{ test.user.name }}!'
    })
    .otherwise('/');
  })
  .controller('TestCtrl', TestCtrl);

})()

Trong đoạn code template: 'Hello {{ test.user.name }}!', tôi đã truyền trực tiếp template mà ta muốn sử dụng vào trong controller TestCtr. Tuy nhiên tôi không khuyến khích sử dụng cách làm này vì nó sẽ gây khó khăn cho việc maintain lại template. Angular sẽ khuyên nên sử dụng templageUrl để chỉ dẫn đến 1 template phức tạp hơn.

Sử dụng Remote Template

Khởi tạo trang test.html với những thông tin mà bạn cần hiển thị.

<!DOCTYPE html>
<html>
  Hello {{ test.user.name }}
</html>

function TestCtrl() {
  this.user = {name: 'Blake'};
}

angular.module('app', ['ngRoute'])
.config(function($routeProvider){
  $routeProvider.when('/', {
    controller: 'TestCtrl as test',
    templateUrl: 'test.html'
  })
  .otherwise('/');
})
.controller('TestCtrl', TestCtrl);

VIệc sử dụng nhiều templateURL sẽ giúp bạn chia các logic ra thành các thành phần nhỏ hơn ,dễ sử dụng hơn.Tuy nhiên có 1 vấn đề về performence nếu như bạn sử dụng quá nhiều template.VIệc này làm cho server sẽ phải download rất nhiều template về trước khi hiển thị ra view cho bạn.Để khắc phục tình trạng này thì AngularJS có hỗ trợ bạn 1 services $templateCache .

Sử dụng $templateCache

$templateCache là 1 service, chúng ta không thể truy cập trực tiếp vào config phase của app. Cách dễ dàng nhất để có thể truy cập $templateCache là ở trong function run. Angular modules cho phép chúng ta có thể tạo đc n function run() tùy thích.

function TestCtrl($templateCache) {
  this.user = {name: 'Blake'};

  console.log($templateCache.get('test.html'));
}

angular.module('app', ['ngRoute'])
.config(function($routeProvider){
  $routeProvider.when('/', {
    controller: 'TestCtrl as test',
    templateUrl: 'test.html'
  })
  .otherwise('/');
})
.controller('TestCtrl', TestCtrl);

angular.module('app').run(function ($templateCache){
  $templateCache.put('test.html', 'Hello {{ test.user.name }}!');
});

Giờ mỗi khi bạn Reload() lại page, Bạn sẽ không thấy có thêm 1 request đc gọi để lấy template test.html . 1 số tài liệu giúp bạn sử dụng $templateCache:

grunt-angular-templates cho grunt
gulp-angular-templatecache cho gulp
angular-rails-templates cho Rails/Sprockets

nếu bạn sử dụng remote templateUrl chỉ duy nhất 1 điểm khác biệt là bạn cần thêm function run() để sử dụng cho $templateCache. Bên cạnh đó, ban cũng ko cần phải thay đổi cách truy cập vào templates thông qua templateUrl vì Angular sẽ tự động gọi ngược remote template nếu như ko thể tìm thấy template đã được khai báo trong $templateCache

JavaScript HTML

Mục lục