angularJs 解析factory、service、provider

時間 2019-11-09

標籤 angularjs 解析 factory service provider 欄目 AngularJS 简体版

原文原文鏈接

瞭解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 就是這麼簡單。app

service
service 經過new運算符進行實例化，能夠認爲是一個類型，只要把屬性、方法添加到this對象上便可，不用顯示返回對象
例如：
app.service("MyService",function(){
this.greeting = "hello from service";
});
controller 拿到的對象就是上面代碼中this指向的對象，至關於下面的代碼；
var serviceObj = new MyService();ide

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();this

使用 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">
greeting from factory: {{greetingFromFactory}} 
greeting from service: {{greetingFromService}} 
greeting from provider: {{greetingFromProvider}} 
</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">
greeting from factory: {{greetingFromFactory}} 
greeting from service: {{greetingFromService}}
greeting from provider: {{greetingFromProvider}} 
defaultName: {{defaultName}}, config to: {{name}} 
</body>
運行結果：
greeting form factory:hello from factroy
greeting form service:hello from service
greeting form provider:hello from provider
defaultName:anonymous,config to:Angularjs Providerorm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。