🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 简介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 Formstitle>   head>   body>     h2>AngularJS Sample Applicationh2>     div ng-app="mainApp" ng-controller="CalcController">      p>Enter a number: input type="number" ng-model="number" />      button ng-click="square()">Xsup>2sup>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。看到结果如下: ![](https://box.kancloud.cn/2016-03-02_56d6ad981bb74.jpg) ## 美文美图  ![](https://box.kancloud.cn/2016-03-02_56d6ad9832681.jpg)