如何设置我的 angularjs 控制器答案

【问题标题】：how do I set up my angularjs controller如何设置我的 angularjs 控制器
【发布时间】：2014-10-18 05:13:56
【问题描述】：

我只是稍微弄乱了一些角度，我构建了一个简单的任务 API。此 api 已分配和接受任务。现在在构建应用程序时，我有这些路线：

TaskManager.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/:username/assigned-tasks', {
                templateUrl: 'app/partials/assigned-tasks.html',
                controller: 'TaskController'
            }).
            when('/:username/accepted-tasks', {
                templateUrl: 'app/partials/assigned-tasks.html',
                controller: 'TaskController'
            }).
            otherwise({
                 redirectTo: '/'
            });
   }]);

这是我开始构建的任务控制器，然后意识到这行不通

TaskManager.controller('TaskController', ['$scope', 'AssignedTasksService', function($scope, AssignedTasksService)
{
    $scope.tasks = [];

    loadAssignedTasks();

    function applyRemoteData( Tasks ) {
        $scope.tasks = Tasks;
    }

    function loadAssignedTasks() {

        AssignedTasksService.getAssignedTasks()
            .then(
            function( tasks ) {
                applyRemoteData( tasks );
            }
        );
    }
}]);

getAssignedTasks 函数只是一个对 api url 运行 http get 请求并返回错误或 api 数据的函数

现在您可以看到分配的任务在到达 TaskController 后会自动加载，这显然是一个问题，因为我还需要能够获得接受的任务。现在我是否需要为接受的任务创建一个单独的控制器，或者是否有办法让我检查来自控制器的 url，然后我可以从那里决定是要运行 loadAssignedTasks 函数还是 loadAcceptedTasks（我没有尚未创建）。但它只会做与 loadAssignedTasks 函数相同的事情，但对于接受的任务

【问题讨论】：

您可以将您的$routeProvider 注入控制器并检查那里的网址。或者为不同的路由注入不同的服务。
@akonsu 并从那里运行一个 if 语句来决定运行什么函数？
好吧，如果你注入$routeProvider，那么是的，如果你为不同的路由注入不同的服务，你可以让它们有相同的方法，然后调用这个方法。
有很多方法可以解决这个问题，但理想情况下，您应该将整个应用程序（或模块）视为一个 TaskManager，并将其所有控制器视为它的子组件。因此，我建议不要为整个模块使用一个超级控制器，而是使用多个控制器（在您的示例中为两个）。
嗯，我不是已经给出了一些提示吗.....

标签： javascript angularjs api http frontend

【解决方案1】：

如 cmets 中所述，有多种解决方法。一切都取决于当前的用例。但是您可能应该使用单独的控制器来解决这个问题。还将数据（任务）注入控制器，而不是在控制器内部获取它们。考虑以下示例：

var resolveAssignedTasks = function(AssignedTasksService) {
    return AssignedTasksService.getAssignedTasks();
};

var resolveAcceptedTasks = function(AcceptedTasksService) {
    return AcceptedTasksService.getAcceptedTasks();
};

TaskManager.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/:username/assigned-tasks', {
                templateUrl: 'app/partials/assigned-tasks.html',
                controller: 'TaskController',
                resolve: {
                    tasks: resolveAssignedTasks
                }
            }).
            when('/:username/accepted-tasks', {
                templateUrl: 'app/partials/assigned-tasks.html',
                controller: 'TaskController',
                resolve: {
                    tasks: resolveAssignedTasks
                }
            }).
            otherwise({
                redirectTo: '/'
            });
    }]);

控制器：

TaskManager.controller('AssignedTaskController', ['$scope', 'tasks', function($scope, tasks)
{
     $scope.tasks = tasks;
}]);

TaskManager.controller('AcceptedTaskController', ['$scope', 'tasks', function($scope, tasks)
{
     $scope.tasks = tasks;
}]);

您也可以通过将 resolveFunctions 合并到一个函数中来使用单个控制器，该函数根据当前路由返回适当的任务。希望这会有所帮助。

【讨论】：