AngularJS 自定义服务详解-优快云博客

转自：https://www.cnblogs.com/best/tag/Angular/

自定义服务

AngularJS在内置服务中提供了大量的功能，不过这些服务不一定能满足你的需求，你可以通过自定义服务解决。可以将服务看作一个或多个相关任务的一块可重用代码。

创建自定义服务有4种主要类型：value,constant,factory,service

1.2.1、创建value服务

定义单个值的简单服务，模块的配置阶段是不可以使用的。
module.value('key',{color:'blue',value:'17'})

1.2.2、创建constant服务

也value服务一样，不过在模块的配置阶段是可以使和的。

module.value(“key”,”value”);

1.2.3、创建factory服务

提供了把功能实现到服务中的能力。

也可以把其它服务注入到factory中。

1.2.4、创建Service服务

factory是普通function，而service是一个构造器(constructor)，这样Angular在调用service时会用new关键字，而调用factory时只是调用普通的function，所以factory可以返回任何东西，而service可以不返回

示例代码：

 1 <!DOCTYPE html>
 2 <!--指定angular管理的范围-->
 3 <html ng-app="app01">
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>服务</title>
 7     </head>
 8     <body>
 9         <!--指定控制器的作用范围-->
10         <form ng-controller="Controller1" name="form1">
11             <p>
12                 半径：<input ng-model="r" ng-init="r=1"/>
13             </p>
14             <p>
15                 周长：{{circleLength}}
16             </p>
17             <p>
18                 面积：{{circleArea}}
19             </p>
20         </form>
21         <!--引入angularjs框架-->
22         <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
23         <script type="text/javascript">
24             //定义模块，指定依赖项为空
25             var app01 = angular.module("app01", []);
26             
27             //value服务
28             app01.value("i",100);
29             
30             //constant服务
31             app01.constant("PI",3.14);
32             
33             //factory服务
34             app01.factory("getArea",['i','PI',function(i,PI){
35                 return function(radius){
36                     return PI*(radius+i)*(radius+i);
37                 };
38             }])
39             
40             function circleMethod(i,PI,getArea){
41                 this.getLength=function(radius){
42                     return 2*PI*radius;
43                 };
44                 this.getSize=function(radius){
45                     return getArea(radius);
46                 }
47             }
48             //service服务
49             app01.service("circleService",circleMethod);
50             
51             //定义控制器，指定控制器的名称，$scope是全局对象
52             app01.controller("Controller1", function($scope,circleService) {
53                 $scope.$watch("r",function(){
54                     $scope.circleLength=circleService.getLength($scope.r);
55                     $scope.circleArea=circleService.getSize($scope.r);
56                 });
57             });
58         </script>
59     </body>
60 </html>