Thiết kế website giá rẻ tại Seo Việt

Chi Phí Tiết Kiệm - Hiệu Quả Tối Đa

» Tài Liệu AngularJS » Bài 2: Tìm hiểu hoạt động của Data Binding trong AngularJs

Bài 2: Tìm hiểu hoạt động của Data Binding trong AngularJs

Hoạt động của data binding trong AngularJS ra sao? Sau khi bạn đã tìm hiểu sơ lược về Ngôn ngữ lập trình AngularJS là gì? ở bài 1. Công ty thiết kế website Seo Việt chúng tôi xin giới thiệu tiếp đến các bạn kiến thức tiếp theo là: tìm hiểu quy trình hoạt động của Data Binding trong AngularJS.

Hoạt động của data binding trong AngularJS là gì?

Mỗi ngôn ngữ lập trình điều có cách thức hoạt động khách nhau và có nét đặc thù riêng, vì vậy data binding trong AngularJS được hiểu như sau: Data Binding trong AngularJs chính là các thức tự động đồng bộ (synchronization) dữ liệu giữa Model và View trong AngularJs. Thông qua quá trình hoạt động của Data Binding cho phép bạn tạo sự liên kết, ràng buộc giữa Model và Template thông qua một ứng dụng AngularJs (ng-app). Trong qus trình thao tác dữ liệu khi có bất kỳ sự thay đổi nào ở model, dữ liệu sẽ được phản ánh ngay tức  và thể hiện dễ dàng cho người dùng nhìn thấy đó chính là Template và ngược lại. Vậy bạn đã hiểu về hoạt động của Data Binding chưa?

Quy trình hoạt động của Data Binding

Bài 2: Tìm hiểu hoạt động của Data Binding trong AngularJs

Bài 2: Tìm hiểu hoạt động của Data Binding trong AngularJs

Thông qua sơ đồ mô tả này bạn có thể hiểu rõ hơn về quy trình hoạt động của Data Binding trong ngôn ngữ lập Trình AngularJS. Đầu tiên AngularJS compile Template ra ngoài View giúp cho người dùng dễ dàng thấy được (chẳng hạn như là 1 ô textbox, lable, checkbox…). Khi có bất kì thày đổi trên View này, Với bất kỳ thay đổi nào trên Template. Thì tự động dữ liệu này sẽ ngay lập tự được đồng bộ vào bên trong Model. Và chức năng bên trong Model có nhiệm vụ xử lý dữ liệu, cập nhật lại thay đổi ngay lập tức thể hiện ra View. Vì thế dữ liệu được trung chuyển từ Model sang View hay từ View sang Model là một thể thống nhất. Quá trình hoạt động của Data Binding được cập nhật liên tục.

Để hiểu rõ hơn quá trình hoạt động Data Binding mời bạn tìm hiểu rõ hơn thông qua Ví Dụ cụ thể

Đó là các bạn sẽ thấy 1 ô input kiểu text (tượng trưng cho Model trong AngularJS) có thuộc tính ng-model là “text”. Khi bạn gõ bất kỳ dữ liệu gì vào ô text này, dữ liệu sẽ tự động đồng bộ ra bên ngoài view {{text}}, như hình minh họa dưới đây.

quá trình hoạt động Data Binding mời bạn tìm hiểu rõ hơn thông qua Ví Dụ cụ thể

quá trình hoạt động Data Binding Ví Dụ cụ thể

Và đây là toàn bộ code của ví dụ trên. Bạn hãy tự thực hành lại bằng cách mở chương trình Notepad++ hay bất cứ chương trình soạn thảo. Và hãy nhớ một điệu nếu bạn muốn giỏi code thì hãy tự tay mình gõ vào, đừng xử dụng biện pháp copy, past.

<!DOCTYPE html>

<html>
<head>
  <script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script>
   <meta charset=“UTF-8”>
</head>
<body>
<div ngapp>
  <h1>Ví dụ Data Binding</h1>
  <br />
  <div>
    Điền bất kỳ dữ liệu gì: <input type=“text” ng-model=“text”>
  </div>
  <div>
    Dữ liệu được binding >>> {{text}}
  </div>
</div>
</body>
</html>
Thông qua ví dụ cụ thể và có lẫn code công ty thiết kế website chuyên nghiệp tại Seo Việt hy vọng giúp ích cho nhiều bạn đang cố gắn tìm hiểu về ngôn ngữ lập trình AngularJS. Sau ví dụ này bạn hãy tạo và đưa ra cho mình nhiều ví dụ cụ thể hơn nữa để hiểu được thế nào là quá trình hoạt động của ngôn ngữ AngularJS. Mình xin dừng lại ở đây và qua bài sau mình sẽ chia sẽ cho các bạn hiểu được quá trình hoạt động của Controller trong AngularJs.Hãy tìm hiểu thật nhiều ví dụ về quá trình hoạt động của ngôn ngữ AngularJS nó sẽ giúp ích bạn rất nhiều nếu bạn xác định đi theo và phấn đấu trở thành người thiết kế website giỏi

Liên hệ với công ty thiết kế website Seo Việt

Công Ty TNHH SEO VIỆT
6 Đường D52, Phường 12, Quận Tân Bình, Hồ Chí Minh, Việt Nam
61 đường Nguyễn Minh Hoàng, Phường 12, Quận Tân Bình, Thành Phố Hồ Chí Minh
Điện thoại:0901.251.256 – 090.7735.456
Email: seowishviet@gmail.com
Đánh giá bài viết

08/03/2016 - Thể loại : Tài Liệu AngularJS - Tab : ,

  • Thông tin liên hệ
Follow on Feedly