AngularJS - 做应用程序将提交和删除功能放入工厂

AngularJS - To Do App Place Submit and Delete Function into Factories

本文关键字：功能 删除 工厂 提交 应用程序 AngularJS      更新时间：2023-09-26

我创建了一个简单的待办事项应用程序，在处理它时，我觉得我最终会在控制器中放置太多代码，最终会变得混乱且难以阅读。我想知道如何将我的函数移动到工厂中，以便我的代码看起来更干净。

这是我的JS： 

angular.module('toDoApp', [])
    .controller('toDoCtrl', function($scope){
        //set $scope variables
        $scope.tasks = [];
        $scope.submitTask = function(){
            $scope.tasks.unshift($scope.enteredTask); 
            $scope.enteredTask = '';
        };
        $scope.removeTask = function(task) {
            var i = $scope.tasks.indexOf(task);
            $scope.tasks.splice(i, 1);
        };
    })
    .factory('toDoFactory', ['$http', function($http){
        return function(newTask) {
        };
    }])

如果需要，以下是 HTML：

<form ng-submit="submitTask()">
    <!-- task input with submit button -->
    <label>Task: </label>
    <input type="text" placeholder="Enter Task" ng-model="enteredTask" required>
    <button>Submit</button>
</form>
<div>
    <!-- create unordered list for task that are submitted 
        need check boxes -->
    <ul>
        <li ng-repeat="task in tasks">
            {{ task }}
            <button ng-click="removeTask()">x</button>
        </li>
    </ul>   
</div>

正如你所看到的，我有点开始了工厂，但只是不知道该怎么做。任何建议将不胜感激。

您需要将

工厂注入控制器，然后使用控制器在工厂中定义的方法：

angular.module('toDoApp', [])
.controller('toDoCtrl', function($scope, toDoFactory){
    //set $scope variables
    $scope.tasks = [];
    $scope.submitTask = function(){
        toDofactory.submittask(); //Just for demo.Passin your parameters based on your implementation
    };
    $scope.removeTask = function(task) {
        var i = $scope.tasks.indexOf(task);
        $scope.tasks.splice(i, 1);
    };
})
.factory('toDoFactory', ['$http', function($http){
    var methods = {};
    methods.submittask = function(){
        //your logic here
    };
    methods.removetask = function(){
      //your logic here
    }
    return methods;
}])

var app = angular.module('toDoApp', []);
app.controller('toDoCtrl', function($scope, toDoFactory){
        $scope.tasks = [];
        toDoFactory.get = function(){
        }
        toDoFactory.delete = function(){
        }
        toDoFactory.update = function(){
        }
});
app.factory('toDoFactory', ['$http', function($http){
        var todo = {};
        todo.get = function(){
        };
        todo.delete = function(){
        };
        todo.update = function(){
        }
        return todo;
}]);

这是简单的架构，可以添加更多逻辑，确保您了解依赖注入 （DI）

对于那些

想要查看插入所有代码时最终结果会是什么样子的人来说，这是答案。再次感谢您的回答，因为它能够引导我朝着正确的方向前进。

.controller('toDoCtrl', function($scope, toDoFactory){
    $scope.tasks = toDoFactory.tasks;
    $scope.submitTask = function(){
        toDoFactory.submitTask($scope.enteredTask); 
        $scope.enteredTask = '';
    };
    $scope.removeTask = function(task) {
        toDoFactory.removeTask();
    };
})
.factory('toDoFactory', ['$http', function($http){
    var toDo = {
        tasks: [],
        enteredTask: '',
        submitTask: function(task){
            toDo.tasks.unshift(task);
        },
        removeTask: function(task) {
            var i = toDo.tasks.indexOf(task);
            toDo.tasks.splice(i, 1);
        }
    };
}])
相关文章：