I searched several Angular style guides and best practices links, but I couldn't find a note on this issue. (Note, I am not using $scope.) If we have a ordinary web page with elements that invoke functions on the controller, my instinct from working with WPF was to do:
<button ng-click="myCtrl.save()">Save</button> ...
function myController(thingSavingService){ var ctrl = this; // ... ctrl.model.thing = {}; // ... ctrl.saveThing() = function () { thingSavingService.save(ctrl.model.thing); } } Someone suggested that perhaps having element-specific handler functions is a good practice, like:
<button ng-click="myCtrl.onSaveClicked()">Save</button> ...
function myController(thingSavingService){ var ctrl = this; // ... ctrl.model.thing = {}; // ... ctrl.onSaveClicked = function () { saveThing(); } var saveThing = function () { thingSavingService.save(ctrl.model.thing); } } Is binding these things directly to the function on the controller a good practice, or is it better to have another layer in between so that "action handlers" are separate from the domain-level functions?
In other words, with Angular, should I bind to "domain command" functions (less abstraction) or GUI action handling functions (more abstraction)?
Also, are there any articles or best practice guides that explore these nuances?
3 Answers
Answers 1
Personally, I follow John Papa's styleguide as for functions placing and abstraction level where he states to have pure functions below their assigning to controller. It's of course mainly for readability purposes.
function SessionsController() { var vm = this; vm.gotoSession = gotoSession; vm.refresh = refresh; vm.search = search; vm.sessions = []; vm.title = 'Sessions'; //////////// function gotoSession() { /* */ } function refresh() { /* */ } function search() { /* */ } } https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y033
Answers 2
It is more about styling. In sitepoint there is this article StyleGuide which talks about styling guides.
As LIFT principle states that;
It is better do in this way
function myController(thingSavingService){ var ctrl = this; ctrl.model.thing = {}; ctrl.onSaveClicked = saveThing; var saveThing = function () { thingSavingService.save(ctrl.model.thing); } } Not because of performance, but because more readability.
Answers 3
As per your terminology, angular controller public method can be treated as "action handlers" and those are seperate from domain-level functions. When I say domain level functions, I am referring to Angular Services Functions/apis.
0 comments:
Post a Comment