Yesterday, I heard a colleague state that the factory in angular is not the same as the factory pattern. I'm curious about if this is a valid statement and why.
Normally factories will create you an instance of an object. From looking at our code, it looks like the factory is a wrapper or object that can be called for the related web services as well, so GET, PUT, POST, PATCH, DELETE. There are some instances, where this varies, however for the most part, it looks like something that helps interact with the related web services.
Having a factory that returns objects just based on "GET" seems like it would align more with a traditional factory pattern, but the fact that we deal with the other verbs, makes me think that is where things deviate from the pattern.
Can someone confirm if this is the standard way to use angular factories and if so, if my intuition/thoughts are correct, or if I'm missing something?
Update
There as a request to provide code as to what I'm talking about. I did some googling for angular factory examples, to see if others are doing similar stuff as to what I'm seeing at my work. Which I found the following example: http://weblogs.asp.net/dwahlin/using-an-angularjs-factory-to-interact-with-a-restful-service
When you look at the example, you'll notice that the "dataFactory" does not just have a GET, it has other HTTP verbs too. Is this bad practice from the user base, or is it the standard way to use it and the factory is different from the design pattern?
Factory is a recipe of Provider in Angular and a form of Factory pattern, which is simply a process of one object takes responsibility to create other objects.
The example you referred is also an implementation of Factory pattern though not ideal, dataFactory creates and returns a proxy kind object which will be used in another consuming class to perform CRUD operations. Don't confuse it with HTTP verbs which are nothing to do with Factory pattern. In other words, factory class can return an object that can contain any kind of operations.
An ideal way to implement factory class:
function Bird(type) {
this.type = type;
//constructor logic
this.fly= function () {
//other business logic
};
}
//Below class is a factory which creates object for requested Bird type
function BirdFactory() {
this.create = function(type) {
return new Bird(type);
};
}
Hope this clarifies.
Related
We have a large Angularjs 1.6 application that has $rootscope scattered throughout the app in over 200 places in filters, services, routes, etc.. so it needs to be refactored, but I'm not sure how to know when to remove it. When is it a best practice to use $rootscope in the application?
I've read everything from never, to using it for storing variables, which I assumed was for sharing data between controllers. I've since read that it's better to use factories/services for this use case instead and I also read that one valid use case is to use $rootscope as a global event bus.
I didn't really see this explained in the Angularjs docs.
From ng-book:
When Angular starts to run and generate the view, it will create a binding from the root ng-app
element to the $rootScope. This $rootScope is the eventual parent of all $scope objects.
The $rootScope object is the closest object we have to the global context in an
Angular app. It’s a bad idea to attach too much logic to this global context, in the
same way that it’s not a good idea to dirty the JavaScript global scope.
You are right, you should definitely use Services to share data and logic between your modules.
Putting a lot of logic in your $rootScope means having bad maintainability and modularity in your application, it is also very difficult to test issues.
I highly suggest you to take a look at:
Services AngularJS Documentation
Thinkster brilliant article on how to share data between controllers
Screencast by Simpulton
#Breck421 answer to this question
I know it may be easy to attach everything to $rootScope, but It is just difficult to work on it, make little changes, reusing your code for other applications or modules and test your application in general.
EDIT
Recently I had to fetch some items from API and catch these items in order to show them in a certain view. The item fetching mechanism was in a certain Factory, while the mechanism to format and show the items was in a Controller.
So, I had to emit an event in the Factory when items got fetched and catch this event in the Controller.
$rootScope way
//Factory
$rootScope.$broadcast('refreshItems', items);
//Controller
$scope.$on('refreshItems', doSomething());
It clearly worked but I didn't really like to use $rootScope and I've also noticed that the performance of that task were pretty miserable.
Then I tried giving a shot to Postal.js:
Postal.js is an in-memory message bus - very loosely inspired by AMQP -
written in JavaScript. Postal.js runs in the browser, or on the server
using node.js. It takes the familiar "eventing-style" paradigm (of
which most JavaScript developers are familiar) and extends it by
providing "broker" and subscriber implementations which are more
sophisticated than what you typically find in simple event
emitting/aggregation.
I tried using Postal.js for this kind of needs and I found out that it is really faster than using $rootScope for this purpose.
//Factory
$scope.$bus.publish({
channel : 'reloadItems',
topic : 'reloadItems'
data : items
);
//Controller
$scope.$bus.subscribe({
channel : 'reloadItems',
topic : 'reloadItems',
callback : function () {
resetAndLoadItems();
}
});
I hope I've been helpful.
From Angluar docs: Every application has a single root scope. All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes.
Of course this is going to come down to a matter of opinion and style. I tend to follow a style very close to John Papa's Angular Style Guide.
In keeping with the two, and following a good separation of concerns strategy my architecture contains factory models that are shared across the application. My controllers in turn are all bound to the services that hold the shared data.
Using $rootScope as the global event bus is exactly how Angular uses it. Should you tag along and do the same? I don't see why not. But if you are, make sure that the purpose is clearly defined and maybe even use your own service to register events to the global event bus. That way you are decoupling your app from Angular, and if you ever decide that you want to change the framework in which your global event bus lives then you can change it in one place.
This is what I'm suggesting:
Global event bus
// Angular specific: add service to module
angular.module('app').factory('globalEventBus', GlobalEventBus);
// Angular specific: inject dependencies
GlobalEventBus.$inject(['$rootScope']);
// Non framework specific.
// param: fameworkEventBus will be $rootScope once injected
function GlobalEventBus(fameworkEventBus) {
var globalEventBus = this;
globalEventBus.registerEvent(params...){
fameworkEventBus.
}
return globalEventBus;
}
Global data models
My data models are smart and tend to contain functions that provide information about themselves or retrieve/return specific data.
// Angular specific: add service to module
angular.module('app').factory('dataModel', DataModel);
function DataModel() {
var dataModel= this;
dataModel.myData = {};
dataModel.GetSpecificData = funtion(param){
return ...
}
return dataModel;
}
The controller
// Angular specific
angular.module('app').controller('MyController', MyController);
// Angular specific: inject dependencies to controller
MyController.$inject = ['dataModel'];
// By convention I use the same parameter name as the service.
// It helps me see quickly if my order of injection is correct
function MyController(dataModel) {
var myController = this;
// Bind to the service itself, and NOT to the service data property
myController.myData = dataModel;
myController.doStuff = function(){
}
}
Here is a fun post about binding to services and not to service properties.
All in all you have to be the judge of what works best for you. A good system architecture and good style have saved me countless hours of solving completely avoidable problems.
After doing some more work with Angular and more reading I found this basic rule of thumb for using $rootscope that I wanted to add to the other answers:
Only add properties that are static or constant. Anything else that
represents a changing state or a mutable value should have a
corresponding directive or controller to handle it.
We have a large Angularjs 1.6 application that has $rootscope scattered throughout the app in over 200 places in filters, services, routes, etc.. so it needs to be refactored, but I'm not sure how to know when to remove it. When is it a best practice to use $rootscope in the application?
I've read everything from never, to using it for storing variables, which I assumed was for sharing data between controllers. I've since read that it's better to use factories/services for this use case instead and I also read that one valid use case is to use $rootscope as a global event bus.
I didn't really see this explained in the Angularjs docs.
From ng-book:
When Angular starts to run and generate the view, it will create a binding from the root ng-app
element to the $rootScope. This $rootScope is the eventual parent of all $scope objects.
The $rootScope object is the closest object we have to the global context in an
Angular app. It’s a bad idea to attach too much logic to this global context, in the
same way that it’s not a good idea to dirty the JavaScript global scope.
You are right, you should definitely use Services to share data and logic between your modules.
Putting a lot of logic in your $rootScope means having bad maintainability and modularity in your application, it is also very difficult to test issues.
I highly suggest you to take a look at:
Services AngularJS Documentation
Thinkster brilliant article on how to share data between controllers
Screencast by Simpulton
#Breck421 answer to this question
I know it may be easy to attach everything to $rootScope, but It is just difficult to work on it, make little changes, reusing your code for other applications or modules and test your application in general.
EDIT
Recently I had to fetch some items from API and catch these items in order to show them in a certain view. The item fetching mechanism was in a certain Factory, while the mechanism to format and show the items was in a Controller.
So, I had to emit an event in the Factory when items got fetched and catch this event in the Controller.
$rootScope way
//Factory
$rootScope.$broadcast('refreshItems', items);
//Controller
$scope.$on('refreshItems', doSomething());
It clearly worked but I didn't really like to use $rootScope and I've also noticed that the performance of that task were pretty miserable.
Then I tried giving a shot to Postal.js:
Postal.js is an in-memory message bus - very loosely inspired by AMQP -
written in JavaScript. Postal.js runs in the browser, or on the server
using node.js. It takes the familiar "eventing-style" paradigm (of
which most JavaScript developers are familiar) and extends it by
providing "broker" and subscriber implementations which are more
sophisticated than what you typically find in simple event
emitting/aggregation.
I tried using Postal.js for this kind of needs and I found out that it is really faster than using $rootScope for this purpose.
//Factory
$scope.$bus.publish({
channel : 'reloadItems',
topic : 'reloadItems'
data : items
);
//Controller
$scope.$bus.subscribe({
channel : 'reloadItems',
topic : 'reloadItems',
callback : function () {
resetAndLoadItems();
}
});
I hope I've been helpful.
From Angluar docs: Every application has a single root scope. All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes.
Of course this is going to come down to a matter of opinion and style. I tend to follow a style very close to John Papa's Angular Style Guide.
In keeping with the two, and following a good separation of concerns strategy my architecture contains factory models that are shared across the application. My controllers in turn are all bound to the services that hold the shared data.
Using $rootScope as the global event bus is exactly how Angular uses it. Should you tag along and do the same? I don't see why not. But if you are, make sure that the purpose is clearly defined and maybe even use your own service to register events to the global event bus. That way you are decoupling your app from Angular, and if you ever decide that you want to change the framework in which your global event bus lives then you can change it in one place.
This is what I'm suggesting:
Global event bus
// Angular specific: add service to module
angular.module('app').factory('globalEventBus', GlobalEventBus);
// Angular specific: inject dependencies
GlobalEventBus.$inject(['$rootScope']);
// Non framework specific.
// param: fameworkEventBus will be $rootScope once injected
function GlobalEventBus(fameworkEventBus) {
var globalEventBus = this;
globalEventBus.registerEvent(params...){
fameworkEventBus.
}
return globalEventBus;
}
Global data models
My data models are smart and tend to contain functions that provide information about themselves or retrieve/return specific data.
// Angular specific: add service to module
angular.module('app').factory('dataModel', DataModel);
function DataModel() {
var dataModel= this;
dataModel.myData = {};
dataModel.GetSpecificData = funtion(param){
return ...
}
return dataModel;
}
The controller
// Angular specific
angular.module('app').controller('MyController', MyController);
// Angular specific: inject dependencies to controller
MyController.$inject = ['dataModel'];
// By convention I use the same parameter name as the service.
// It helps me see quickly if my order of injection is correct
function MyController(dataModel) {
var myController = this;
// Bind to the service itself, and NOT to the service data property
myController.myData = dataModel;
myController.doStuff = function(){
}
}
Here is a fun post about binding to services and not to service properties.
All in all you have to be the judge of what works best for you. A good system architecture and good style have saved me countless hours of solving completely avoidable problems.
After doing some more work with Angular and more reading I found this basic rule of thumb for using $rootscope that I wanted to add to the other answers:
Only add properties that are static or constant. Anything else that
represents a changing state or a mutable value should have a
corresponding directive or controller to handle it.
Currently I have a bunch of controllers that seems a little too bulky for my liking in that they manage both the logic and the storing of data.
For instance let us take a over simplified register controller:
$scope.username = "";
$scope.password = "";
$scope.validateUsername= function(){
......
}
$scope.validatePassword= function(){
......
}
$scope.updateUserConfig = function(){
//a rest call here
}
ok so to me this seems like it is wrong because the controller is storing data, performing logic and making calls to a rest service.
I thought the controller should be the logic for the view it is used for while the "model" i.e. username and password should be somewhere else as well as the call to the rest service.
I have looked about and have seen people employing factories that are injected into the controller for the rest calls; as these factories will not store state they can be shared across the entire application, so this seems like a good idea ?
I am unsure about the data aspect though, is it normal for data to be stored within the controller or is there a better practice for this?
It is important to remember that your view must bind to the data/methods in the controller, so it must be exposed in such a way for this to be possible. In other words, there's nothing wrong with having these properties in your controller.
That being said, this data often comes from an external source or is needed in multiple views/controllers so it's common for a factory/service to return an object to a controller and then assign that object to a $scope property. This way you can abstract that layer away and share the data across your application without repeating yourself.
I'm a bit confused with Angular. I have two factories, with code looks almost the same, because they performs CRUD operations on two different objects in db, and I want to make them DRY.
So I have idea to move common logic to separate service, and I want it to works something like that :
angular.module('app').factory('first',['commonService',function(commonService){
return new commonService('someSpecificVariable');
}])
and service :
angular.module('app').service('commonService',['someDep1',function(someDep1,someSpecificVariable){
var something = someSpecificVariable;
}]);
I looked at providers, but i need something to instantiate. How can I achieve this?
In another words I want create factory responsible for all crud operation requests for all app modules, because writing many factories just to handle http/crud don't looks ok for me.
Ok i descriped it quite bad.
SOLUTION Is it possible and in good form to reuse the same data factory in Angular?
Factories
They let you share code between controllers as well as making http calls to your API. They are really about making some reusable code that you can instantiate in your controllers to make your life easier and your controllers cleaner.
Simple Example
.factory('FindFriend', function ($http, $rootScope) {
return {
find: function (phone) {
return $http.get('http://130.211.90.249:3000/findFriend', { params: {phone:phone}})
},
add: function (id) {
return $http.get('http://130.211.90.249:3000/addFriend', { params: {friendid:id, user_id: $rootScope.session} })
},
deleteFriend: function (id) {
return $http.get('http://130.211.90.249:3000/deleteFriend', {params:{idfriends: id}})
}
}
})
Explanation
So above we can see a factory called FindFriend. The factory has 3 methods find add and delete. these are different http calls (in your code they shouldn't be all get methods but this is some old code I wrote).
They can be instantiated by adding them into the top of the controller and then calling there functions like FindFriend.add
Hope this sheds some light on factories for you.
I know how factories works, but i dont want to add bunch of functions responsible for each module. I wish to make service, which will replace patches to $http calls based of provided module name in constructor. ex 'orders' will make request :
$http.post('/api'+'orders'+'/lazy')...
About shared state between controllers. I have a hard time finding the right way to do this from all the possible solutions recommended on SO. I made this sketch to illustrate the basic idea I had about this so far using a factory.
There is the factory myFactory, that holds a shared variable sharedVar.
The controllers Ctrl1, Ctrl2, Ctrl3 want to access always the updated version. They also can call an updateViaHttp.
Is that the right purpose of a factory? (in general to share state,
specific to the other options like service and provider)
If so, how to watch changes of the sharedVar in a proper way? (by
reference of objects, $watch, events (broadcast, on), ...)
Is there a general pattern that works well for objects, arrays and
primitives.
You've got the basic idea right, assuming by 'factory' you mean 'service' -- it's kind of confusing, I know, because services are declared using factory functions. That said, it's an important distinction to make so that you'll have an easier time finding documentation, etc.
Watch changes either just by using object references and being careful about watch depths in Angular (my preferred method) or by explicitly registering $watch statements (still be careful about watch depths). Generally I'm of the opinion that you shouldn't overuse broadcasts as it can make your code a little messy. It also kind of defeats the point of the service in this case, which is to be the source of shared state.
My general pattern for creating services is to bind everything I want to use to an object (both data and functions) and then return that object in the factory function. Sometimes you have to introduce some extra nesting so that the Javascript prototypical inheritance doesn't mess with you (see the watch depths thing again) but that's the general idea.
An example service for your set up:
angular.factory('shareAndUpdate', ['dependencyInjection', function(dependency) {
var srvc = {};
srvc.sharedVar = 'something';
srvc.updateViaHttp = function(){ something };
return srvc;
}]);
factories vs services vs providers - only differences are related to how the Dependency Injector provides instances of them to you. Services are specifically designed for providing singletons, but are just a wrapper over factories that add the singleton specific functionality. Nothing stopping you from returning a singleton from a factory.
using services to share state - you need a singleton and a service makes defining and injecting singletons easy.
SomeService:
var foo = {
bar = 'a';
};
function getFoo() {
return foo;
}
SomeController[SomeService injected here] :
$scope.foo = SomeService.getFoo();
$scope.$watch('foo.bar', ...);
$scope.setFooBar = function(val) {
$scope.foo.bar = val;
};
2
The general pattern here is to never do a
$scope.foo = { bar: 'Some other reference' }; because then all your other things depending on SomeService will not get the new reference when you overwrite it - the "infamous" always use a "dot" in $scope stuff issue.
You are probably looking for something like a pubsub service:
https://www.npmjs.com/package/angular-pubsub
However, in my experience, through proper design, you can minimize the necessity to share data in between non-nested controllers.
Sometimes it is unavoidable, though, for stuff like login credentials, permissions, stuff that is all-app-encompassing. In such occasions you can use a service to indeed share/get the state in between controllers, or you can go for the fully-fledged pubsub mechanism.
A factory is just another way of specifying a service. A factory, when called, gives an instance of a service. This service you can use for everything that you want, one of those things being sharing state in between your controllers.
You can watch a shared variable in many ways, the easiest being inheriting scopes, but, as you mentioned, sometimes your controllers don't necessarily inherit their scopes. Then you can use a pubsub service or just broadcast events on a shared scope for both controllers (like $rootScope, which is the parent of all controllers' scopes for your app).
If you were to use an existing pubsubservice, it would still be up to your implementing controllers to actually do the subscribe and watching on a specific variable and updating their corresponding scopes accordingly. However, that can be avoided if you design your app in such a way that your controllers inherit the variable from a shared scope. Then they will automatically update their stuff using the normal angular mechanism. That, sadly, can not always be achieved and then what you are left with is having to implement a pubsub service.