AngularJS 服務(wù)(Service)

AngularJS支持使用服務(wù)體系結(jié)構(gòu)的關(guān)注點(diǎn)分離的概念。服務(wù)是JavaScript函數(shù)，僅負(fù)責(zé)執(zhí)行特定任務(wù)。這使它們成為可維護(hù)和可測試的單個實(shí)體?？刂破骱瓦^濾器可以根據(jù)需要調(diào)用它們。通常使用AngularJS的依賴項(xiàng)注入機(jī)制注入服務(wù)。

AngularJS提供了許多內(nèi)置服務(wù)。例如，$http，$route，$window，$location等。每個服務(wù)負(fù)責(zé)特定任務(wù)，例如$http用于進(jìn)行ajax調(diào)用以獲取服務(wù)器數(shù)據(jù)，$route用于定義路由信息，等等。內(nèi)置服務(wù)始終以$符號為前綴。

創(chuàng)建服務(wù)有兩種方法-

Factory（工廠）
Service（服務(wù)）

使用Factory（工廠）方法

在此方法中，我們首先定義一個工廠，然后為其分配方法。

var mainApp = angular.module("mainApp", []);mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   
   return factory;});

使用 Service（服務(wù)）方法

在此方法中，我們定義一個服務(wù)，然后為其分配方法。我們還向它注入了已經(jīng)可用的服務(wù)。

mainApp.service('CalcService', function(MathService) {
   this.square = function(a) {
      return MathService.multiply(a,a);
   }});

在線示例

以下示例顯示了上述所有指令的使用-

testAngularJS.htm

示例

<html>
   <head>
      <title>Angular JS Services</title>
      <script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS 服務(wù)(Service)應(yīng)用示例 </h2>
      
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>輸入一個數(shù)字: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>結(jié)果: {{result}}</p>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.factory('MathService', function() {
            var factory = {};
            
            factory.multiply = function(a, b) {
               return a * b
            }
            return factory;
         });
         mainApp.service('CalcService', function(MathService) {
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });
         mainApp.controller('CalcController', function($scope, CalcService) {
            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });
      </script>
      
   </body>
</html>

測試看看?/?

輸出結(jié)果

圖片.png

在網(wǎng)絡(luò)瀏覽器中打開文件testAngularJS.htm并查看結(jié)果。

AngularJS 依賴注入 AngularJS Scope(作用域)

AngularJS 基礎(chǔ)教程

AngularJS 服務(wù)(Service)

使用Factory（工廠）方法

使用 Service（服務(wù)）方法

在線示例

testAngularJS.htm