12/08/2018, 10:51
Đôi nét về service trong angularjs
** 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 ...
**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
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
