如何清理角度ui控制器

Question

我是新手。 我包含了angular-ui，因此我可以使用引导程序模式来添加数据。 似乎我必须将所有这些功能放到我想在其中使用模态的每个控制器中……似乎有点愚蠢地做到了这一点。 有没有办法使此东西更可重用？

lassoControllers.controller('PostsController', ['$scope', '$timeout', '$http', 'Post', '$modal',
function($scope, $timeout, $http, Post, $modal) {
    $scope.posts = Post.query();

    $scope.askDelete = function(item) {
        var message = "Are you sure ?";

        var modalHtml = '<div class="modal-body">' + message + '</div>';
        modalHtml += '<div class="modal-footer"><button class="btn btn-primary" ng-click="save()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>';

        var modalInstance = $modal.open({
            template: modalHtml,
            controller: 'ModalInstanceCtrl'
        });

        modalInstance.result.then(function() {
            reallyDelete(item);
        });
    };

    var reallyDelete = function(item) {
        $scope.items = window._.remove($scope.items, function(elem) {
            return elem != item;
        });


    };

}]);

Answer 1

我也是Angular的新手，但是几个月来我一直在大量使用它，其中包括一些使用模式的工作。 据我所知，您的代码相当不错。 除非您发现要在模式中实现的实际逻辑是多余的，否则它可能像您将得到的那样模块化。

您可以通过将模式的HTML移到模板文件中，然后使用templateUrl:来将其清理一点。

附带一提， 这是一个很棒的Angular风格指南，可帮助您正确了解整个框架。 它解释了各种模式背后的推理方式。

Answer 2

您基本上是正确的，为了使用Angular.js依赖项注入，您必须向控制器注入很多服务。 在使用构造函数依赖项注入的框架中，这是不可避免的。 但是，在您的示例中，您可以排除要注入的几种服务。 它们中的一些仍将具有您必须注入的替代项，但是替代项可以排除重复的代码。 在仍然注入大量服务的同时，您将减少必须编写的样板代码量。

服务

$范围

如果使用controllerAs语法，则可以简单地将属性放在控制器上，并在模板中引用该控制器。 Todd Motto对它的工作原理有很好的解释 。 John Papa 建议在其样式指南中使用此功能。

$ HTTP

通常，不应在控制器中直接使用$ http。 而是创建一个服务来抽象对$http的调用。 看起来Post服务可能已经在这样做了。 John Papa的样式指南很好地说明了使用数据服务的好处。

$模式

这也可以抽象为不同的服务（例如ConfirmModalService ）。 这可能有助于分解代码。 例如，如果您将$timeout用于某些确认模式目的，则可以仅在确认模式服务中使用它，而不能在模板中使用它。 至于modalHtml ，您可以将该模式的html作为属性保留在该服务中，或者将其保存在html文件中，并在实例化模式时使用templateUrl 。

其他样式说明

如果您想进一步简化控制器，可以将某些服务（甚至是我上面引用的数据服务和模式抽象）移到单独的服务中，以抽象用户交互。 组织代码的方式确实有很多灵活性。

我注意到您也在使用全局window对象。 在执行测试时可能很难模拟，因此建议的样式是注入有角的$window服务（我知道另一个服务）。 可测试性是Angular.js的核心功能之一，提供要注入到控制器和服务的构造函数中的值是测试的一方面。

伪实现：

lassoControllers.controller('PostsController', ['$timeout', 'Post', 'ConfirmModalService',
function($timeout, Post, ConfirmModalService) {
    var vm = this;
    vm.posts = Post.query();

    vm.askDelete = function(item) {
        var message = "Are you sure ?";
        var modalResult = ConfirmModalService.open(message).then(function() {
            vm.reallyDelete(item);
        });
    };

    vm.reallyDelete = function(item) {
        // Assuming this is an array
        vm.items = vm.items.filter(function(elem) {
            return elem != item;
        });
    };

}]);