Điểm nhấn của AngularJS-P1

Chao! (Tiếng Ý, không biết có đúng không nữa) Một tháng nữa lại về với hàng tá bài Report được post lên trên Viblo. Thú thực là mấy hôm nay mình đang loay hoay, tìm ra một chủ đề thiệt hay để viết report nhưng mãi vẫn không thấy được vấn đề chi đẹp-độc-lạ cả. Nên tới ngày ni, mình quyết định chia sẻ với mọi người một chủ đề mà trong quá trình tìm hiểu tài liệu khi học AngularJS cho dự án mới, mình đã đọc qua, đó là: Những điểm nhấn có trong AngularJS. (bowbowbow) Trước mình xin nói sơ qua một chút về AngularJS cho mọi người chưa có cơ hội tiếp xúc với ló cũng có thể nắm bắt ngay được những vấn đề mà mình sẽ chia sẽ trong bài post này (ngắn thooi:))) AngularJS là một framework nguồn mở được phát triển từ năm 2009 bởi Misko Hevery and Adam Abrons với một dự án tên là “GetAngular”.

1. Model-View_Controller

AngularJS đã đưa ra mô hình MVC vào thiết kết client side nhằm mục đích sắp xếp lại cấu trúc của ứng dụng cũng như giúp cho thiết kế, testing ứng dụng được hiệu quả hơn. Nhưng mô hình MVC trong AngularJS không hoàn toàn giống với mô hình MVC truyền thống mà nó hướng về mô hình MVVM (Model-View-ViewModel) hơn. Ví dụ: View:

<tbody  ng-app="Online" ng-controller="OrderController"> 
  <tr ng-repeat="item in items ">     
    <td> {{item.name | uppercase}}</td>   
    <td> <input type=text ng-model="item.price" > </td>
    <td> <input type=text ng-model="item.quantity"> /td>
    <td>{{item.price * item.quantity |currency}}</td>
  </tr>   
  <tr>
    <td>Tong Cong</td> 
    <td>{{Sum() |currency}}</td>
  </tr>   
</tbody>

Controller

 angular.module('Online', []);
    function OrderController($scope) {
      $scope.items = [
        { name: "TV", price: 1000, quantity: "1", 
          image: "Images	v.jpg" },
        { name: "Iphone 6", price: 1050, quantity: 
             "1", image: "ImagesIphone.jpg" },
      $scope.Sum = function () {
         var total = 0; for (count = 0; count < 
             $scope.items.length; count++)
            { total += $scope.items[count].price *  
              $scope.items[count].quantity; }
              return total;}
     $scope.title = 'Online Shop';}

Từ ví dụ 1, chúng ta thấy rằng AngularJS đưa ra mô hình thiết kế rất rõ ràng: * View: đơn thuần là một HTML template để hiển thị dữ liệu tới người sử dụng. Dữ liệu được lấy từ Model * Model: là dữ liệu để hiển thị lên View, trong thí dụ 1, Model là “items”, “Sum”, “title”. Model chỉ là plain old JavaScript objects, không sử dụng setter/getter để truy cập dữ liệu. Điều này giúp cho người lập trình giảm đáng kể số lượng dòng code. Model được đóng gói trong controller. * ViewMode: chính là “scope” trong ví dụ 1. “scope” là một JavaScript object rất quan trong trong mô hình MVC AngularJS bởi Controller và View là hoàn toàn độc lập nên “scope” là cầu nối, giữ liên kết giữa View và Controller. Nhiệm vụ của nó là phát hiện những thay đổi trong Model và thực thi các biểu thức liên quan đến những thay đổi này. * Controller: nơi thực thi các business logic, được xem như là code behind của View, là nơi Model hoạt động.

2. Two-Way Data Binding

Thông thường, một biến ở Model “items” gắn với một HTML element ở View. Nếu người sử dụng thay đổi giá trị ở View, như là nhập giá trị vào một text box đơn giá hay số lượng, thì người lập trình phải viết lệnh hay hàm cập nhật giá trị mới của text box vào Model. Nhưng trong ví dụ 1, không có bất kỳ đoạn code nào xử lý sự kiện của 2 text box “Don Gia” và “So Luong”, nhưng khi giá trị các text box này thay đổi thì những nơi sử dụng hai text box này như biểu thức {{item.DonGia * item.SoLuong |currency}} hay {{Sum() |currency}} đều được tự động cấp nhật. Đó là kỹ thuật đồng bộ dữ liệu rất hay giữa Model và View. Việc tự động đồng bộ dữ liệu giữa Model và View giúp người lập trình giảm đến hàng ngàn dòng code trong một dự án. Người lập trình chỉ cần định nghĩa mối quan hệ giữa Model và View, các event xử lý bên dưới sẽ do AngularJS quản lý. Nếu trước đây, mất bao nhiêu thời gian để đồng bộ dữ liệu giữa Model và View thì trong AngularJS, người lập trình chỉ cần tạo liên kết giữa Model và View thông qua “ng-model”. Việc định nghĩa mối quan hệ giữa Model và View cũng cực kỳ đơn giản, chỉ cần đặt các field của Model “item” vào HTML syntax như ví dụ 2 dưới đây:

 <tr ng-repeat="item in items ">     
       <td>{{item.name | uppercase}}</td>   
       <td> <input type=text ng-model="item.price"></td>
       <td> <input type=text ng-model="item.quantity"></td>
       <td>{{item.DonGia * item.SoLuong |currency}}</td>
    </tr> 

3. Sự linh hoạt của Filter, Sort

AngularJS Filter được sử dụng để trích dữ liệu và định dạng dữ liệu. Người lập trình chỉ nói cho AngujarJS biết tôi đang cần cái gì hơn là phải đi làm công việc đó. Ví dụ 1 có những từ đầy đủ ý nghĩa, dể hiểu, đi sau kí tự “|” như là “currency”, “uppercase” chính cách để AngularJS định dạng dữ liệu trên UI như kiểu tiền tệ <td>{{item.price * item.quanlity |currency}}</td>, chữ hoa <td>{{item.name | uppercase}}</td>. Khi nhìn vào code, chúng ta có thể hiểu ngay mục đích và ý nghĩa của câu lệnh. Ngoài những kiểu định dạng chuẩn như “lowercase”, “number”, AngularJS hỗ trợ người lập trình xây dựng riêng những kiểu định đạng kiểu dữ liệu khác như datetime, hay thay thế các ký tự đặt biệt... Ví dụ 3 - tạo một custom filter thay thế ký tự đặc biệt trong chuỗi: Filter.js

   var app = angular.module('Online', []);
    app.filter('replaceSpecialCharacter', function () {
        return function (name) {
            return name.replace(/[^ws]/gi, ');
        };}); 
        Filter.JS định nghĩa một hàm “'replaceSpecialCharacter'” dùng thay thế ký tự đặt biệt thành khoảng trắng. Bất kỳ dữ liệu nào trên UI cần thay thế các ký tự đặc biệt, chỉ cần đặt “'replaceSpecialCharacter'” sau chuỗi như 
    <td> {{item.name|'replaceSpecialCharacter'} </td>. 

Các file filter chỉ là các POJO class, nên nó hoàn toàn có thể xây dựng thành thư viện cho các project sau. Trích dữ liệu và sắp sếp dữ liệu trong AngularJS cũng cực kỳ đơn giản và rất hiệu quả. Người lập trình cũng chỉ nói cho AngularJS biết tôi muốn trích dữ liệu gì và sắp sếp field nào, theo thứ tự tăng hay giảm. Từ ví dụ 1, giả sử cần có chức năng tìm kiếm và sắp sếp theo “price”, trong phần View chỉ cần thêm vài dòng code như thí dụ dưới đây: Tìm kiếm và sắp sếp dữ liệu:

      <tr>         
           <td>Tim Kiem Ma Hang: <input ng-model="search"></td> 
        </tr>
        <tr> <td> Sap xep theo Gia: 
            <select ng-model="SortPrice">
                <option value="">-- Sap xep --</option>
                <option value="price">Tang</option>
                <option value="-price">Giam</option>
             </select>
        </td></tr> 
        <tr ng-repeat=" item in items |filter:search|orderBy:SortPrice">     
            <td>{{item.name}}</td>  
        …  
        </tr> 

Trên đây là một vài thông tin vui vui dành cho những ai có nhu cầu tìm hiểu về AngularJS nhé, trong phần 2 của chủ đề, mình xin giới thiệu với các bạn một và cái hay còn lại của AngularJS.

BYE BYE...