AngularJS 之 Factory vs Service vs Provider【转】
2015-01-14 22:10
253 查看
英文原文:AngularJS: Factory vs Service vs Provider
当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑。一定要早点意识到,controller 这一层应该很薄;也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 service 里。我每天都会在 Stack Overflow 上看到几个同类的问题,关于如何在 controller 里保存持久化数据。这就不是 controller 该干的事。出于内存性能的考虑,controller 只在需要的时候才会初始化,一旦不需要就会被抛弃。因此,每次当你切换或刷新页面的时候,Angular 会清空当前的 controller。与此同时,service 可以用来永久保存应用的数据,并且这些数据可以在不同的 controller 之间使用。 Angular 提供了3种方法来创建并注册我们自己的 service。 Factory Service Provider |
详细解释(对于不是“太长不看”的读者) 为了准确表现出 Factory、Service 和 Provider 之间的差别,下面我们用 3 种不同的方式来构建同一个服务。这个服务会用到 iTunes API 以及使用 $q 的 promise。 1) Factory Factory 是创建和配置服务最常见的方式。除了“快速浏览”之外,其实没有什么要补充的。只需创建一个对象,为它添加属性,然后返回这个对象就可以了。当你把 factory 传进 controller 中,对象的这些属性就可以通过 factory 访问。更详细的例子如下: 首先创建一个对象,然后返回这个对象,如下。 现在如果我们把"myFactory"传进 controller 里,附加在 "service" 上的任何属性都可以访问到了。 |
现在让我们向回调函数中添加一些“private” 变量。当然 controller中是无法直接访问这些变量的,不过我们最终还是会在“service”中设置setter和个getter 方法,以便必要时修改这些“private”变量。 你可能注意到了,我们没有将变量/函数加到“service”中。我们只是简单的创建他们以便之后的使用和修改。 baseUrl 是iTunes API要求的根URL _artist 是我们想要查找的艺术家 _finalUrl 是最终的权限定URL,即我们调用iTunes的入口 makeUrl 是一个创建并返回友好的iTunesURL的函数 既然我们的帮手/私有变量和函数放在的合适的位置,那么让我们向“service”对象中添加一些属性。无论我们向”service“中添加什么, 我们都能在任意一个我们传递进‘myFactory’ 的controller中使用。 |
我们来创建setArtist和getArtist方法来简单的返回或设置artist。同样创建一个方法使用我们创建的URL来调用iTunes API。这个方法将返回一个从iTunes API获取数据后便会满足的promise。如果你对Angular的promise接触不多,我强烈推荐你深入的学习一下它。 setArtist 接受一个artist并且允许你设置artist getArtist 返回artist callItunes 首先调用makeUrl()方法以便构建$http请求使用的URL。然后它会设置promise对象,让$http请求我们最终的URL, 再然后呢,因为$http返回一个promise,所以我们可以在请求后调用.success或.error。最后我们可以通过iTunes的数据来解析我们的promise,或者直接‘There was an error’来拒绝它。 |
2) Service 当我们创建一个Service时,我们所知道的最重要事可能就是Service通过new关键字实例化对象。这应该可以使熟悉JavaScript的人了解到了这段代码的作用。但对于那些JS背景有限,或者不太熟悉new关键字的作用的人来说可能有点困难。那就让我们来重温一下JavaScript的基本功能,以便帮助我们了解Service究竟做了什么。 让我们先定义一个函数,然后通过new关键字来调用它,看看当解释器遇到了new关键字的时候做了些什么工作,以便帮助我们了解使用new关键字来实例化一个函数时究竟有什么变化。这个的最终结果应该和Service是一样的。 |
现在,让我们看一下当我们在JavaScript中使用new关键字的时候究竟发生了什么。首先你应该已经注意到的是,当我们在例子中使用了new关键字之后,我们可以通过'tyler'来调用方法(sayName),看上去好像tyler是一个对象——那是因为它确实成了一个对象。所以,我们知道的第一件事就是我们的Person构造器返回了一个对象(object)。其次,我们知道,由于我们的sayName方法是定义在Person的prototype上,而不是直接定义在Person的实例上的,所以Person函数返回的对象(tyler)一定是由于未找到sayName方法,进而去prototype寻找sayName方法的。用更通俗的话来说,当我们调用tyler.sayName()时,JS解释器说,“好吧,我先去我们刚创建的'tyler'对象上查找sayName方法,然后调用它。等一下,我没有在它上面找到sayName方法——我只看到了name和age,那让我去prototype找一下吧。没错,它在prototype上,那就让我调用它吧”。 下面的代码演示了在JavaScript中使用new关键之后所做的事。它是上面这一段文字的一个基本的代码示例。我已经把从JS解释器的角度来看整个过程的代码写在了注释里。 |
现在,既然我们了解了在JavaScript中new关键字是如何工作的,那么在Angular中创建一个Service也应该变得容易理解了。 在创建一个Service时,需要理解的最重要的一件事就是我们使用new关键字去实例化Service对象。结合我们从上面的例子所了解到的知识,你应该已经意识到你可以将一些属性和方法直接添加到this上,之后,在创建Service对象时,this会被作为返回值返回。让我们来看一下这种工作方式。 我们不用像之前Factory中的例子那样创建一个对象,然后返回这个对象。因为我们使用了new关键字来调用,解释器会创建一个对象,并关联它的prototype对象,然后将该对象返回,而不用我们去做这些工作。 |
现在,Provider的完整代码如下所示: 现在,与我们的Factory和Service类似,setArtist, getArtist, 和callItunes可以在任何一个传入了 myProvider 的控制器中访问。下面是myProvider的控制器(几乎和我们Factory/Service中的控制器一样)。 正如前面提到的那样,使用Provider创建一个service的独特之处是,你可以在Provider对象传递到应用程序的其他部分之前在app.config函数对其进行修改。让我们来看一个对应的例子。 |
现在你可以明白‘thingFromConfig’是怎么样地在我们的provider中是空字符串,而当它出现在DOM中时,它将是'This sentence was set…’。 谢谢您的阅读,我希望这有助于你能辨别在Angular中Factory, Service, 和 Provider之间的差异。 *要查看完整的代码示例,看看运行中的代码,可以自由地fork我的repo:https://github.com/tylermcginnis33/AngularService |
相关文章推荐
- AngularJS之Factory vs Service vs Provider
- [转]AngularJS 之 Factory vs Service vs Provider
- AngularJS笔记之创建服务方式比较 : factory vs service vs provider
- AngularJS: Factory vs Service vs Provider
- AngularJS 之 Factory vs Service vs Provider
- AngularJS 之 Factory vs Service vs Provider
- [转载]AngularJS之Factory vs Service vs Provider
- AngularJS之Factory vs Service vs Provider
- AngularJS服务之 Factory vs Service vs Provider
- AngularJS之Factory vs Service vs Provider
- AngularJS 之 Factory vs Service vs Provider
- AngularJS之Factory vs Service vs Provider
- AngularJS 之 Factory vs Service vs Provider
- AngularJS: Factory VS Service VS Provider
- AngularJS: Factory vs Service vs Provider
- AngularJS: Factory vs Service vs Provider
- AngularJS: Factory vs Service vs Provider
- 深究AngularJS——自定义服务详解(factory、service、provider)
- AngularJS 中的 factory、 service 和 provider区别,简单易懂
- Angularjs 自定义服务 provide 里 provider 方法 以及 factory、 service 方法以及 provider 供应商的概念