Apa perbedaan antara Service
, Penyedia
dan Pabrik
di AngularJS?
Dari AngularJS milis saya mendapat menakjubkan thread yang menjelaskan layanan vs pabrik vs penyedia dan injeksi penggunaan. Menyusun jawaban:
Sintaks: modul.layanan( 'serviceName', fungsi );
Hasil: Ketika mendeklarasikan serviceName sebagai injeksi argumen anda akan diberikan dengan contoh fungsi. Dengan kata lain baru FunctionYouPassedToService()
.
Sintaks: modul.pabrik( 'factoryName', fungsi );
Hasil: Ketika mendeklarasikan factoryName sebagai injeksi argumen anda akan diberikan dengan nilai yang dikembalikan dengan menerapkan fungsi referensi diteruskan ke modul.pabrik.
Sintaks: modul.penyedia( 'providerName', fungsi );
Hasil: Ketika mendeklarasikan providerName sebagai injeksi argumen anda akan diberikan dengan (baru ProviderFunction()).$get()
. Konstruktor fungsi ini diturunkan sebelum $mendapatkan metode ini disebut - ProviderFunction
adalah fungsi referensi diteruskan ke modul.penyedia.
Penyedia memiliki keuntungan yang mereka dapat dikonfigurasi selama konfigurasi modul fase.
Lihat di sini untuk kode yang disediakan.
Berikut ini's besar penjelasan lebih lanjut oleh Misko:
provide.value('a', 123);
function Controller(a) {
expect(a).toEqual(123);
}
Dalam hal ini injektor hanya mengembalikan nilai seperti ini. Tapi bagaimana jika anda ingin menghitung nilai? Kemudian gunakan pabrik
provide.factory('b', function(a) {
return a*2;
});
function Controller(b) {
expect(b).toEqual(246);
}
Jadi pabrik
adalah sebuah fungsi yang bertanggung jawab untuk menciptakan nilai. Perhatikan bahwa pabrik fungsi dapat meminta dependensi lain.
Tapi bagaimana jika anda ingin menjadi lebih OO dan memiliki kelas yang disebut Penyambut?
function Greeter(a) {
this.greet = function() {
return 'Hello ' + a;
}
}
Kemudian untuk instantiate anda akan memiliki untuk menulis
provide.factory('greeter', function(a) {
return new Greeter(a);
});
Maka kita bisa meminta 'penyambut' di controller seperti ini
function Controller(greeter) {
expect(greeter instanceof Greeter).toBe(true);
expect(greeter.greet()).toEqual('Hello 123');
}
Tapi itu terlalu bertele-tele. Dengan cara yang lebih singkat untuk menulis ini akan menjadi penyedia.layanan('penyambut', Penyambut);
Tapi bagaimana jika kita ingin mengkonfigurasi Penyambut
kelas sebelum injeksi? Kemudian kita bisa menulis
provide.provider('greeter2', function() {
var salutation = 'Hello';
this.setSalutation = function(s) {
salutation = s;
}
function Greeter(a) {
this.greet = function() {
return salutation + ' ' + a;
}
}
this.$get = function(a) {
return new Greeter(a);
};
});
Kemudian kita dapat melakukan hal ini:
angular.module('abc', []).config(function(greeter2Provider) {
greeter2Provider.setSalutation('Halo');
});
function Controller(greeter2) {
expect(greeter2.greet()).toEqual('Halo 123');
}
Sebagai catatan, layanan
, pabrik
, dan nilai
adalah semua yang berasal dari penyedia.
provider.service = function(name, Class) {
provider.provide(name, function() {
this.$get = function($injector) {
return $injector.instantiate(Class);
};
});
}
provider.factory = function(name, factory) {
provider.provide(name, function() {
this.$get = function($injector) {
return $injector.invoke(factory);
};
});
}
provider.value = function(name, value) {
provider.factory(name, function() {
return value;
});
};
pabrik
/ dinas
/ penyedia
:var myApp = angular.module('myApp', []);
//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
this.sayHello = function() {
return "Hello, World!";
};
});
//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!";
}
};
});
//provider style, full blown, configurable version
myApp.provider('helloWorld', function() {
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()];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
{{hellos}}
</div>
</body>
TL;DR
1) Ketika anda menggunakan Pabrik anda membuat sebuah objek, menambahkan properti untuk itu, kemudian kembali bahwa objek yang sama. Ketika anda melewati pabrik ini ke controller, properti-properti pada objek sekarang akan tersedia di controller yang melalui pabrik anda.
app.controller(‘myFactoryCtrl’, function($scope, myFactory){
$scope.artist = myFactory.getArtist();
});
app.factory(‘myFactory’, function(){
var _artist = ‘Shakira’;
var service = {};
service.getArtist = function(){
return _artist;
}
return service;
});
2) Ketika anda menggunakan Layanan, AngularJS instantiates itu di belakang layar dengan 'baru' kata kunci. Karena itu, anda bisa menambahkan properti untuk 'ini' dan layanan akan kembali 'ini'. Ketika anda melewati layanan ke controller, properti-properti pada 'ini' sekarang akan tersedia di controller yang melalui layanan anda.
app.controller(‘myServiceCtrl’, function($scope, myService){
$scope.artist = myService.getArtist();
});
app.service(‘myService’, function(){
var _artist = ‘Nelly’;
this.getArtist = function(){
return _artist;
}
});
3) Penyedia adalah satu-satunya layanan yang anda dapat lulus ke anda .config() fungsi. Gunakan penyedia ketika anda ingin memberikan modul-lebar konfigurasi untuk layanan anda objek sebelum membuat itu tersedia.
app.controller(‘myProvider’, function($scope, myProvider){
$scope.artist = myProvider.getArtist();
$scope.data.thingFromConfig = myProvider.thingOnConfig;
});
app.provider(‘myProvider’, function(){
//Only the next two lines are available in the app.config()
this._artist = ‘’;
this.thingFromConfig = ‘’;
this.$get = function(){
var that = this;
return {
getArtist: function(){
return that._artist;
},
thingOnConfig: that.thingFromConfig
}
}
});
app.config(function(myProviderProvider){
myProviderProvider.thingFromConfig = ‘This was set in config’;
});
Non TL;DR
1) Pabrik
Pabrik-pabrik ini adalah cara yang paling populer untuk membuat dan mengkonfigurasi layanan. Ada benar-benar tidak lebih dari apa yang TL;DR kata. Anda hanya membuat sebuah objek, menambahkan properti untuk itu, kemudian kembali bahwa objek yang sama. Maka ketika anda melewati pabrik ke controller, properti-properti pada objek sekarang akan tersedia di controller yang melalui pabrik anda. Yang lebih luas misalnya di bawah.
app.factory(‘myFactory’, function(){
var service = {};
return service;
});
Sekarang apapun sifat kami lampirkan untuk 'layanan' akan tersedia untuk kita ketika kita lulus 'myFactory' ke controller kita. Sekarang mari kita tambahkan beberapa 'pribadi' variabel ke fungsi callback. Ini tidak akan langsung dapat diakses dari pengendali, tapi pada akhirnya kita akan mengatur beberapa pengambil/penyetel pada 'service' untuk dapat mengubah ini 'pribadi' variabel bila diperlukan.
app.factory(‘myFactory’, function($http, $q){
var service = {};
var baseUrl = ‘https://itunes.apple.com/search?term=’;
var _artist = ‘’;
var _finalUrl = ‘’;
var makeUrl = function(){
_artist = _artist.split(‘ ‘).join(‘+’);
_finalUrl = baseUrl + _artist + ‘&callback=JSON_CALLBACK’;
return _finalUrl
}
return service;
});
Di sini anda akan melihat kita tidak melampirkan variabel/fungsi untuk 'service'. Kami hanya menciptakan mereka dalam rangka untuk menggunakan atau memodifikasi mereka nanti.
app.factory('myFactory', function($http, $q){
var service = {};
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
service.setArtist = function(artist){
_artist = artist;
}
service.getArtist = function(){
return _artist;
}
service.callItunes = function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
}
return service;
});
Sekarang pabrik kami lengkapi. Kita sekarang dapat menyuntikkan 'myFactory' ke dalam setiap controller dan kemudian kami akan dapat memanggil metode kita bahwa kita melekat pada layanan kami objek (setArtist, getArtist, dan callItunes).
app.controller('myFactoryCtrl', function($scope, myFactory){
$scope.data = {};
$scope.updateArtist = function(){
myFactory.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myFactory.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
});
Di controller di atas kita suntik di 'myFactory' layanan. Kami kemudian mengatur properti pada kami $lingkup objek dengan data dari 'myFactory'. Satu-satunya kode rumit di atas adalah jika anda sudah pernah berurusan dengan janji-janji sebelumnya. Karena callItunes kembali janji, kita dapat menggunakan .maka() metode dan hanya mengatur $scope.data.artistData setelah kami janji ini digenapi dengan iTunes data. Anda akan melihat controller kita sangat 'tipis' (Ini adalah coding yang baik berlatih). Semua logika dan data persisten adalah hotel yang terletak strategis di layanan kami, tidak di controller kita.
2)
Mungkin hal terbesar untuk tahu ketika berhadapan dengan menciptakan Layanan adalah bahwa itu diturunkan dengan 'baru' kata kunci. Untuk anda JavaScript guru ini harus memberikan anda sebuah petunjuk besar ke dalam sifat dari kode. Bagi anda terbatas, dengan latar belakang di JavaScript atau bagi mereka yang tidak terlalu akrab dengan apa yang 'baru' kata kunci sebenarnya, mari kita review beberapa JavaScript dasar-dasar yang pada akhirnya akan membantu kita dalam memahami sifat dari suatu Layanan.
Untuk benar-benar melihat perubahan-perubahan yang terjadi ketika anda memanggil sebuah fungsi dengan 'baru' kata kunci, mari kita membuat fungsi dan memohon dengan 'baru' kata kunci, maka mari kita lihat apa penerjemah tidak ketika ia melihat 'baru' kata kunci. Hasil akhir keduanya akan sama.
Pertama-tama mari kita buat Constructor kita.
var Person = function(name, age){
this.name = name;
this.age = age;
}
Ini adalah khas JavaScript fungsi constructor. Sekarang setiap kali kita memanggil Orang yang menggunakan fungsi 'baru' kata kunci, 'ini' akan terikat dengan objek yang baru dibuat. Sekarang mari kita tambahkan sebuah metode ke kami Orang prototipe sehingga akan tersedia pada setiap instance dari kami Orang 'kelas'.
Person.prototype.sayName = function(){
alert(‘My name is ‘ + this.name);
}
Sekarang, karena kita menempatkan sayName fungsi pada prototipe, setiap instance dari Seseorang akan mampu memanggil sayName fungsi dalam rangka peringatan bahwa contoh nama. Sekarang kita telah memiliki Seseorang konstruktor fungsi dan kami sayName fungsi pada prototipe, mari kita benar-benar membuat sebuah instance dari Orang kemudian memanggil sayName fungsi.
var tyler = new Person(‘Tyler’, 23);
tyler.sayName(); //alerts ‘My name is Tyler’
Jadi semua bersama-sama kode untuk membuat Orang pembina, menambahkan fungsi untuk itu prototype, membuat Orang misalnya, dan kemudian memanggil fungsi pada prototipe terlihat seperti ini.
var Person = function(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
alert(‘My name is ‘ + this.name);
}
var tyler = new Person(‘Tyler’, 23);
tyler.sayName(); //alerts ‘My name is Tyler’
Sekarang mari kita lihat apa yang sebenarnya terjadi ketika anda menggunakan 'baru' kata kunci dalam JavaScript. Hal pertama yang harus anda perhatikan adalah bahwa setelah menggunakan 'baru' dalam contoh kita, kita dapat memanggil metode (sayName) pada 'tyler' hanya seolah-olah itu adalah sebuah benda - yang karena itu. Jadi pertama, kami tahu bahwa kami Orang konstruktor kembali sebuah objek, apakah kita dapat melihat bahwa dalam kode atau tidak. Kedua, kita tahu bahwa karena kami sayName fungsi ini terletak pada prototipe dan tidak langsung pada Orang tersebut misalnya, objek yang Orang berfungsi kembali harus mendelegasikan dengan prototipe pada gagal lookup. Dalam istilah yang lebih sederhana, ketika kita memanggil tyler.sayName() penafsir mengatakan "OK, aku akan terlihat di 'tyler' objek yang baru saja kita buat, cari sayName fungsi, maka panggilan itu. Tunggu sebentar, saya tidak melihat hal itu di sini - semua saya lihat adalah nama dan usia, biarkan aku memeriksa prototipe. Yup, sepertinya pada prototipe, biarkan aku menyebutnya.". Di bawah ini adalah kode untuk bagaimana anda bisa berpikir tentang apa yang 'baru' kata kunci benar-benar melakukan dalam JavaScript. Hal ini pada dasarnya kode contoh dari paragraf di atas. Aku telah menempatkan 'penerjemah' melihat atau cara penafsir melihat kode dalam catatan.
var Person = function(name, age){
//The below line creates an object(obj) that will delegate to the person’s prototype on failed lookups.
//var obj = Object.create(Person.prototype);
//The line directly below this sets ‘this’ to the newly created object
//this = obj;
this.name = name;
this.age = age;
//return this;
}
Sekarang memiliki pengetahuan tentang apa yang 'baru' kata kunci benar-benar tidak dalam JavaScript, membuat Layanan di AngularJS harus lebih mudah untuk memahami. Hal yang terpenting untuk memahami ketika membuat sebuah Layanan adalah mengetahui bahwa Layanan yang diturunkan dengan 'baru' kata kunci. Menggabungkan pengetahuan itu dengan contoh-contoh di atas, sekarang anda harus menyadari bahwa anda akan melampirkan sifat dan metode langsung untuk 'ini' yang kemudian akan kembali dari Layanan itu sendiri. Mari kita melihat ini dalam tindakan. Tidak seperti apa yang awalnya kita lakukan dengan Pabrik contoh, kita tidak perlu membuat objek kemudian kembali bahwa objek karena, seperti yang disebutkan berkali-kali, kami menggunakan 'baru' kata kunci jadi penerjemah akan membuat objek tersebut, telah mendelegasikan untuk itu prototipe, kemudian kembali untuk kita tanpa kita harus melakukan pekerjaan. Hal pertama yang pertama, mari kita membuat kita 'pribadi' dan fungsi pembantu. Ini harus terlihat sangat akrab sejak kami melakukan hal yang sama dengan pabrik kami. Saya tidak akan menjelaskan apa yang masing-masing baris di sini karena saya melakukan itu di pabrik contoh, jika anda bingung, baca kembali pabrik misalnya.
app.service('myService', function($http, $q){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
});
Sekarang, kami akan melampirkan semua metode kami yang akan tersedia di controller kita untuk 'ini'.
app.service('myService', function($http, $q){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
this.setArtist = function(artist){
_artist = artist;
}
this.getArtist = function(){
return _artist;
}
this.callItunes = function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
}
});
Sekarang hanya seperti di pabrik kami, setArtist, getArtist, dan callItunes akan tersedia di mana controller kita lulus myService ke. Berikut adalah myService controller (yang hampir persis sama seperti pabrik kami controller).
app.controller('myServiceCtrl', function($scope, myService){
$scope.data = {};
$scope.updateArtist = function(){
myService.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myService.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
});
Seperti yang saya sebutkan sebelumnya, setelah anda benar-benar memahami apa yang 'baru' tidak, Layanan yang hampir sama dengan pabrik di AngularJS.
3) Penyedia
Hal terbesar yang harus diingat tentang Penyedia adalah bahwa mereka hanya layanan yang anda dapat masuk ke aplikasi.config bagian dari aplikasi anda. Ini adalah penting besar jika anda perlu untuk mengubah beberapa bagian dari layanan anda objek yang sebelum itu tersedia di mana-mana pun dalam aplikasi anda. Meskipun sangat mirip dengan Layanan/Pabrik, ada beberapa perbedaan yang akan kita bahas.
Pertama kita set up kami Penyedia dalam cara yang sama kita lakukan dengan Layanan kami dan Pabrik. Variabel-variabel di bawah ini adalah kita 'pribadi' dan fungsi pembantu.
app.provider('myProvider', function(){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
//Going to set this property on the config function below.
this.thingFromConfig = ‘’;
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
}
*Lagi jika ada bagian dari kode di atas adalah membingungkan, check out Pabrik bagian di mana saya menjelaskan apa itu semua tidak lebih detail. Yang dapat anda pikirkan Penyedia sebagai memiliki tiga bagian. Bagian pertama adalah bagian 'pribadi' variabel/fungsi yang akan dimodifikasi/diatur kemudian (ditampilkan di atas). Bagian kedua adalah variabel/fungsi yang akan tersedia di aplikasi anda.config fungsi dan karena itu tersedia untuk mengubah sebelum mereka tersedia di mana pun (juga ditunjukkan di atas). Hal ini penting untuk dicatat bahwa variabel-variabel tersebut harus melekat 'ini' kata kunci. Dalam contoh kita, hanya 'thingFromConfig' akan tersedia untuk mengubah dalam aplikasi.config. Bagian ketiga (ditampilkan di bawah) adalah semua variabel/fungsi yang akan tersedia di controller anda ketika anda lulus dalam 'myProvider' layanan ke yang spesifik controller. Ketika membuat sebuah layanan dengan Penyedia, satu-satunya sifat/metode yang akan tersedia di controller adalah properti-properti/metode yang dikembalikan dari $get() fungsi. Kode di bawah ini menempatkan $mendapatkan 'ini' (yang kita tahu akhirnya akan dikembalikan dari fungsi tersebut). Sekarang, yang $mendapatkan kembali fungsi semua metode/sifat-sifat yang kita inginkan akan tersedia di controller. Berikut adalah contoh kode.
this.$get = function($http, $q){
return {
callItunes: function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
},
setArtist: function(artist){
_artist = artist;
},
getArtist: function(){
return _artist;
},
thingOnConfig: this.thingFromConfig
}
}
Sekarang yang penuh kode Penyedia terlihat seperti ini
app.provider('myProvider', function(){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
//Going to set this property on the config function below
this.thingFromConfig = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
this.$get = function($http, $q){
return {
callItunes: function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
},
setArtist: function(artist){
_artist = artist;
},
getArtist: function(){
return _artist;
},
thingOnConfig: this.thingFromConfig
}
}
});
Sekarang hanya seperti di pabrik kami dan Layanan, setArtist, getArtist, dan callItunes akan tersedia di mana controller kita lulus myProvider ke. Berikut adalah myProvider controller (yang hampir persis sama seperti pabrik kami/Layanan controller).
app.controller('myProviderCtrl', function($scope, myProvider){
$scope.data = {};
$scope.updateArtist = function(){
myProvider.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myProvider.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
$scope.data.thingFromConfig = myProvider.thingOnConfig;
});
Seperti disebutkan sebelumnya, seluruh titik untuk menciptakan sebuah layanan dengan Penyedia adalah untuk dapat mengubah beberapa variabel melalui app.fungsi konfigurasi sebelum akhir objek diteruskan ke seluruh aplikasi. Mari kita lihat contoh dari itu.
app.config(function(myProviderProvider){
//Providers are the only service you can pass into app.config
myProviderProvider.thingFromConfig = 'This sentence was set in app.config. Providers are the only service that can be passed into config. Check out the code to see how it works';
});
Sekarang anda dapat melihat bagaimana 'thingFromConfig' adalah sebagai string kosong di provider kami, tapi ketika yang muncul di DOM, itu akan menjadi 'kalimat Ini adalah mengatur...'.
Semua Layanan lajang; mereka mendapatkan instantiated sekali per aplikasi. Mereka dapat jenis, apakah itu primitif, objek literal, fungsi, atau bahkan sebuah contoh dari jenis kustom.
The nilai
, pabrik
, service
, konstan
, dan penyedia
metode ini adalah semua penyedia. Mereka mengajarkan Injector cara untuk instantiate Jasa.
Yang paling verbose, tetapi juga yang paling komprehensif adalah salah satu Penyedia resep. The tersisa empat resep jenis — Nilai, Pabrik, Layanan dan Konstan — hanya sintaksis gula di atas dari penyedia resep.
Anda harus menggunakan Provider resep hanya ketika anda ingin mengekspos API untuk aplikasi-berbagai konfigurasi yang harus dilakukan sebelum aplikasi dimulai. Hal ini biasanya menarik hanya untuk dapat digunakan kembali pelayanan dan perilaku yang mungkin membutuhkan sedikit berbeda antara aplikasi.
penghias
.Lihat penyedia dokumentasi.
Pengertian AngularJS Pabrik, Layanan dan Penyedia
Semua ini digunakan untuk berbagi reusable singleton benda-benda. Hal ini membantu untuk berbagi reusable code di aplikasi/berbagai komponen/modul.
Dari Docs Layanan/Pabrik:
- Malas instantiated – Sudut hanya instantiates layanan/pabrik ketika komponen aplikasi tergantung pada hal itu.
- Lajang – masing-Masing komponen tergantung pada layanan mendapat referensi ke satu contoh yang dihasilkan oleh pabrik.
Pabrik adalah fungsi di mana anda dapat memanipulasi/menambah logika sebelum membuat sebuah objek, maka objek yang baru dibuat akan dikembalikan.
app.factory('MyFactory', function() {
var serviceObj = {};
//creating an object with methods/functions or variables
serviceObj.myFunction = function() {
//TO DO:
};
//return that object
return serviceObj;
});
Penggunaan ****
Hal ini dapat hanya kumpulan dari fungsi-fungsi seperti kelas. Oleh karena itu, hal ini dapat instantiated dalam kontroler yang berbeda ketika anda menyuntikkan dalam controller/pabrik/direktif fungsi. Instantiated hanya sekali per aplikasi.
Hanya sambil melihat pelayanan yang berpikir tentang array prototipe. Layanan adalah fungsi yang instantiates objek baru menggunakan 'baru' kata kunci. Anda dapat menambahkan sifat dan fungsi untuk layanan objek dengan menggunakan ini
kata kunci. Tidak seperti sebuah pabrik, itu doesn't kembali apa-apa (ini mengembalikan sebuah objek yang berisi metode/sifat).
app.service('MyService', function() {
//directly binding events to this context
this.myServiceFunction = function() {
//TO DO:
};
});
Penggunaan ****
Menggunakannya ketika anda perlu untuk berbagi sebuah objek tunggal di seluruh aplikasi. Misalnya, otentikasi pengguna rincian, berbagi mampu metode/data, fungsi Utilitas dll.
Penyedia digunakan untuk membuat layanan dikonfigurasi objek. Anda dapat mengkonfigurasi layanan pengaturan konfigurasi fungsi. Ia mengembalikan nilai dengan menggunakan $get()
fungsi. The $get
fungsi yang akan dieksekusi pada run fase di sudut.
app.provider('configurableService', function() {
var name = '';
//this method can be be available at configuration time inside app.config.
this.setName = function(newName) {
name = newName;
};
this.$get = function() {
var getName = function() {
return name;
};
return {
getName: getName //exposed object to where it gets injected.
};
};
});
Penggunaan ****
Ketika anda perlu menyediakan modul-bijak konfigurasi untuk layanan anda objek sebelum membuat itu tersedia, misalnya. misalkan anda ingin mengatur URL API di dasar Lingkungan anda seperti dev
, panggung
atau www
CATATAN
Hanya penyedia akan tersedia dalam konfigurasi fase sudut, sementara layanan & pabrik tidak.
Harapan ini telah dibersihkan pemahaman anda tentang Pabrik, Layanan dan Penyedia.
Bagi saya, wahyu datang ketika saya menyadari bahwa mereka semua bekerja dengan cara yang sama: dengan menjalankan sesuatu setelah, menyimpan nilai yang mereka dapatkan, dan kemudian batuk yang sama disimpan nilainya ketika dirujuk melalui dependency injection.
Katakanlah kita memiliki:
app.factory('a', fn);
app.service('b', fn);
app.provider('c', fn);
Perbedaan antara ketiga adalah bahwa:
a
's nilai yang disimpan berasal dari fn
.b
s nilai yang disimpan berasal dari new a'ing
fn`.c
s nilai yang disimpan berasal dari pertama mendapatkan contoh oleh baru a'ing
fn, dan kemudian menjalankan
$get` metode contoh.Yang berarti ada sesuatu yang seperti cache objek di dalam AngularJS, dan nilai dari masing-masing injeksi hanya diberikan sekali, ketika mereka've telah disuntikkan pertama kalinya, dan di mana:
cache.a = fn()
cache.b = new fn()
cache.c = (new fn()).$get()
Ini adalah mengapa kita menggunakan ini
di jasa, dan menetapkan `ini.$dapatkan di penyedia.
Layanan vs penyedia vs pabrik:
Saya mencoba untuk tetap sederhana. It's semua tentang JavaScript dasar konsep.
Pertama-tama, let's berbicara tentang jasa di AngularJS!
Apa itu Layanan: Di AngularJS, Layanan adalah apa-apa tapi singleton objek JavaScript yang dapat menyimpan beberapa metode yang berguna atau sifat. Ini singleton objek dibuat per ngApp(app Sudut) dasar dan dibagi di antara semua kontroler dalam aplikasi saat ini. Ketika Angularjs instantiate sebuah objek layanan, itu mendaftar layanan ini objek dengan layanan yang unik nama. Jadi setiap saat kita membutuhkan contoh layanan, Sudut pencarian registri untuk layanan ini nama, dan mengembalikan referensi ke objek layanan. Seperti yang kita dapat memanggil metode, akses properti dll pada objek layanan. Anda mungkin memiliki pertanyaan apakah anda dapat juga menempatkan sifat, metode pada lingkup objek pengendali! Jadi mengapa anda membutuhkan layanan objek? Jawaban adalah: jasa dibagi di antara beberapa controller lingkup. Jika anda menempatkan beberapa sifat/metode dalam controller's lingkup objek , itu akan tersedia untuk saat ini ruang lingkup saja. Tapi ketika anda menentukan metode, properti pada objek layanan, itu akan tersedia secara global dan dapat diakses di setiap controller's lingkup dengan menyuntikkan layanan tersebut.
Jadi jika ada tiga controller ruang lingkup, biarlah controllerA, controllerB dan controllerC, semua akan berbagi layanan yang sama misalnya.
<div ng-controller='controllerA'>
<!-- controllerA scope -->
</div>
<div ng-controller='controllerB'>
<!-- controllerB scope -->
</div>
<div ng-controller='controllerC'>
<!-- controllerC scope -->
</div>
Cara membuat pelayanan?
AngularJS memberikan metode yang berbeda untuk mendaftar layanan. Di sini kami akan berkonsentrasi pada tiga metode pabrik(..),layanan(..),penyedia(..);
Gunakan link ini untuk referensi kode
Kita dapat mendefinisikan sebuah pabrik fungsi sebagai berikut.
factory('serviceName',function fnFactory(){ return serviceInstance;})
AngularJS menyediakan 'pabrik('serviceName', fnFactory)' metode yang mengambil dua parameter, serviceName dan fungsi JavaScript. Sudut menciptakan contoh layanan dengan menerapkan fungsi fnFactory() seperti di bawah ini.
var serviceInstace = fnFactory();
Berlalu fungsi dapat menentukan objek dan kembali objek tersebut. AngularJS hanya toko-toko ini objek referensi untuk sebuah variabel yang dilewatkan sebagai argumen pertama. Apa pun yang kembali dari fnFactory akan terikat untuk serviceInstance . Bukannya kembali objek , kita juga dapat mengembalikan fungsi, nilai, dll, Apapun yang kita akan kembali , akan tersedia untuk contoh layanan.
Contoh:
var app= angular.module('myApp', []);
//creating service using factory method
app.factory('factoryPattern',function(){
var data={
'firstName':'Tom',
'lastName':' Cruise',
greet: function(){
console.log('hello!' + this.firstName + this.lastName);
}
};
//Now all the properties and methods of data object will be available in our service object
return data;
});
service('serviceName',function fnServiceConstructor(){})
It's cara lain, kita dapat mendaftarkan layanan. Satu-satunya perbedaan adalah cara AngularJS mencoba untuk menginstansiasi objek layanan. Kali ini menggunakan sudut 'baru' kata kunci dan memanggil konstruktor fungsi sesuatu seperti di bawah ini.
var serviceInstance = new fnServiceConstructor();
Dalam konstruktor fungsi yang bisa kita gunakan 'ini' kata kunci untuk menambahkan properti/metode untuk objek layanan. contoh:
//Creating a service using the service method
var app= angular.module('myApp', []);
app.service('servicePattern',function(){
this.firstName ='James';
this.lastName =' Bond';
this.greet = function(){
console.log('My Name is '+ this.firstName + this.lastName);
};
});
Penyedia() fungsi adalah cara lain untuk menciptakan pelayanan. Mari kita tertarik untuk membuat layanan yang hanya menampilkan beberapa pesan ucapan untuk pengguna. Tapi kami juga ingin memberikan suatu fungsi sedemikian rupa sehingga pengguna dapat mengatur sendiri pesan ucapan. Dalam istilah teknis, kami ingin membuat layanan dapat dikonfigurasi. Bagaimana kita bisa melakukan ini ? Harus ada cara agar aplikasi bisa lulus mereka ucapan kustom pesan dan Angularjs akan membuatnya tersedia untuk pabrik/fungsi constructor yang membuat layanan kami contoh. Dalam kasus seperti penyedia() fungsi yang melakukan pekerjaan. menggunakan provider() fungsi, kita bisa membuat layanan dapat dikonfigurasi.
Kita dapat membuat dikonfigurasi penyedia jasa dengan menggunakan sintaks seperti yang diberikan di bawah ini.
/*step1:define a service */
app.provider('service',function serviceProviderConstructor(){});
/*step2:configure the service */
app.config(function configureService(serviceProvider){});
1.Penyedia objek dibuat menggunakan constructor fungsi yang kita definisikan di kami penyedia fungsi.
var serviceProvider = new serviceProviderConstructor();
2.Fungsi kami berlalu dalam aplikasi.config(), mendapatkan dieksekusi. Ini disebut konfigurasi fase, dan di sini kami memiliki kesempatan untuk menyesuaikan layanan kami.
configureService(serviceProvider);
3.Akhirnya contoh layanan ini dibuat dengan memanggil $mendapatkan metode serviceProvider.
serviceInstance = serviceProvider.$get()
var app= angular.module('myApp', []);
app.provider('providerPattern',function providerConstructor(){
//this function works as constructor function for provider
this.firstName = 'Arnold ';
this.lastName = ' Schwarzenegger' ;
this.greetMessage = ' Welcome, This is default Greeting Message' ;
//adding some method which we can call in app.config() function
this.setGreetMsg = function(msg){
if(msg){
this.greetMessage = msg ;
}
};
//We can also add a method which can change firstName and lastName
this.$get = function(){
var firstName = this.firstName;
var lastName = this.lastName ;
var greetMessage = this.greetMessage;
var data={
greet: function(){
console.log('hello, ' + firstName + lastName+'! '+ greetMessage);
}
};
return data ;
};
});
app.config(
function(providerPatternProvider){
providerPatternProvider.setGreetMsg(' How do you do ?');
}
);
Pabrik menggunakan pabrik fungsi yang kembali contoh layanan. serviceInstance = fnFactory();
Layanan menggunakan fungsi constructor dan Sudut memanggil konstruktor ini menggunakan fungsi 'baru' kata kunci untuk membuat contoh layanan. serviceInstance = new fnServiceConstructor();
Provider mendefinisikan providerConstructor fungsi, ini providerConstructor fungsi mendefinisikan sebuah pabrik fungsi $sampai . Sudut panggilan $get() untuk membuat objek layanan. Penyedia sintaks memiliki keuntungan tambahan dari mengkonfigurasi layanan objek yang sebelum itu bisa diturunkan. serviceInstance = $get();
Seperti yang ditunjukkan oleh beberapa orang disini benar-benar pabrik, penyedia, layanan, dan bahkan nilai dan konstan adalah versi dari hal yang sama. Anda dapat membedah lebih umum penyedia
ke semua dari mereka. Seperti:
Berikut ini's artikel gambar ini adalah dari:
Anda memberikan AngularJS fungsi, AngularJS akan cache dan menyuntikkan kembali nilai ketika pabrik diminta.
Contoh:
app.factory('factory', function() {
var name = '';
// Return value **is** the object that will be injected
return {
name: name;
}
})
Penggunaan:
app.controller('ctrl', function($scope, factory) {
$scope.name = factory.name;
});
Anda memberikan AngularJS fungsi, AngularJS akan memanggil new untuk menurunkannya. Ini adalah contoh yang AngularJS menciptakan yang akan di-cache dan disuntikkan ketika layanan yang diminta. Karena new digunakan untuk instantiate layanan, kata kunci ini berlaku dan mengacu pada contoh.
Contoh:
app.service('service', function() {
var name = '';
this.setName = function(newName) {
name = newName;
}
this.getName = function() {
return name;
}
});
Penggunaan:
app.controller('ctrl', function($scope, service) {
$scope.name = service.getName();
});
Anda memberikan AngularJS fungsi, dan AngularJS akan memanggil $get
fungsi. Itu adalah nilai kembali dari $get
fungsi yang akan di-cache dan disuntikkan ketika layanan yang diminta.
Penyedia memungkinkan anda untuk mengkonfigurasi penyedia sebelum AngularJS panggilan $get
metode untuk mendapatkan suntik.
Contoh:
app.provider('provider', function() {
var name = '';
this.setName = function(newName) {
name = newName;
}
this.$get = function() {
return {
name: name
}
}
})
Penggunaan (sebagai injeksi di controller)
app.controller('ctrl', function($scope, provider) {
$scope.name = provider.name;
});
Penggunaan (konfigurasi penyedia sebelum $get
dipanggil untuk membuat injeksi)
app.config(function(providerProvider) {
providerProvider.setName('John');
});
Aku melihat sesuatu yang menarik ketika bermain-main dengan penyedia.
Visibilitas suntik berbeda untuk penyedia dari itu untuk jasa dan pabrik. Jika anda menyatakan AngularJS "konstan" (misalnya, myApp.konstan('a', 'Robert');
), anda dapat memasukkannya ke jasa, pabrik, dan penyedia.
Tapi jika anda menyatakan AngularJS "nilai" (misalnya., myApp.nilai('b', {nama: 'Jones'});
), anda dapat memasukkannya ke pelayanan dan pabrik-pabrik, tapi TIDAK ke provider-membuat fungsi. Anda dapat, namun, inject ke $get
fungsi yang anda tentukan untuk operator anda. Hal ini disebutkan dalam AngularJS dokumentasi, tapi itu's mudah untuk kehilangan. Anda dapat menemukannya di %memberikan halaman pada bagian pada nilai konstan dan metode.
<div ng-app="MyAppName">
<div ng-controller="MyCtrl">
<p>from Service: {{servGreet}}</p>
<p>from Provider: {{provGreet}}</p>
</div>
</div>
<script>
var myApp = angular.module('MyAppName', []);
myApp.constant('a', 'Robert');
myApp.value('b', {name: 'Jones'});
myApp.service('greetService', function(a,b) {
this.greeter = 'Hi there, ' + a + ' ' + b.name;
});
myApp.provider('greetProvider', function(a) {
this.firstName = a;
this.$get = function(b) {
this.lastName = b.name;
this.fullName = this.firstName + ' ' + this.lastName;
return this;
};
});
function MyCtrl($scope, greetService, greetProvider) {
$scope.servGreet = greetService.greeter;
$scope.provGreet = greetProvider.fullName;
}
</script>
Ini sangat membingungkan untuk pemula dan saya telah mencoba untuk menjelaskan dalam kata-kata yang mudah
AngularJS Layanan: digunakan untuk berbagi fungsi utilitas dengan layanan referensi di controller. Layanan singleton di alam sehingga untuk satu layanan hanya satu contoh yang dibuat di browser dan referensi yang sama digunakan di seluruh halaman.
Dalam pelayanan, kita buat nama-nama fungsi sebagai properti dengan ini objek.
AngularJS Pabrik: tujuan dari Pabrik adalah juga sama seperti Layanan namun dalam hal ini kita membuat objek baru dan menambahkan fungsi-fungsi sebagai sifat dari objek ini dan pada akhirnya kita kembali objek ini.
AngularJS Penyedia: tujuan dari hal ini adalah lagi yang sama namun Penyedia memberikan output dari itu's $mendapatkan fungsi.
Mendefinisikan dan menggunakan Layanan, Pabrik dan Penyedia dijelaskan di http://www.dotnetfunda.com/articles/show/3156/difference-between-angularjs-service-factory-and-provider
Bagi saya yang terbaik dan paling sederhana cara memahami perbedaan adalah:
var service, factory;
service = factory = function(injection) {}
Bagaimana AngularJS instantiates komponen tertentu (sederhana):
// service
var angularService = new service(injection);
// factory
var angularFactory = factory(injection);
Jadi, untuk layanan ini, apa yang menjadi AngularJS komponen objek instance dari kelas yang diwakili oleh layanan deklarasi fungsi. Untuk pabrik, itu adalah hasil yang dikembalikan dari pabrik deklarasi fungsi. Pabrik dapat berperilaku sama seperti layanan:
var factoryAsService = function(injection) {
return new function(injection) {
// Service content
}
}
Yang paling sederhana cara berpikir anda adalah salah satu yang berikut ini:
Pabrik 'kelas' contoh disediakan di komentar sekitar, serta penyedia perbedaan.
Saya klarifikasi mengenai hal ini:
Pada dasarnya semua jenis yang disebutkan (jasa, pabrik, provider, dll.) hanya membuat dan mengkonfigurasi variabel global (yang tentu saja global untuk seluruh aplikasi), hanya sebagai kuno global variabel.
Sedangkan variabel global adalah tidak dianjurkan, penggunaan nyata ini variabel global adalah untuk memberikan dependency injection, dengan melewati variabel yang relevan controller.
Ada banyak tingkat komplikasi dalam menciptakan nilai untuk "variabel global":
app.config
.
app.config
file , dan ini $.dapatkan fungsi berperilaku sebagai pabrik di atas, bahwa nilai kembali digunakan untuk menginisialisasi "global" variabel. Pemahaman saya adalah sangat sederhana di bawah ini.
Pabrik: Anda cukup membuat sebuah objek di dalam pabrik dan mengembalikannya.
Layanan:
Anda hanya memiliki fungsi standar yang menggunakan kata kunci ini untuk mendefinisikan sebuah fungsi.
Penyedia:
Ada $get
objek yang anda tentukan dan dapat digunakan untuk mendapatkan objek yang mengembalikan data.
Ringkasan dari Sudut docs:
Jawaban terbaik dari SEHINGGA:
https://stackoverflow.com/a/26924234/165673 (<-- BAIK) https://stackoverflow.com/a/27263882/165673 https://stackoverflow.com/a/16566144/165673
Semua jawaban yang baik sudah. Saya ingin menambahkan beberapa poin lagi di Layanan dan Pabrik. Seiring dengan perbedaan antara layanan/pabrik. Dan satu juga dapat memiliki pertanyaan-pertanyaan seperti:
Mari kita mulai dengan perbedaan antara Layanan dan pabrik:
Keduanya Lajang: Setiap kali menemukan Sudut ini sebagai ketergantungan pertama kali,ia membuat satu contoh dari layanan/pabrik. Setelah instance dibuat, contoh sama digunakan selamanya.
Dapat digunakan untuk memodelkan suatu objek dengan perilaku: Mereka berdua bisa memiliki metode, keadaan internal variabel, dan sebagainya. Meskipun cara anda menulis kode yang akan berbeda.
Layanan:
Layanan adalah fungsi constructor, dan Sudut akan menurunkannya dengan panggilan baru yourServiceName()
. Ini berarti beberapa hal.
ini
.baru yourServiceName(
), ia akan menerima ini
objek dengan semua sifat anda menempatkan di atasnya.Sampel Contoh:
angular.service('MyService', function() {
this.aServiceVariable = "Ved Prakash"
this.aServiceMethod = function() {
return //code
};
});
Ketika Sudut menyuntikkan ini
MyService
layanan ke controller yang tergantung pada hal itu, controller yang akan mendapatkanMyService
bahwa hal itu dapat panggilan fungsi pada, misalnya MyService.aServiceMethod ().
Hati-hati dengan ini
:
Sejak dibangun service adalah sebuah objek, metode yang dalam hal ini dapat merujuk pada hal ini ketika mereka disebut:
angular.service('ScoreKeeper', function($http) {
this.score = 0;
this.getScore = function() {
return this.score;
};
this.setScore = function(newScore) {
this.score = newScore;
};
this.addOne = function() {
this.score++;
};
});
Anda mungkin tergoda untuk memanggil Pencatat.setScore
di sebuah janji rantai, misalnya jika anda diinisialisasi skor dengan meraih itu dari server: $http.mendapatkan('/skor').kemudian(Pencatat.setScore).
Masalah dengan ini adalah bahwa Pencatat.setScore
akan disebut dengan ini
terikat null
dan anda akan mendapatkan kesalahan. Cara yang lebih baik akan $http.mendapatkan('/skor').kemudian(Pencatat.setScore.bind(Pencatat))
.
Apakah anda memilih untuk menggunakan ini dalam pelayanan anda metode atau tidak, hati-hati bagaimana anda menyebut mereka.
Mengembalikan sebuah Nilai dari sebuah Pelayanan
:
Karena bagaimana JavaScript konstruktor bekerja, jika anda kembali nilai kompleks (yaitu, suatu Objek)
dari pembina
fungsi, pemanggil akan mendapatkan Objek yang bukan dari hal ini.
Ini berarti bahwa anda pada dasarnya dapat copy-paste pabrik contoh dari bawah, ganti pabrik
dengan service
, dan itu akan bekerja:
angular.service('MyService', function($http) {
var api = {};
api.aServiceMethod= function() {
return $http.get('/users');
};
return api;
});
Jadi, ketika Sudut konstruksi layanan anda dengan yang baru MyService(), ia akan mendapatkan bahwa api obyek bukan MyService contoh.
Ini adalah perilaku untuk setiap nilai-nilai yang kompleks (benda, fungsi) tetapi tidak untuk tipe primitif.
Pabrik:
Sebuah pabrik tua polos fungsi yang mengembalikan nilai. Nilai kembali adalah apa yang akan disuntikkan ke hal-hal yang tergantung pada pabrik. Khas pola pabrik di Sudut untuk mengembalikan sebuah objek dengan fungsi sebagai sifat-sifat, seperti ini:
angular.factory('MyFactory', function($http) {
var api = {};
api.aFactoryMethod= function() {
return $http.get('/users');
};
return api;
});
disuntikkan nilai untuk pabrik ketergantungan pabrik kembali nilai, dan itu tidak harus menjadi sebuah objek. Ini bisa menjadi fungsi
Jawaban untuk di atas 1 dan 2 pertanyaan:
Untuk sebagian besar, hanya menempel dengan menggunakan pabrik-pabrik untuk semuanya. perilaku Mereka lebih mudah untuk memahami. Tidak ada pilihan untuk membuat tentang apakah untuk mengembalikan nilai atau tidak, dan selanjutnya, tidak ada bug untuk menjadi diperkenalkan jika anda melakukan hal yang salah.
saya masih merujuk kepada mereka sebagai "layanan" ketika saya berbicara tentang suntik mereka sebagai dependensi, meskipun.
Layanan/Pabrik perilaku yang sangat mirip, dan beberapa orang akan mengatakan yang satu adalah baik-baik saja. Itu agak benar, tapi saya merasa lebih mudah untuk mengikuti saran dari John Papa panduan gaya dan hanya dengan tongkat pabrik-pabrik.**
Ada jawaban yang baik sudah, tapi saya hanya ingin berbagi satu ini.
Pertama-tama: Provider adalah cara/resep untuk membuat layanan
(singleton objek) yang kira yang akan disuntikkan oleh $injector (bagaimana AngulaJS pergi tentang IoC pola).
Dan Nilai, Pabrik, Layanan dan Konstan (4 hal) - sintaksis gula di atas Provider cara/recepie.
Ada Layanan vs Pabrik
bagian yang telah dibahas:
Layanan adalah semua tentang baru
kata kunci benar-benar yang seperti kita tahu tidak 4 hal:
prototipe
objekkonteks
untuk ini
ini
Dan Pabrik adalah semua tentang Pabrik - Pola berisi fungsi-fungsi yang mengembalikan benda-Benda seperti Layanan tersebut.
Dan ini sederhana/pendek video: mencakup juga Provider:
(di sana anda melihat dapat melihat bagaimana mereka pergi dari pabrik ke penyedia)Provider resep ini digunakan terutama dalam aplikasi config, sebelum aplikasi telah sepenuhnya dimulai/diinisialisasi.
Tambahan klarifikasi bahwa pabrik-pabrik dapat membuat fungsi/primitif, sedangkan jasa tidak dapat. Check out ini [jsFiddle][1] berdasarkan Epokk's:
.Pabrik mengembalikan fungsi yang dapat dipanggil:
myApp.factory('helloWorldFromFactory', function() {
return function() {
return "Hello, World!";
};
});
Pabrik juga dapat kembali sebuah objek dengan metode yang dapat dipanggil:
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!";
}
};
});
Layanan mengembalikan sebuah objek dengan metode yang dapat dipanggil:
myApp.service('helloWorldFromService', function() {
this.sayHello = function() {
return "Hello, World!";
};
});
Untuk lebih jelasnya, lihat posting saya tulis pada perbedaan: http://www.shanemkeller.com/tldr-services-vs-factories-in-angular/
Setelah membaca semua posting Itu dibuat lebih membingungkan untuk saya.. Tapi masih semua adalah worthfull informasi.. akhirnya saya menemukan berikut tabel yang akan memberikan informasi dengan perbandingan sederhana
Dan untuk pemula memahami:- Ini mungkin tidak benar use case tetapi dalam tingkat tinggi ini adalah apa yang usecase ini tiga.
angular.module('myApp').config(function($testProvider){
$testProvider.someFunction();
})
Untuk skenario dasar pabrik&Layanan berperilaku yang sama.
Berikut ini adalah beberapa broilerplate kode I've datang dengan kode template untuk objek pabrik di AngularjS. I've digunakan Mobil/CarFactory sebagai contoh untuk menggambarkan. Membuat sederhana implementasi kode di controller.
<script>
angular.module('app', [])
.factory('CarFactory', function() {
/**
* BroilerPlate Object Instance Factory Definition / Example
*/
this.Car = function() {
// initialize instance properties
angular.extend(this, {
color : null,
numberOfDoors : null,
hasFancyRadio : null,
hasLeatherSeats : null
});
// generic setter (with optional default value)
this.set = function(key, value, defaultValue, allowUndefined) {
// by default,
if (typeof allowUndefined === 'undefined') {
// we don't allow setter to accept "undefined" as a value
allowUndefined = false;
}
// if we do not allow undefined values, and..
if (!allowUndefined) {
// if an undefined value was passed in
if (value === undefined) {
// and a default value was specified
if (defaultValue !== undefined) {
// use the specified default value
value = defaultValue;
} else {
// otherwise use the class.prototype.defaults value
value = this.defaults[key];
} // end if/else
} // end if
} // end if
// update
this[key] = value;
// return reference to this object (fluent)
return this;
}; // end this.set()
}; // end this.Car class definition
// instance properties default values
this.Car.prototype.defaults = {
color: 'yellow',
numberOfDoors: 2,
hasLeatherSeats: null,
hasFancyRadio: false
};
// instance factory method / constructor
this.Car.prototype.instance = function(params) {
return new
this.constructor()
.set('color', params.color)
.set('numberOfDoors', params.numberOfDoors)
.set('hasFancyRadio', params.hasFancyRadio)
.set('hasLeatherSeats', params.hasLeatherSeats)
;
};
return new this.Car();
}) // end Factory Definition
.controller('testCtrl', function($scope, CarFactory) {
window.testCtrl = $scope;
// first car, is red, uses class default for:
// numberOfDoors, and hasLeatherSeats
$scope.car1 = CarFactory
.instance({
color: 'red'
})
;
// second car, is blue, has 3 doors,
// uses class default for hasLeatherSeats
$scope.car2 = CarFactory
.instance({
color: 'blue',
numberOfDoors: 3
})
;
// third car, has 4 doors, uses class default for
// color and hasLeatherSeats
$scope.car3 = CarFactory
.instance({
numberOfDoors: 4
})
;
// sets an undefined variable for 'hasFancyRadio',
// explicitly defines "true" as default when value is undefined
$scope.hasFancyRadio = undefined;
$scope.car3.set('hasFancyRadio', $scope.hasFancyRadio, true);
// fourth car, purple, 4 doors,
// uses class default for hasLeatherSeats
$scope.car4 = CarFactory
.instance({
color: 'purple',
numberOfDoors: 4
});
// and then explicitly sets hasLeatherSeats to undefined
$scope.hasLeatherSeats = undefined;
$scope.car4.set('hasLeatherSeats', $scope.hasLeatherSeats, undefined, true);
// in console, type window.testCtrl to see the resulting objects
});
</script>
Berikut ini adalah contoh sederhana. I'm menggunakan beberapa perpustakaan pihak ketiga yang mengharapkan "Posisi" objek mengekspos garis lintang dan garis bujur, tapi melalui objek yang berbeda sifat. Aku't ingin hack kode vendor, jadi saya menyesuaikan "Posisi" benda-benda yang aku melewati sekitar.
angular.module('app')
.factory('PositionFactory', function() {
/**
* BroilerPlate Object Instance Factory Definition / Example
*/
this.Position = function() {
// initialize instance properties
// (multiple properties to satisfy multiple external interface contracts)
angular.extend(this, {
lat : null,
lon : null,
latitude : null,
longitude : null,
coords: {
latitude: null,
longitude: null
}
});
this.setLatitude = function(latitude) {
this.latitude = latitude;
this.lat = latitude;
this.coords.latitude = latitude;
return this;
};
this.setLongitude = function(longitude) {
this.longitude = longitude;
this.lon = longitude;
this.coords.longitude = longitude;
return this;
};
}; // end class definition
// instance factory method / constructor
this.Position.prototype.instance = function(params) {
return new
this.constructor()
.setLatitude(params.latitude)
.setLongitude(params.longitude)
;
};
return new this.Position();
}) // end Factory Definition
.controller('testCtrl', function($scope, PositionFactory) {
$scope.position1 = PositionFactory.instance({latitude: 39, longitude: 42.3123});
$scope.position2 = PositionFactory.instance({latitude: 39, longitude: 42.3333});
}) // end controller
;