Угловая структура контроллера

Question

Угловая структура контроллера

0

Я новичок в 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);
        }
    }
})()

Как вы можете видеть, я использую 2 метода, называемых editEmployee и createEmployee (в конце). Я использую эти 2 с create employee страницей create employee страницей edit employee page. На обеих страницах есть несколько сборников, которые должны быть загружены. Например, например, для моей страницы сотрудника, я говорю ng-init="employeeController.createEmployee()" и затем эти поля со списком заполняются.

Я знаю, что это не лучший подход, так как я могу сделать это по-другому и лучше?

Jamie 18 май 2016, в 13:52

Источник

0

Спасибо @jamie Что именно вы хотите помочь? Это загрузка полей со списком или всей структуры приложения или controller ?
Evans Dianga 18 май 2016, в 11:33
0

Спасибо за ваш ответ. В основном структура контроллера.
Jamie 18 май 2016, в 11:35
0

Здравствуй. Я предлагаю вам ознакомиться с руководством по стилю Angular 1 Джона Папы и, в частности, с разделом о контроллерах .
Andrea 18 май 2016, в 12:24
0

Я привел пример в ответ
Evans Dianga 18 май 2016, в 14:16

Показать ещё 2 комментария

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Спасибо @jamie Что именно вы хотите помочь? Это загрузка полей со списком или всей структуры приложения или controller ?
Спасибо за ваш ответ. В основном структура контроллера.
Здравствуй. Я предлагаю вам ознакомиться с руководством по стилю Angular 1 Джона Папы и, в частности, с разделом о контроллерах .

Evans Dianga · Accepted Answer · 2016-05-18T12-56-00.000Z

Существует несколько способов структурирования вашего приложения, но руководство по стилю, одобренное Angular team, поддерживается Джоном Папой. См. Руководство по угловому стилю Джона Папы. Исходя из этого:

Сначала я предлагаю вам разделить функции create, show, edit и delete на отдельные controllers. Это помогает обеспечить каждый контроллер делает только одну thing.This в соответствии с идеей единой ответственности и разделения проблем

Во-вторых, поскольку кажется, что вы используете синтаксис controllerAs вам не нужно вводить область в ваш контроллер.

Вот код для создания сотрудника (sth, например 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++;
  });
});
}
})();

Затем вы создадите другие контроллеры, разделив функциональность в следующем примере.

Спасибо! Очень полезно. Еще один вопрос: методы getMentors, getSchools, getDepartments также используются в редактировании сотрудников. Должен ли я просто дублировать эти методы?
@ Джейми, это то, на что я, честно говоря, не знаю, есть хороший ответ. Я склоняюсь к тому, чтобы иметь их на фабрике, т.е. angular.module('myModule').factory('') и получать их в контроллере, т. angular.module('myModule').factory('') их в контроллер. Другой вариант - повторять их на каждом контроллере, но это противоречит принципу СУХОЙ (не повторяйте себя). Покопаюсь в этом и дам ответ