Recently, I've been delving into the world of AngularJS and I can't shake the feeling that my approach to the paradigm might be a bit off.
I have a controller for managing panes (linked to an ng-repeat) which tracks which panes the user has open. Each pane is supposed to contain data, leading me to think that most of them will need their own separate controllers inside.
I came across this answer on Stack Overflow (similar scenario), where the suggestion was to refactor the "popup" controller into a service.
The pane controller:
app.controller('PaneCtrl', function ($scope, PaneService){
var updatePanes = function(panes){
$scope.panes = panes;
}
// subscribes this controller to the Pane Service
PaneService.registerObserverCallback(updatePanes)
});
Service
app.factory('PaneService', function(){
var observerCallbacks=[]
var panes = []
var notifyObservers = function(){
angular.forEach(observerCallbacks, function(callback){
callback(panes);
});
}
return {
createRootPane: function(title, meta, data){
// implementation details here
},
toggleSearchPane: function(){
// implementation details here
notifyObservers();
},
registerObserverCallback: function(callback){
observerCallbacks.push(callback);
}
}
});
I'm seeking advice on what the best practice would be in this scenario, and if indeed the recommended practice is to "rewrite this as only a service", how should that service be structured?