第九章 Service、Factory与Provider

最新推荐文章于 2022-01-29 20:42:26 发布

原创最新推荐文章于 2022-01-29 20:42:26 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJS #前端 #服务

AngularJS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了AngularJS中的服务，包括Service、Factory、Provider、Value和Constant。Service是单例对象，封装业务逻辑；Factory通过返回对象实例提供服务；Provider在config阶段可配置，$get方法返回服务实例；Value和Constant用于保存应用信息，不可修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Service、Factory与Provider都是AngularJS种的可注入类型，这意味着我们可以通过依赖注入机制将它们注入控制器或其他方法中。除此之外，还有另外两种可注入类型，即Value和Constant。这些可注入类型对象统称AngularJS服务

一、Service

1.AngularJS的Service是封装了一些特定业务逻辑的单例对象，它在每个应用中只会被实例化一次(由$injector实例化)，并且是懒加载的(需要时才被创建)，它对外提供一些方法供其他组建调用。例如，AngularJS内置的$timeout对象、$location对象。	

AngularJS提供了约30个内置Service对象，只需要通过依赖注入机制把它注入需要使用这些Service的组件中即可

--------------------------------------------------------------------------------------------------------------------

var app=angular.module("myApp",[]);

app.controller("MainController",function($scope,$location){

$scope.myUrl=$location.absUrl();

});

--------------------------------------------------------------------------------------------------------------------

2.AngularJS的模块实例提供了一个service()方法，用于注册一个自定义的Service，该方法接收两个参数，第一个参数为Service的名称，第二个参数是Service对象的构造方法，在构造方法中我们可以定义一些成员属性及成员方法来封装一些处理逻辑

3.在我们自定义的Service中可以注入其他Service对象，如$interval对象

--------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html ng-app="app">

<head>

	<meta charset="utf-8">

	<title>angularjs</title>

	<script type="text/javascript" src="angular-1.5.5/angular.min.js"></script>

</head>

<body>

	<div ng-controller="MainContrller"></div>

	<script type="text/javascript">

var app=angular.module("app",[]);

app.service('myService',function($interval){

this.sayHello=function(){

alert("This is my service!");

}

this.outputMsg=function(){

var i=0;

$interval(function(){

i++;

console.info("function is called"+i+"times");

},3000);

}

});

app.controller("MainContrller",function($scope,myService){

myService.sayHello();

myService.outputMsg();

});

</script>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------

二、Factory

1.Factory是AngularJS中另一种可注入类型，可以使用AngularJS模块实例的factory()方法创建自定义的Factory，本质上和Service并没有太大区别

2.factory()方法，第一个参数为Factory对象名称，和service方法不同的是，它的第二个参数并不是Factory的构造方法，而是一个普通方法，该方法必须返回一个对象实例

3.在自定义Factory中也是可以注入其他可注入类型

--------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html ng-app="app">

<head>

	<meta charset="utf-8">

	<title>angularjs</title>

	<script type="text/javascript" src="angular-1.5.5/angular.min.js"></script>

</head>

<body>

	<div ng-controller="MainContrller">

	</div>

	<script type="text/javascript">

		var app=angular.module("app",[]);

		app.factory('myFactory',function(){

			return {

				sayHello:function(){

					alert("This is my service!");

}

}

});

		app.controller("MainContrller",function($scope,myFactory){

			myFactory.sayHello();

});

	</script>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------

三、Provider

1.Provider是AngularJS中的服务提供者，是一种比较灵活的可注入类型，可以通过config()方法对Provider进行配置，例如$route服务。可以通过模块实例的provider()方法创建自定义的Provider

2.provider()方法的第一个参数为自定义Provider的名称，第二个参数为Provider对象的构造方法，构造方法分两部分组成：

第一部分为普通的成员属性和方法，这些成员属性和方法可以在模块实例的

config()方法中访问，在往config()方法注入时，Provider对象名称后面需要追

加"Provider"

第二部分的变量或方法由$get()成员方法返回，Provider对象构造方法必须有一个

$get()成员方法，否则会抛出异常。$get()方法返回的内容可以在注入该Provider对象

的控制器或其他组件中通过直接调用构造方法来调用或获取

--------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html ng-app="app">

<head>

	<meta charset="utf-8">

	<title>angularjs</title>

	<script type="text/javascript" src="angular-1.5.5/angular.min.js"></script>

</head>

<body>

	<div ng-controller="MainContrller"></div>

	<script type="text/javascript">

		var app=angular.module("app",[]);

		app.provider("custom",function(){

			this.name="Smith";

			this.sayHello=function(){

				alert("hello "+this.name);

}

			this.$get=function(){

				var name=this.name;

				return function(){

					alert("Hello "+name);

}

}

});

		app.config(function(customProvider){

			customProvider.sayHello();

			customProvider.name="Schuyler";

});

		app.controller('MainContrller',function(custom){

			custom();

});

	</script>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------

四、Value&Constant

Value和Constant时AngularJS中另外两种相对简单的可注入类型，用于保存应用程序的相关信息，类似于配置文件的键值对，AngularJS模块实例分别提供了value()和constant()方法，用于创建Value和Constant对象，两个方法使用方式相同，第一个参数为对象名称，第二个参数为对象的值

--------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html ng-app="app">

<head>

	<meta charset="utf-8">

	<title>angularjs</title>

	<script type="text/javascript" src="angular-1.5.5/angular.min.js"></script>

</head>

<body>

	<div ng-controller="MainContrller"></div>

	<script type="text/javascript">

		var app=angular.module("app",[]);

		app.value("CONFIG","app.properties");

		app.constant('version',"0.0.1");

		app.controller('MainContrller',function(version,CONFIG){

			console.log("app version:"+version);

			console.log("config file:"+CONFIG);

});

	</script>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------