angularjs 五种服务用法

最新推荐文章于 2023-06-30 15:51:28 发布

大春子

最新推荐文章于 2023-06-30 15:51:28 发布

阅读量1.3k

点赞数

分类专栏： angularjs

本文链接：https://blog.youkuaiyun.com/chun1570754603/article/details/83829854

版权

angularjs 专栏收录该内容

8 篇文章

订阅专栏

每个controller层控制着不同的html，修改其中一个controller中数据信息不会影响另外的controller里的数据信息（每个控制层之间不会相互影响），如果想每个控制层都有共用的方法，可以把共用的写到angular的服务里，这些服务都要注入到controller中，在控制器中使用。下边先简单介绍value，constant,factory,service,provider,这5种服务的的基本用法，然后举个例子。

value

用来定义值。与 constant 的区别是：value可以被修改(被后边的值覆盖)，可以被 decorator 装饰，不能被注入到 config 中。

//第一种------第一个参数是服务名称，第二个是常量
app.value('myValue', '11111111')

//第二种----第一个参数是服务名称，第二个是obj对象
app.value('myValue',{
    name:'kk',
    age:12,
    getId:function(){
        return 1;
    }
});

constant

用于定义常量。一般一旦定义就不能被改变。可以被注入到任何地方，但是不能被装饰器(decorator)装饰。

//第一种------第一个参数是服务名称，第二个是常量
app.constant('myConstant', '11111111')

//第二种----第一个参数是服务名称，第二个是obj对象
app.constant('myConstant',{
    name:'kk',
    age:12,
    getId:function(){
        return 1;
    }
});

factory

factory 返回一个对象。app.factory('name',function(){return obj}) ----- name是服务名

比如使用$http来获取一些数据.我们就在factory创建的服务里抓取数据,最后返回.

它和constant,value最大的区别是,factory服务是有一个处理过程,经过这个过程,才返回结果的.

//第一种方式----看得出来，factory 的第二个参数就是provider中$get要对应的函数实现。
app.factory('myFactory', function(){ 
 return { 
  a ： 'hello'; 
   b ：function(){};
 } 
})

//第二种方式
app.factory('myFactory', function(){ 
var f = {}; 
f.a = 'hello'; 
f.b = function(){};
 return f; 
})


//第三种方式-------相当于service服务写法
app.factory('myFactory',function(){
    return new conFun()
});

function conFun(){
    this.name ="lili";
    this.age = 12;
    this.getId = function(){
        return 1;
    }
}

service

service 类似于一个构造器，通过 new 关键字实例化对象，将一些属性和方法直接添加到 this 上，在创建 service 对象时， this 会被作为返回值返回。

//第一种格式
app.service('myService',function(){ 
  this.name ='lili'; 
  this.age =12; 
  this.getId = function(){ 
    return 1;
  } 
}); 

//第二种格式---------跟factory的方法类似，只是不需要写new新对象
app.service('myService',consFun);
    function consFun(){ 
    this.name ="lili";
    this.age = 12;
    this.getId = function(){
        return 1;
    }
}

provider

只有provder是能注入到.config() 函数中；在config函数里注入provider时，名字应该是：providerName+Provider，比如provider的服务名叫myProvider，注入时: .confige('',myProviderProvider'')。你可以在Provider对象传递到应用程序的其他部分之前在app.config函数中对其进行修改（这也是与factory不同的地方，factory不能修改）。
provider服务的第二个参数的返回值中必须要有$get方法(除了$get,还可以有其它方法),$get方法就相当于factory服务的第二个参数,最后要返回一个对象,这个对象就是真正被注入的服务。也就是说当你使用Provider创建一个服务时，唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。

app.provider('服务名称',function(){
　　....
　　return {  //return一定要写
　　　　...
　　　　$get:function(){ //$get一定要写，真正被注入的就是$get
　　　　　　...
　　　　　　return obj对象
　　　　}
     }
})

事例：

html代码：

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>服务</title>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/angular.min.js"></script>
	<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
	<div ng-controller="ctrl1" id="d1">
		<h4>控制器:：：：：：{{ctrl}}</h4>
		<h4>value::：：：：：{{va}}</h4>
		<h4>constant:：：：：：{{cons}}</h4>
		<h4>factory.name:：：：：：{{name}}</h4>
		<h4>factory方法返回值:：：：：：{{fid}}</h4>
		<h4>service.age:：：：：：{{age}}</h4>
		<h4>性别:：：：：：{{sex}}</h4>
		<h4>provider.$get:：：：：：{{p_fun}}</h4>
	</div>
</body>
</html>

js代码：

angular.module("app",[])
.value("v",'value1')
.value("v",'value2')
.constant("c",'cons111')
.constant("c",'cons222')
.factory("f",function () {
	return{
		name:"张三",
		getId:function () {
			// console.log("factory方法")
			return 1;
		}
	}
})
.service("s",function () {
	this.age=12;
	this.getFun=function () {}
})
.provider('myProvider',function () {
	var a=666;
	//一定要有return,否则报错
	return{
		//真正被注入到控制器的是$get里的数据，所以sex在页面打印不出来
		sex:'男',
	    $get:function () {
		 return{
		   setp:function () {
			return a;		
		    }	
		}	
	}
  }
})
.config(function(myProviderProvider){
    myProviderProvider.sex = '女';
})
.controller("ctrl1",['$scope','v','c','f','s','myProvider',function ($scope,v,c,f,s,myProvider) {
	$scope.ctrl="ctrl1";
	$scope.va=v;
	$scope.cons=c;
	$scope.name=f.name;
	//getId()是方法，一定要带着括号
	$scope.fid=f.getId();
	$scope.age=s.age;
	$scope.sex=myProvider.sex;
	$scope.p_fun=myProvider.setp();

}])