angularJs 解析factory、service、provider

了解angular js

factory
可以认为是设计模式中的工厂方法,就是你提供一个方法,该方法返回一个对象的实例;
对于angularJs的factory,就是先定义一个对象,给这个对象添加属性和方法,然后返回这个对象。
例如:
var app = angular.module("MyApp",[]);
app.factory("MyFactory",function(){
var result = {};
result.greeting = "Hello from factory";
return result;
});
最后controller拿到的就是result对象,相当于下面的代码:
var factoryResult = MyFactory();
其实factory 就是这么简单。

service
service 通过new运算符进行实例化,可以认为是一个类型,只要把属性、方法添加到this对象上即可,不用显示返回对象
例如:
app.service("MyService",function(){
this.greeting = "hello from service";
});
controller 拿到的对象就是上面代码中this指向的对象,相当于下面的代码;
var serviceObj = new MyService();

provider
与factory、service稍有不同的是,provider必须提供一个$get方法,$get方法和factory要求是一致的,
即先定义一个对象,给这个对象添加属性、方法,然后返回这个对象,例如:
app.provider("MyProvider",function(){
this.$get = function(){
var result = {};
result.greeting = "hello from provider";
return result;
}
});
最后controller 拿到的对象就是provider 的$get方法返回的对象,相当于下面的代码
var instance = new MyProvider();
var provider = instance.$get();

使用 factory service provider
三者使用起来是一样的,都是通过AngularJs的依赖注入使用,比如:
app.controller("TestController",[‘$scope‘,‘MyFactory‘,‘MyService‘,‘MyProvider‘,function($scope,MyFactory,MyService,MyProvider){
$scope.greetingFromFactory = MyFactory.greeting;
$scope.greetingFromService = MyService.greeting;
$scope.greetingFromProvider = MyProvider.greeting;
}]);
对应的视图为:
<body ng-controller="TestController">
<p>greeting from factory: {{greetingFromFactory}} </p>
<p>greeting from service: {{greetingFromService}} </p>
<p>greeting from provider: {{greetingFromProvider}} </p>
</body>

provider 可以在应用启动时进行配置:
provider 的特殊之处就是可以在module启动时进行配置,从而达到特殊的用途,比如上面的provider 中可以添加一个setName方法,
可以在启动时调用这个方法,进行一些额外的初始化工作:
app.provider(‘MyProvider‘, function() {
// default name is ‘anonymous‘;
var defaultName = ‘anonymous‘;
var name = defaultName;
// setName can be called duaring module init
this.setName = function(newName) {
name = newName;
}

this.$get = function() {
var result = {};
result.greeting = ‘Hello from provider‘;

result.name = name;
result.defaultName = defaultName;
return result;
}
})
添加了setName方法之后,可以module启动时来调用这个方法,实现对provider的配置
app.config(function(MyProviderProvider) { //没错,这就是MyProviderProvider
MyProviderProvider.setName(‘Angularjs Provider‘);
});
在 controller 中添加显示 provider 的这些信息:
app.controller(‘TestController‘, [‘$scope‘, ‘MyFactory‘, ‘MyService‘, ‘MyProvider‘, function($scope, myFactory, myService, myProvider) {
$scope.greetingFromFactory = myFactory.greeting;
$scope.greetingFromService = myService.greeting;
$scope.greetingFromProvider = myProvider.greeting;

$scope.defaultName = myProvider.defaultName;
$scope.name = myProvider.name
}]);
对应的 HTML 视图也调整一下
<body ng-controller="TestController">
<p>greeting from factory: {{greetingFromFactory}} </p>
<p>greeting from service: {{greetingFromService}}</p>
<p>greeting from provider: {{greetingFromProvider}} </p>
<p>defaultName: {{defaultName}}, config to: {{name}} </p>
</body>
运行结果:
greeting form factory:hello from factroy
greeting form service:hello from service
greeting form provider:hello from provider
defaultName:anonymous,config to:Angularjs Provider

时间: 2024-10-20 11:21:38

angularJs 解析factory、service、provider的相关文章

angularjs 中 Factory,Service,Provider 之间的区别

本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行演示 Factory,Service,Provider 之间的区别 1. Factory factory('dataService',function(){ return { golbal_sitename:"this is the shared value", sayHello:func

angularjs factory,service,provider 自定义服务的不同

angularjs框架学了有一段时间了,感觉很好用.可以把angularjs的app理解成php的class,controller是控制器,而内置服务和自定义服务就可以理解成models了.angularjs的内置服务多,例如:$scope,$rootScope,$http,$q,$resource,$routeProvider等等,下面来说一下怎么自定义服务 一,factory,service,provider自定义服务,services.js 'use strict'; /* Service

AngularJS中几种Providers(Factory, Service, Provider)的区别

原文: http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/ 什么是Provider? AngularJS docs 是这样定义provider的: provider是一个对象, 它有一个$get()方法. injector 调用$get方法以此来创建一个service的实例. Provider还有一些其他的方法用来配置provider. AngularJS 使用 $provide 注册新的pro

AngularJS 之 Factory vs Service vs Provider【转】

英文原文:AngularJS: Factory vs Service vs Provider 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一定要早点意识到,controller 这一层应该很薄:也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 service 里.我每天都会在 Stack Overflow 上看到几个同类的问题,关于如何在 controller 里保存持久化数据.这就不是 controller 该干的事.出于内存性

AngularJS之Factory vs Service vs Provider

原文  http://www.linuxeden.com/html/news/20140509/151538.html 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一定要早点意识到,controller 这一层应该很薄:也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 service 里.我每天都会在 Stack Overflow 上看到几个同类的问题,关于如何在 controller 里保存持久化数据.这就不是 controll

[转载]AngularJS之Factory vs Service vs Provider

http://www.oschina.net/translate/angularjs-factory-vs-service-vs-provider 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一定要早点意识到,controller 这一层应该很薄:也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 service 里.我每天都会在 Stack Overflow 上看到几个同类的问题,关于如何在 controller 里保存持久化数据

Angular之Providers (Value, Factory, Service and Constant )

官方文档Providers Each web application you build is composed of objects that collaborate to get stuff done.(每一个web应用都是由一些对象“组装”成的,这些对象共同合作,来完成特定的任务)These objects need to be instantiated and wired together for the app to work.(这些对象需要被实例化,然后“组装”在一起来使web应用能

Providers(Value, Factory, Service and Constant )

-------------------------------官方文档--------------------------------------------------------------------- Providers  AngularJS: Service vs provider vs factory Each web application you build is composed of objects that collaborate to get stuff done.(每一

AngularJS服务及注入--Provider

Provider简介 在AngularJS中,app中的大多数对象通过injector服务初始化和连接在一起. Injector创建两种类型的对象,service对象和特别对象. Service对象由开发者自定义api. 特别对象则遵照AngularJS框架特定的api,这些对象包括:controller, directive, filter or animation. 最详细最全面的是Provider,其他四种(Value, Factory, Service and Constant)只是在P