Đôi nét về service trong angularjs

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

**1. Đặt vấn đề**

 ** Tại sao cần sử dụng các services?**

  Trong Angularjs để tối ưu hiệu năng cũng như bộ nhớ, Controller chỉ được khởi tạo khi cần và bị hủy đi khi không cần, nói cách khác mỗi lần thay đổi router hoặc reload thì controller mới được gọi. Chúng ta cần một method để lưu trữ dữ liệu trong suốt vòng đời của application và giao tiếp thông qua controller một cách nhất quán.

**2. Nội dung**

  2.1 Service là gì?
  - Service là một singleton object được khởi tạo 1 lần duy nhất cho mỗi ứng dụng(app).
  - Service cung cấp các phương thức lưu trữ dữ liệu xuyên suốt vòng đời của ứng dụng và cung cấp phương thức truy xuất dữ liệu thông qua controller một cách nhất quán.

**2.2 Cách tạo một service**

  Angularjs Service có thể được khởi tạo theo nhiều cách khác nhau:
    - Sử dụng service() method
    - Sử dụng factory () method
    - Sử dụng provider() method
    - Sử dụng value() method
    - Sử dụng constant() method

**Ví dụ 1**  Sử dụng service() method

  **Cú pháp**: module.service( 'serviceName', function());

```Actionscript

  var calculatorService = angular.module(calculatorService , [])
    .service('calculator', function(){
    $(this).square = function (x) { return x*x}
  })

Khai báo trong controller:


var myApp = angular.module('myApp', ['CalculatorService']);
myApp.controller('CalculatorController', function ($scope, Calculator) {

    $scope.findSquare = function () {
        $scope.answer = Calculator.square($scope.number);
    }
});

Tạo view cho phép người dùng nhập số liệu:


<div ng-controller="CalculatorController">
    Enter a number:
    <input type="number" ng-model="number">
    <button class="btn btn-danger" ng-click="findSquare()">Square</button>
    <div>{{answer}}</div>
  </div>

Kết quả thu được

Screenshot from 2015-07-30 00:29:48.png

Ví dụ 2 Sử dụng factory() method

Cú pháp: module.factory( 'factoryName', function());


  myApp.factory('checkEvenNumber', function($window)
  {
    return function(number)
    {
        if (number % 2 == 0) {
            $window.alert( number + " is even number");
        }
    };
  });

Controller:


    myApp.controller('MyController', ['$scope','checkEvenNumber', function ($scope, checkEvenNumber)
{
    $scope.checkEvenNumber = function() {
        checkEvenNumber($scope.number);
    };
}]);

View:


  <body ng-app="myServiceModule">
    <div id="simple" ng-controller="MyController">
      <p>add</p>
      <input ng-model="number" ng-change="checkEvenNumber()"/>
    </div>
  </body>

Sự khác nhau giữa service() method và factory() method: Service method:

service() không cần giá trị trả về, mọi thứ được assign vào biến this, biến này được ví như một base object.
factory(): luôn có giá trị trả về: class(constructor function), instance of class, string, number hoặc boolean

AngularJS

Mục lục