Series Hướng dẫn xây dựng ứng dụng bán hàng bằng angular js kết hợp với Rails(Phần 3)

Định hướng việc cần làm

Chào các bạn! Đã lâu tôi mới lại tiếp tục với series xây dụng app bán hàng bằng angular js. Cũng bởi vì nhiều lý do. Tôi cần tập trung cho công việc một cách tốt hơn, rất xin lỗi các bạn. Thôi lan man nữa, chúng ta lại tiếp tục những phần chúng ta đã đi qua nào. Hôm nay mình sẽ lọc các sản phẩm giá từ 0 đến giá cao nhất nhé. Cứ giả định là có sản phẩm free nhé ^^ Việc đầu tiên là các bạn hay quan sát vào thanh slider kéo giá:

• Giá trị thấp nhất sẽ có thuộc tính là data-slider-min sẽ là giá nhỏ nhất của sản phẩm
• Tương tự data-slider-max là giá cao nhất của sản phẩm
• data-slider-step là giá trị thay đổi mỗi lần bạn kéo
• data-slider-value là giá trị của slider Để bắt giá trị này gửi lên server thì ta có thể dùng sự kiện ng-click và chúng ta sẽ phải cần thêm 1 button, sau đó đẩy giá trị qua service của angular từ đó ném lên server xử lý. Lý do chúng ta ko request lên server bằng ng-change là nhằm để hạn chế bớt request gửi lên một cách liên tục Code slider sẽ là:

<div class="price-range"><!--price-range-->
  <h2>Price Range</h2>
  <div class="well text-center">
      <input id="ex1" data-slider-id='ex1Slider' type="text" ng-model="vm.priceSlider"
      data-slider-min="0" data-slider-max="60000" data-slider-step="1" data-slider-value="14"/>
     <b class="pull-left">$ 0</b> <b class="pull-right">$ 60000</b><br><br>
    <button class="btn btn-info btn-sm btn-block" ng-click="vm.getPriceSlider()"><i class="fa fa-check"></i></button>
  </div>
</div>

Để gửi được request lên server thì chúng ta sẽ xử lý click button và sẽ cần sự hỗ trợ của Service của angular js. Code service:

'use strict';

angular.module('eshopApp')
  .factory('filterItemService', ['common', filterItemService]);


function filterItemService(common) {
  return {
    filterByPrice: filterByPrice,
  };

  function filterByPrice(params) {
    var url = '/' + '?price_range=' + params;
    return common.ajaxCall('GET', url, params);
  }
}

xin nói một chút, ở trong cú pháp return {...} mình cần phải khai báo những hàm mà mình định nghĩa ở trong Service. Như thế thì mới gọi từ bên ngoài được.

  function filterByPrice(params) {
    var url = '/' + '?price_range=' + params;
    return common.ajaxCall('GET', url, params);
  }

Hàm này sẽ gửi request lên sever với 1 params có key là price_range như chúng ta đã đặt tên cho nó. Để xử lý lấy ra các item có giá từ 0 đến giá chúng ta kéo bằng slider thì ta phải truy vấn lại bằng scope

  scope :in_range, ->max_range{where(price: 0..max_range.to_i)}

Code controller sẽ trả về data như sau:

return unless request.format.json?
    render json: {
      newest_items: Item.in_range(params[:price_range]).newest
    }

Và Client angular js cũng sẽ nhận data như sau:

vm.filterPrice = function(){
    // var priceSlider = vm.priceSlider;
    var priceSlider = angular.element('.priceslider').val();
    filterItemService.filterByPrice(priceSlider).then(function(res) {
      vm.itemNewest = res.newest_items;
    }, function(err){
      // do some thing when send request error!
    });
  }

Để làm được điều này chúng ta cần inject file source code thư viện vào bằng cú pháp inject:

headerController.$inject = ['filterItemService', 'common', 'Flash'];

function headerController(filterItemService, common, Flash) {
//...
}

Các bạn lưu ý ở đoạn mình comment trong hàmvm.filterPrice. Để lấy được params từ slider thì mình có thể lấy trong 2 cách sau, tức là vừa có thể lấy theo cú pháp của angular và angular cũng phát triển một cách lấy data khá giống với selector của jQuery trong function(err) chúng ta có thể làm gì tuỳ thích, có thể bắn ra msg lỗi, chuyển về root page vv... Bây giờ các bạn thử kéo slider và submit xem kết quả item hiển thị có khác nhau không nhé.

Kết

Mình cũng không muốn làm bài trình bày quá dài thì các bạn sẽ lười theo dõi, cùng lùi lại xem hôm nay chúng ta đã đi qua những gì nào:

• Biết cách đẩy request lên server side bằng angular
• Học được cách viết 1 service angular như thế nào
• Hiểu được cơ chế binding data của angular Cũng không được nhiều lắm, nhưng bài khá dài rồi đúng không ^^ Vậy nhé hôm nay mình sẽ chốt ở đây. Hẹn gặp lại các bạn ở series sau.