Question

我搜索了几个Angular样式指南和最佳实践链接，但我找不到关于此问题的说明。（注意，我没有使用$ scope。）如果我们有一个普通的网页，其中的元素可以调用控制器上的函数，那么我使用WPF的本能就是这样做：

<button ng-click="myCtrl.save()">Save</button>

...

function myController(thingSavingService){
     var ctrl = this;
     // ...
     ctrl.model.thing = {};
     // ...
     ctrl.saveThing() = function () {
         thingSavingService.save(ctrl.model.thing);
     } 
}

有人建议可能具有特定于元素的处理函数是一种很好的做法，例如：

<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);
     } 
}

将这些东西直接绑定到控制器上的函数是一种很好的做法，还是介于两者之间还有另外一层，以便“动作处理程序”与域级函数分开？

换句话说，使用Angular，我应该绑定到“域命令”函数（更少抽象）还是GUI动作处理函数（更多抽象）？

此外，是否有任何文章或最佳实践指南可以探索这些细微差别？

Answer 1

就我个人而言，我遵循John Papa的风格指南，关于功能放置和抽象级别，他声明在分配给控制器之下具有纯粹的功能。它当然主要是出于可读性目的。

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

Answer 2

更多的是造型。在sitepoint中，有一篇文章StyleGuide讨论了样式指南。

正如LIFT原则所述;

以这种方式做得更好

function myController(thingSavingService){
     var ctrl = this;
     ctrl.model.thing = {};
     ctrl.onSaveClicked = saveThing;
     var saveThing = function () {
         thingSavingService.save(ctrl.model.thing);
     } 
}

不是因为性能，而是因为更具可读性。

Answer 3

根据您的术语，角度控制器公共方法可以被视为“动作处理程序”，它们与域级功能分开。当我说域级功能时，我指的是Angular Services Functions / apis。

使用Angular，我应该绑定到“域命令”函数（更少抽象）或GUI动作处理函数（更抽象）吗？

3 个答案: