Question

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

这是我的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>

你可以看到我有点开始工厂，但只是不知道如何去做。任何建议将不胜感激。

Answer 1

您需要将工厂注入控制器内部，然后使用控制器出厂时定义的方法：

body: null
 ok: false

Answer 2

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）

Answer 3

以下是那些希望了解插入所有代码后最终结果的人的答案。再次感谢答案，因为它能够指导我正确的方向。

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

AngularJS - 待办事项应用程序将提交和删除功能放入工厂

3 个答案: