Question

我是AngularsJs的初学者，我对控制器结构有疑问。

这是我的employeeController.js

    (function()
    {
        angular.module('employeeApp').controller('employeeController', employeeController);

        function employeeController(employeeFactory,$routeParams,departmentFactory,schoolFactory,mentorFactory,constants,$location,$scope) {
            var vm = this;
            vm.employee = null;
            vm.employees = null;
            vm.profilePicture = null;
            vm.mentors = null;
            vm.schools = null;
            vm.departments = null;
            vm.roleId = constants.roleid;
            vm.internEducators = null;

            vm.overviewMentors = function() {
                mentorFactory.overview(constants.companyid).then(function(response)
                {
                    vm.mentors = response;
                });
            }

            vm.create = function()
            {
                employeeFactory.create(vm.employee,vm.profilePicture).success(function(response,status)
                {
                    if(status == 200)
                    {
                        $.toaster({message: 'De werknemer is toegevoegd'});
                        $location.path('/home');
                    }
                    }).error(function(response)
                    {
                        var i = 0;
                        vm.error = response;

                        angular.forEach(response.result.message, function(error)
                        {
                            if(i <= 2)
                            {
                                $.toaster({ priority: 'danger', message: error});
                            }
                            i++;
                        });
                    });
            }

            vm.overviewInternEducators = function() {
                employeeFactory.overviewInternEducators(constants.companyid).then(function(response)
                {
                    vm.internEducators = response;
                });
            }

            vm.overviewSchools = function() {
                schoolFactory.overview(constants.companyid).then(function(response)
                {
                    if(angular.isDefined(response[0].SchoolId))
                    {
                        vm.schools = response;
                    }
                    else
                    {
                        console.log('leeg!');
                    }
                });
            }

            vm.overviewDepartments = function() {
                console.log('test');
                departmentFactory.overview(constants.companyid).then(function(response)
                {
                    vm.departments = response;
                });
            }

            vm.show = function() {
                vm.isAdmin = employeeFactory.isAdmin();
                employeeFactory.show($routeParams.id).then(function(response)
                {
                    vm.employee = response;
                });
            }

            vm.showDeleted = function() {
                employeeFactory.showDeleted($routeParams.id).then(function(response)
                {
                    vm.employee = response;
                });
            }

            vm.update = function()
            {
                employeeFactory.update(vm.employee, vm.profilePicture).success(function(response, status)
                {
                    if(status == 200)
                    {
                        vm.show(); // Zodat de nieuwe afbeelding wordt weergegeven
                        $.toaster({ message: 'De werknemer is geupdated' });
                    }
                }).error(function(response)
                {
                    var i = 0;
                    vm.error = response;

                    angular.forEach(response.result.message, function(error)
                    {
                        if(i <= 2)
                        {
                            $.toaster({ priority: 'danger', message: error});
                        }
                        i++;
                    });
                });
            }

            vm.overviewDeleted = function() {
                employeeFactory.overviewDeleted().then(function(response)
                {
                    if(angular.isDefined(response[0].EmployeeId))
                    {
                        vm.employees = response;
                    }
                });
            }

            vm.delete = function() {
                employeeFactory.delete($routeParams.id).then(function(response)
                {
                    if(response == 'true')
                    {
                        $.toaster({ message: 'De werknemer is verwijderd' });

                        $location.path('/home');
                    }
                    else
                    {
                        angular.forEach(response, function(error)
                        {
                            $.toaster({ priority: 'danger', message: error });
                        });
                    }
                });

            }

            vm.permanentDelete = function(employeeId) {
                employeeFactory.permanentDelete(employeeId).then(function(response)
                {
                    if(response == 'true')
                    {
                        $.toaster({ message: 'De werknemer is permanent verwijderd' });

                        $location.path('/prullenbak/werknemers');
                    }
                    else
                    {
                        angular.forEach(response, function(error)
                        {
                            $.toaster({ priority: 'danger', message: error });
                        });
                    }
                });
            }
        vm.restore = function(employeeId) {
            employeeFactory.restore(employeeId).then(function(response)
            {
                if(response == 'true')
                {
                    $.toaster({ message: 'De werknemer is teruggezet' });
                    $location.path('/werknemer/' + employeeId);
                }
                else
                {
                    if(angular.isArray(response))
                    {
                        angular.forEach(response, function(error)
                        {
                            $.toaster({ priority : 'danger', message : error[0]});
                        });
                    }
                }
            });
        }

        <!--ng-init-->
        vm.editEmployee = function()
        {
            vm.show();
            vm.overviewDepartments();
            vm.overviewInternEducators();
            vm.overviewMentors();
            vm.overviewSchools();
        }

        vm.createEmployee = function() {
            vm.overviewMentors();
            vm.overviewSchools();
            vm.overviewDepartments();
            vm.overviewInternEducators();
        }

        <!--redirects-->
        vm.editRedirect = function(werknemerId)
        {
            $location.path('/werknemer/edit/' + werknemerId);
        }

        vm.showTrashedEmployeeRedirect = function(werknemerId)
        {
            $location.path('/prullenbak/werknemer/' + werknemerId);
        }
    }
})()

如您所见，我使用了两种名为editEmployee和createEmployee的方法（最后）。我将{2}与create employee页面和edit employee page一起使用。在这两个页面上都有一些必须加载的组合框。例如，我的创建员工页面我说ng-init="employeeController.createEmployee()"，然后填充那些组合框。

我知道这不是最好的方法，所以我怎样才能以不同的方式做到这一点？

Answer 1

有几种方法可以构建你的应用程序，但Angular团队认可的样式指南由John Papa维护。请参阅John Papa撰写的Angular Style Guide。基于此：

首先，我建议您将create，show，edit和delete功能拆分为单独的controllers。这有助于确保每个控制器只执行一次单个事情。这符合Single Responsibility和Separation of Concerns

的想法

其次，因为您似乎使用controllerAs语法，所以您不需要将范围注入控制器。

以下是创建员工的代码（如create-employee.controller.js

(function () {
  'use strict';
   angular.module('employeeApp').controller('CreateEmployeeController', CreateEmployeeController);
  //ngInject is used to help create minify safe version of the file during the build process.
 //You should have this somewhere in your build process
/** @ngInject **/
function CreateEmployeeController(constants, departmentFactory, employeeFactory, $location, mentorFactory, schoolFactory) {
var vm = this;
vm.create = create;
getMentors();
getSchools();
getDepartments();
getInternEducators();

function getMentors() {
  return mentorFactory.overview(constants.companyid).then(function (response) {
    vm.mentors = response;
  });
}

function getSchools() {
  return schoolFactory.overview(constants.companyid).then(function (response) {
    if (angular.isDefined(response[0].SchoolId)) {
      vm.schools = response;
    }
    else {
      console.log('leeg!');
    }
  });
}

function getDepartments() {
  return departmentFactory.overview(constants.companyid).then(function (response) {
    vm.departments = response;
  });
}

function getInternEducators() {
  return employeeFactory.overviewInternEducators(constants.companyid).then(function (response) {
    vm.internEducators = response;
  });
}
}

function create() {
return employeeFactory.create(vm.employee, vm.profilePicture).success(function (response, status) {
  if (status == 200) {
    $.toaster({message: 'De werknemer is toegevoegd'});
    $location.path('/home');
  }
}).error(function (response) {
  var i = 0;
  vm.error = response;

  angular.forEach(response.result.message, function (error) {
    if (i <= 2) {
      $.toaster({priority: 'danger', message: error});
    }
    i++;
  });
});
}
})();

然后，您可以通过拆分此示例后面的功能来创建其他控制器。

角度控制器结构

1 个答案: