understanding models, factories and services
i'm just starting to pick up ionic and angular and having trouble with understanding the implications of using factories/services for modeling.
Scenario:
from all the literature i've read, I want to create a factory/service for Contact and one for AddressBook.
But since Contact is a singleton, how do I put together an array of these things? once i "create" a new contact, because it is a singleton, doesn't it just make changes on the original?
angular.module('blah.services', ['ionic.utils'])
.factory('Contact', function($q){
var o = {
"name" : '',
"email" : ''
};
return o;
})
.factory('AddressBook', function($q, Contact){
var o = {};
o.contacts = [];
o.addContact = function(contact){
o.contacts.push(contact);
}
return o;
});
// and then somehwere something like
angular.module('blah.controllers', ['blah.services'])
.controller('somethingCtrl', function($scope, Contact, AddressBook) {
/* what am i supposed to do here?
is it something like
var c = new Contact();
c.name = 'foo';
AddressBook.addContact(c);
*/
});
here's some of what i read already but still can't figure this out.
http://viralpatel.net/blogs/angularjs-service-factory-tutorial/
http://mcgivery.com/ionic-using-factories-and-web-services-for-dynamic-data/
https://docs.angularjs.org/guide/providers
angular.service vs angular.factory
You are, for some reason, thinking of Angular services as something different than what they actually were meant to be. In Angular case, they are just used as elements of Dependency Injection pattern that Angular embraces. They have no say with regards to Object-Orientedness.
What I mean by that is if you have a "class" function Contact (not the the service you created):
function Contact(name){
this.name = name;
}
then you could do var contact1 = new Contact("foo"); and it doesn't necessitate there being an Angular service.
You probably should still create an Angular injectable, if you want to inject them and mock-test later, but it's nothing more than a function value, and so you could just use .value :
.value("Contact", function Contact(){...})
.controller("SomeCtrl", function($scope, Contact){
$scope.contact1 = new Contact("foo");
}
/* what am i supposed to do here? is it something like var c = new Contact();
Hmmm no, it's not. The Contact you pass to the controller refers to whatever your factory returns, which is the object o you created.
Another approach you may want to explore is to create a "model" factory and return an object with a "Contact" function (that you can instantiate in the controller) and an "addressBook" object that contains a "contacts" array. For example:
angular.module('blah.services', ['ionic.utils'])
.factory('model', function($q){
return {
Contact : function(name, email) {
this.name = name;
this.email = email;
},
addressBook : {
contacts: []
}
};
})
.controller('somethingCtrl', function($scope, model) {
// Add a contact to the address book
model.addressBook.push(new model.Contact("foo", "foo@bar"));
// Now model.addressBook contains a new model.Contact
});
You may also create the contacts array as a local/private variable in the factory (as in var contacts = []; outside the return statement) and add custom getters/setters in the addressBook object to manipulate it.
I applaud you for your OOP thinking here. It is definitely a good way to go about things. Unfortunately, you are thinking in Classes and ES5 does not currently support this. My advice for you is to not let go of this approach that you have and instead start writing ES6 code and transpile it into ES5 . This way you could make Contacts be a Class and AddressBook will indeed contain an array of Contacts .
As far as more resource on ES6 go, you should check some transpiling shims and plugins from the links below:
下一篇: 了解模型，工厂和服务