博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angular之service、factory预provider区别
阅读量:6082 次
发布时间:2019-06-20

本文共 3314 字,大约阅读时间需要 11 分钟。

昨晚项目组做了angular分享,刚好有讨论到这个问题。虽然许久不做前端开发,但是兴趣所致。就查阅了下资料,以便后续需要使用

自己的理解:service是new出来的,factory是直接使用就能获得到service对象,service多了一个this。provider可以初始化注入之前进行一些全局配置,还有就是需要通过$get方法来获得

比较简单的一个理解

app.factory('a', fn); app.service('b', fn); app.provider('c', fn);

The difference between the three is that:

  1. a's stored value comes from running fn.
  2. b’s stored value comes from newing fn.
  3. c’s stored value comes from first getting an instance by newing fn, and then running a $getmethod of the instance.

Which means there’s something like a cache object inside AngularJS, whose value of each injection is only assigned once, when they've been injected the first time, and where:

cache.a = fn() cache.b = new fn() cache.c = (new fn()).$get() 一篇关于三者区别的英文资料 :http://tylermcginnis.com/angularjs-factory-vs-service-vs-provider/ 看不来的可以看下中文翻译:http://www.oschina.net/translate/angularjs-factory-vs-service-vs-provider 但是不推荐,还是老老实实看英文为好 最后来篇比较长的
var myApp = angular.module('myApp', []);//Service style, probably the simplest onemyApp.service('helloWorldFromService', function() {    this.sayHello = function() {        return "Hello, World!"    };});//Factory style, more involved but more sophisticatedmyApp.factory('helloWorldFromFactory', function() {    return {        sayHello: function() {            return "Hello, World!"        }    };});//Provider style, full blown, configurable versionmyApp.provider('helloWorld', function() {    // In the provider function, you cannot inject any    // service or factory. This can only be done at the    // "$get" method.    this.name = 'Default';    this.$get = function() {        var name = this.name;        return {            sayHello: function() {                return "Hello, " + name + "!"            }        }    };    this.setName = function(name) {        this.name = name;    };});//Hey, we can configure a provider!myApp.config(function(helloWorldProvider){    helloWorldProvider.setName('World');});function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {    $scope.hellos = [        helloWorld.sayHello(),        helloWorldFromFactory.sayHello(),        helloWorldFromService.sayHello()];}

  同事的总结资料:

//service和factory的区别someModule.factory('testF', [function(){        var f = 1;        //可以return任意js支持的类型,如[],{},function.(建议是一个对象)        return {            add:function(){                f++;                console.log(f);            }        };        //不能用这种形式        // var f = 1;        // this.add = function(){        //     f++;        //     console.log(f);        // };    }]).service('testS', [function(){        //这种可以        var s = 1;        this.add = function(){            s++;            console.log(s);        };        //这种也可以用。和factory一样,可以return任意js支持的类型,如[],{},function。(建议是一个对象)        // var s = 1;        // return {        //     add:function(){        //         s++;        //         console.log(s);        //     }        // };    }])    // 总结】service是用new function形式的,service提供的方法是构造函数。factory是通过执行提供的函数来创建。    // 也就是说:service比factory多了一种this.成员的写法,service创建的实例多一级原型(构造函数的原型)    //PS:在ng中多了一级原型的作用 还没了解,未知

  

下图展示的是这两种方式得到的对象:
 
最后就是stackoverflow中关于该讨论的神级评论,http://stackoverflow.com/questions/15666048/service-vs-provider-vs-factory
考虑到很多朋友可以FQ困难,有爱的博主帮你们转了一份PDF 。
 
 

转载于:https://www.cnblogs.com/draem0507/p/4817388.html

你可能感兴趣的文章
开发规范浅谈
查看>>
Spark Streaming揭秘 Day29 深入理解Spark2.x中的Structured Streaming
查看>>
鼠标增强软件StrokeIt使用方法
查看>>
本地连接linux虚拟机的方法
查看>>
某公司面试java试题之【二】,看看吧,说不定就是你将要做的题
查看>>
BABOK - 企业分析(Enterprise Analysis)概要
查看>>
Linux 配置vnc,开启linux远程桌面
查看>>
Hadoop安装测试简单记录
查看>>
CentOS6.4关闭触控板
查看>>
React Native 极光推送填坑(ios)
查看>>
Terratest:一个用于自动化基础设施测试的开源Go库
查看>>
修改Windows远程终端默认端口,让服务器更安全
查看>>
扩展器必须,SAS 2.0未必(SAS挺进中端存储系统之三)
查看>>
Eclipse遇到Initializing Java Tooling解决办法
查看>>
while((ch = getchar()) != '\n')
查看>>
好程序员web前端分享JS检查浏览器类型和版本
查看>>
Oracle DG 逻辑Standby数据同步性能优化
查看>>
exchange 2010 队列删除
查看>>
「翻译」逐步替换Sass
查看>>
H5实现全屏与F11全屏
查看>>