sử dụng Restangular trong AngularJs

Giới thiệu

Xu hướng phát triển web hiện tại đang ủng hộ AngularJS.Đây là 1 framework khá phổ biến cho client side.Cá nhân tôi thì rất thích AngularJs vì đấy là công cụ phát triển web khá là nhanh và nó cũng khá là hữu ích cho các ứng dụng mobile .
Restangular là 1 services của AngularJS giúp thực hiện các request GET/POST/PUT/DELETE trở nên đơn giản và dễ dàng hơn.Các bước config để sử dụng Restangular:

Configuration

Sử dụng npm để cài đặt Restangular vào hệ thống:

$ npm install restangular

Ta có thể khai báo Restangular service vào Angular objects:

angular.module('your-app', ['restangular']);

hoặc

angular.module('myApp')
.controller('MainController', ['$scope', 'Restangular',
  function($scope, Restangular) {
  }]);

Note: nếu thêm Rastangular trực tiếp vào trong module app thì sẽ là 'restangular' còn nếu thêm vào controller thì là Restangular.

Khai báo BaseUrl

Thực hiện khai báo baseUrl sử dụng trong Restangular:

angular.module('myApp')
  .config(function(RestangularProvider) {
    RestangularProvider.setBaseUrl('https://api.mongolab.com/api/1/databases/ngnewsletter/collections');
  });

Get method trong Restangular

để sử dụng Restangular, có các cách để khởi tạo các object ban đầu :

//get all message
var messageService = Restangular.all('message'),

Ta cũng có thể truyền ID để lấy thông tin 1 user bằng cách:

//get all users
var oneMessage = Restangular.one('message', 'abc123');

Post method trong Restangular
Dưới đây là ví dụ thực hiện việc thêm mới message vào trong list

// POST to /messages
var newMessage = {
  body: "Hello world"
};
messageService.post(newMessage);

Put method trong Restangular
Dưới đây là ví dụ thực hiện việc edit message:

// PUT to /messages/Id
var newMessage = {
  body: "Hello world"
};
oneMessage.put(newMessage);

Delete method trong Restangular
Dưới đây là ví dụ thực hiện việc xóa message:

// DELETE to /messages/Id
oneMessage.remove();

Demo cấu trúc 1 file js khi sử dụng restangular

<script type="text/javascript">
  (function() {
    angular.module('restangularDemoApp', [
      'restangular',
      'ngCookies'
    ])
    .constant('apiKey', 'sKoiVlWRICg3e3QUtHQGUGL7ZtabgKUP')
    .config(function(RestangularProvider, apiKey) {
      RestangularProvider.setBaseUrl('https://api.mongolab.com/api/1/databases/ngnewsletter/collections');
        RestangularProvider.setDefaultRequestParams({
          apiKey: apiKey
        })
        RestangularProvider.setRestangularFields({
          id: '_id.$oid'
        });

        RestangularProvider.setRequestInterceptor(
          function(elem, operation, what) {

            if (operation === 'put') {
              elem._id = undefined;
              return elem;
            }
            return elem;
      })
    })
    .factory('Messages', [
      '$rootScope', '$cookieStore', 'Restangular',
      function($rootScope, $cookieStore, Restangular) {
        var messageService = Restangular.all('message'),
            authorService =  Restangular.all('authors');

        var service = {
          thisAuthor: function() {
            var author;
            if (!$cookieStore.get('thisAuthor')) {
              author = {
                id: guid()
              };
              $cookieStore.put('thisAuthor', author);
              authorService.post(author);
            } else {
              author = $cookieStore.get('thisAuthor');
            }
            return author;
          },
          addMessage: function(msg) {
            var newMsg = msg;
            newMsg.author = service.thisAuthor().id;
            newMsg.createdAt = new Date();
            $rootScope.$broadcast('messages:added');
            return messageService.post(newMsg);
          },
          getMessages: function() {
            return messageService.getList();
          },
          removeMessage: function(msg) {
            $rootScope.$broadcast('messages:removed');
            return msg.remove();
          },
          updateMessage: function(msg) {
            $rootScope.$broadcast('messages:updated');
            return msg.put();
          },
          getAuthorMessages: function() {
            var params = {
              author: service.thisAuthor().id
            };
            return messageService.getList({q: params});
          }
        };
        return service;
      }
      ])
    .controller('MessageController', [
      '$scope', '$timeout', 'Messages', 'Restangular',
      function($scope, $timeout,
          Messages, Restangular) {
        var thisAuthor = Messages.thisAuthor(),
            updateMessageTimeout = undefined;

        $scope.showEdit = false;
        $scope.editMessage = undefined;
        Messages.getMessages().then(function(data) {
          $scope.messages = data;
        })

        var updateMessages = function() {
          if (updateMessageTimeout) $timeout.cancel(updateMessageTimeout);

          updateMessageTimeout = $timeout(function() {

            $scope.$apply(function() {
              Messages.getMessages().then(function(d) {
                $scope.messages = d;
              });
            });
          }, 500);
        }

        $scope.$on('messages:added', updateMessages);
        $scope.$on('messages:removed', updateMessages);
        $scope.$on('messages:updated', updateMessages);

        $scope.showEditMessage = function(msg) {
          $scope.editMessage = Restangular.copy(msg);
          $scope.showEdit = true;
        }

        $scope.saveEdit = function() {
          Messages.updateMessage($scope.editMessage)
            .then(function(data) {
            $scope.editMessage = undefined;
            $scope.showEdit = false;
          });
        }

        $scope.addMessage = function() {
          Messages.addMessage($scope.newMessage);
          $scope.authorMessagesEmpty = false;
          $scope.newMessage = {};
        };

        $scope.removeMessage = function(msg) {
          Messages.removeMessage(msg);
        }

        $scope.authorMessagesEmpty = false;
        $scope.getAuthorMessages = function() {
          Messages.getAuthorMessages().then(function(d) {
            if (d.length === 0) {
              $scope.authorMessagesEmpty = true;
            } else {
              $scope.authorMessages = d;
            }
          });
        }
      }]);
  })();
</script>