如何清理angular ui控制器

How to clean up angular ui controllers

本文关键字：控制器 ui angular 何清理      更新时间：2023-09-26

我是angular的新手。我已经包含了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;
        });

    };
}]);

我对Angular也比较陌生，但我已经大量使用它几个月了，包括一些情态的工作。据我所知，您的代码非常准确。除非你发现你在模态中实现的实际逻辑是多余的，否则它可能是模块化的。

你可以通过将模态的HTML移动到模板文件中，然后使用templateUrl:将其拉入来清理它。

顺便说一句，这里有一个非常棒的Angular风格指南，可以帮助你在整个框架中走上正确的轨道。它解释了各种模式背后的原因。

你基本上是正确的，为了使用Angular.js依赖注入，你必须在控制器中注入大量的服务。这在使用构造函数依赖注入的框架中是不可避免的。然而，在您的示例中，您可以提出要注入的几个服务。其中一些仍然有一个您必须注入的替代，但是替代可以分解出重复的代码。当你仍然注入大量的服务时，你将减少你必须编写的样板代码的数量。

<标题>

美元范围

如果你使用controllerAs语法，你可以简单地把你的属性放在控制器上，并在你的模板中引用控制器。Todd Motto很好地解释了它是如何工作的。John Papa建议在他的风格指南中使用这个特性。

http美元

一般来说，你不应该在控制器中直接使用$http。相反，创建一个服务来抽象对$http的调用。看起来Post服务可能已经在这样做了。John Papa的风格指南很好地解释了使用数据服务的好处。

美元模态

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

其他样式说明

如果你想进一步简化你的控制器，你可以将一些服务(甚至是我上面提到的数据服务和模态抽象)移动到一个单独的服务中来抽象用户交互。在如何组织代码方面确实有很大的灵活性。

我注意到你也在使用全局window对象。在进行测试时，这很难模拟，所以建议的风格是注入angular的$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;
        });
    };
}]);
相关文章：