AngularJS中的provider,factory,service方法

最新推荐文章于 2018-07-24 14:24:48 发布
最新推荐文章于 2018-07-24 14:24:48 发布
阅读量72 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/516845
版权

使用$provide中的provider方法定义服务

       前面已经知道了module的定义为angular.module(name,[requires],configFn);configFn参数是配置服务的。ng供服务的过程涉及它的依赖注入机制。AngularJS是用$provider对象来实现自动依赖注入机制的。$provide.provider是一种定义服务的方法。注入机制通过调用provider的$get方法，把得到的对象作为参数进行相关的调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
< html  ng-app = "app" >
 
< head >
     < meta  charset = "utf-8" >
</ head >
 
< body  ng-app = "app" >
     < div  ng-controller = "Controller1" ></ div >
     < script  src = "http://cdn.bootcss.com/angular.js/1.4.1/angular.js" ></ script >
     < script  type = "text/javascript" >
     angular.module('app', [], function($provide) {
         //自定义服务
         $provide.provider('helloService', function() {
             this.$get = function() {
                 return {
                     message: 'how are you ?'
                 }
             }
         });
     })
 
     .controller('Controller1', function($scope, helloService) {
         console.log(helloService);
     });
     </ script >
</ body >
 
</ html >

        定义了名字叫helloService的服务，通过$get方法，让helloService就等于$get返回的对象。在控制器Controller1中，用到了helloService这个服务，就将它写在参数列表里。这里可以看出$scope也是一个服务。在控制台打印出helloService，结果如下：

wKioL1WOW9GhqHePAABn47kDtaY009.jpg

        上面这种方法一般不会用，因为有更加简便的方法，比如$provide里的factory和service方法。


$provide中的factory和service方法

       factory方法和service方法可以看作是provider方法的简写，它们省去了写$get方法，具体用法如下：

factory方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
< html  ng-app = "app" >
 
< head >
     < meta  charset = "utf-8" >
</ head >
 
< body  ng-app = "app" >
     < div  ng-controller = "Controller1" ></ div >
     < script  src = "http://cdn.bootcss.com/angular.js/1.4.1/angular.js" ></ script >
     < script  type = "text/javascript" >
     angular.module('app', [], function($provide) {
         $provide.factory('myFactory', function() {
             return 'i am factory'
         });
     })
 
     .controller('Controller1', function($scope, myFactory) {
         console.log(myFactory);
     });
     </ script >
</ body >
 
</ html >

        对factory方法来说，返回可以是任意类型，所以这里返回字符串是没有问题的。

wKiom1WOX2KB2WEFAABkaqd0IyE432.jpg


service方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
< html  ng-app = "app" >
 
< head >
     < meta  charset = "utf-8" >
</ head >
 
< body  ng-app = "app" >
     < div  ng-controller = "Controller1" ></ div >
     < script  src = "http://cdn.bootcss.com/angular.js/1.4.1/angular.js" ></ script >
     < script  type = "text/javascript" >
     angular.module('app', [], function($provide) {
         $provide.service('mySerivce', function() {
             return {
                 message: 'i am service'
             }
         });
     })
 
     .controller('Controller1', function($scope, mySerivce) {
         console.log(mySerivce);
     });
     </ script >
</ body >
 
</ html >

       service方法返回的只能是引用类型（数组、对象等），如果是其它类型的话会得不到内容。这一点是factory和service的区别。

wKiom1WOYHvB3CoFAAB0rD6bZ3Q336.jpg


        此外，factory和service方法在module里还有快捷方法，用法为：

1
2
3
     var module1 = angular.module('module name', ...);
     module1.factory();
     module1.service();









本文转自 iampomelo 51CTO博客，原文链接：http://blog.51cto.com/iampomelo/1666358，如需转载请自行联系原作者
weixin_34401479
关注
angularJS Provider、factory、service详解及实例代码
10-21
本文将详细讲解AngularJS中的Provider、Factory和服务，并通过实例代码进行对比，以便更好地理解它们的工作原理。 1. **Provider** Provider是最强大的服务创建方式，因为它允许我们在应用配置阶段进行配置。`$...
【5min+】 设计模式的迷惑？Provider vs Factory
句幽
03-16 673
系列介绍 【五分钟的dotnet】是一个利用您的碎片化时间来学习和丰富.net知识的博文系列。它所包含了.net体系中可能会涉及到的方方面面，比如C#的小细节，AspnetCore，微服务中的.net知识等等。 5min+不是超过5分钟的意思，"+"是知识的增加。so，它是让您花费5分钟以下的时间来提升您的知识储备量。 正文 一说起设计模式，大家应该都不会太陌生。毕竟在面向对象的世界中，我们需要用...
AngularJS中的Provider们：Service和Factory等的区别
weixin_33981932的博客
08-14 135
引言 看了很多文章可能还是不太说得出AngularJS中的几个创建供应商(provider)的方法(factory(),service(),provider())到底有啥区别，啥时候该用啥，之前一直傻傻分不清楚，现在来总结一下。 下文中泛指统一用中文，英文即为特指$provide方法中对应方法创建出的东东 供应商==>泛指provi...
深究AngularJS——自定义服务详解(factory、service、provider)
热门推荐
爱雨轩
05-14 5万+
前言 3种创建自定义服务的方式。 Factory Service Provider 大家应该知道，AngularJS是后台人员在工作之余发明的，他主要应用了后台早就存在的分层思想。所以我们得了解下分层的作用，如果你是前端人员不了解什么是分层，那么你最好问问你后台的小伙伴。 dao层：就是Model层，在后台时，这一层的作用，就要是写与数据库交互数据的一层，在angularJS里就主要是写ajax
跟我学AngularJs:Service、Factory、Provider依赖注入使用与区别
Evankaka的专栏
04-13 1万+
用有过Spring的人都知道，Spring的核心思想就是DI(依赖注入,Dependency Injection)和IOC(控制反转 Invension of Controller),AngularJS的service其实就是用到了这里的DI思想，那么什么叫做DI?所谓DI，就是指对象是被动接受依赖类而不是自己主动去找，换句话说就是指对象不是从容器中查找它依赖的类，而是在容器实例化对象的时候主动将它依赖的类注入给它。我个人的理解就是，你在实例化一个类时，它会自动去实例化它里面所用到的其它实例。所以这就叫依赖
详解Angular中的自定义服务Service、Provider以及Factory
08-30
Angular中的自定义服务Service、Provider以及Factory详解 ...Angular中的自定义服务Service、Provider和Factory都是实现服务复用的有效方法，每种方法都有其优缺点，选择哪种方法取决于具体的应用场景。
angularJS——三种自定义service方法
12-10
本篇将详细讲解AngularJS中三种自定义服务的方法：factory、service和provider，以及如何通过它们实现一个数的立方功能。 1. **Factory方法**： Factory是最常用的服务创建方式，它允许我们返回一个值，这个值可以...
AngularJS服务service用法总结
10-20
在这个例子中，我们定义了一个名为firstController的控制器，它接收了三个依赖：$scope、providerService01和factoryService01。在控制器函数体内，我们可以直接使用这些服务提供的功能。 通过上述内容的介绍，我们...
AngularJS中Provider、Service和Factory之间的不同
ltyisangel的专栏
12-04 2555
如果你正在寻找不同，可能是因为你正在找出哪一个才是对于你合适的。或者是因为你已经遇到了它们三个，并且因为它们看起来相似而判断不同处。 如果你认为它们是相似的 - 你就答对了。它们是非常相似的。事实上，他们都是一样的本质。   他们都是provider。factory和service仅仅是provider的特殊实例，但是你能完成你想用provider做的所有事情。比如： Provider
AngularJS 中的 factory、 service 和 provider区别
猎人在吃肉
01-29 2418
初学 AngularJS 时， 肯定会对其提供 factory 、 service 和 provider 感到疑惑， 这三种都是提供服务的方式， 他们到底有什么区别呢？ factory factory 可以认为是设计模式中的工厂方法， 就是你提供一个方法， 该方法返回一个对象的实例， 对于 AngularJS 的 factory 来说， 就是先定义一个对象， 给这个对象添加属性和方法， 然后返
AngularJS中的provider、factory以及service区别
weixin_30387799的博客
05-07 184
　　　>>>AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。【AngularJS常用指令】1、ng-app:声明Angular所管辖的区域。一般写在body或html上，原则上一个页面只有一个； <body ng-app=""></body>2、ng-model:把元素值（比如输入域的...
AngularJS中service，factory，provider的区别
小猪快跑
07-24 1559
angular原理 ：运行在JavaScript context环境下 通过队列watch列表 监听变量 ,APPLY 放入事件队列中，digest去轮训列表 .control 初始化scope和增加方法 .service 理解为MVC结构中的M层，来处理具体的业务逻辑， 特点: 懒加载（lazy loading）：只有在需要用的时候（也就是在其他service，filter，dire...
angularJS provider/factory/service初解析
你好，兜先生
03-21 660
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index_provider_service_factory的实例</title> <script type="text/javascript" src="angular.min.js"></script> </head> <body>
angularJs中service的三种方法以及区别（factory,service,provider三者的区别）
Coder.SirLoin的博客
12-07 9807
1.引言 在angularJS中service是我们经常用到的一个东西，从最开始，我们就知道service有三种方法，service()，factory()和provider() 三者的异同和应用场景也是经久不衰的话题，网上有大量的文章和代码讨论三者的使用和区别 但其中多数说的都一知半解，让人一头雾水，今天让我们聊聊angularJS中的service 2.service的作用
Angularjs中provider,factory和service的不同
weixin_34315189的博客
02-20 78
provider, factory和service都是写Angularjs的service中常用的关键字，很容易混淆，写了一个简单的例子显示他们之间的区别： 分别用service，factory和provider定义三个service： var wtcModule = angular.module('wtc', []); wtcModule.service('...
AngularJS 中的 factory、 service 和 provider区别，简单易懂
weixin_30840253的博客
03-19 129
转自：http://blog.csdn.net/ywl570717586/article/details/51306176 初学AngularJS时， 肯定会对其提供 factory 、 service 和 provider 感到疑惑， 这三种都是提供服务的方式， 他们到底有什么区别呢？ factory factory 可以认为是设计模式中的工厂方法， 就是你提供一个方法， 该方法...
AngularJS 服务层的三种创建方式（provider，factory，service）
H5BOYs的博客
10-20 917
我们知道angular服务层有三种创建方式，那么这三种创建方式有什么语法上的区别呢； 一，provider方式； provider方式创建服务，provider中的方法需要通过对象的方法对外暴露接口；即用this.$get； eg： （function（）{ angular.module("demo",[ ]); .provider("provider",function(){
依赖服务 factory()在angularJS的用法
bollyrui的个人学习笔记
11-12 1589
<!doctype html> <html lang="en" ng-app="myAPP"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> </he
AngularJS中的service、factory与provider详解
"AngularJS中service，factory，provider的区别" 在AngularJS中，service，factory，以及provider都是依赖注入（Dependency Injection，DI）机制的一部分，它们都用于创建可重用的对象，但它们之间存在细微的差异，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值