写点什么

AngularJS 进阶 (三十三) 书海拾贝之简介 AngularJS 中使用 factory 和 service 的方法

  • 2022-12-08
    江苏
  • 本文字数:1197 字

    阅读完需:约 4 分钟

AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法

一、前言

AngularJS 支持使用服务的体系结构“关注点分离”的概念。服务是 JavaScript 函数,并负责只做一个特定的任务。这也使得他们成为维护和测试的单独实体。控制器,过滤器可以调用它们作为需求的基础。服务使用 AngularJS 的依赖注入机制注入正常。

      AngularJS 提供例如许多内在的服务,如:$http, $route, $window, $location 等。每个服务负责例如一个特定的任务,$http 是用来创建 AJAX 调用,以获得服务器的数据。$route 用来定义路由信息等。内置的服务总是前缀 $符号。

      这里介绍两种方法来创建服务:工厂、服务

二、使用工厂方法

      对于已经存在实例对象的服务,Factory 优先,直接返回这个对象。如:在多个 Controller 之间共享传递数据;对 $resource 的请求资源的封装。

      使用工厂方法,我们先定义一个工厂,然后分配方法给它。


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

三、使用服务方法

      对于需要 new 创建的服务而言,则 Service 优先,Angular 会自动 new 并创建这个对象实例。Service 更容易组织一组相同业务逻辑的 API,使得业务逻辑更加的内聚。

使用服务的方法,我们定义了一个服务,然后分配方法。还注入已经可用的服务。


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

四、例子

下面的例子将展示上述所有指令。

testAngularJS.html


<html><head>  <title>Angular JS Forms</title></head><body>  <h2>AngularJS Sample Application</h2>  <div ng-app="mainApp" ng-controller="CalcController">   <p>Enter a number: <input type="number" ng-model="number" />   <button ng-click="square()">X<sup>2</sup></button>   <p>Result: {{result}}</p>  </div>  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  <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>
复制代码

结果

在 Web 浏览器打开 textAngularJS.html。看到结果如下:



发布于: 刚刚阅读数: 3
用户头像

No Silver Bullet 2021-07-09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法_service_No Silver Bullet_InfoQ写作社区