角度コントローラ構造

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とこれら2を使用します。両方のページには、ロードする必要のあるコンボボックスがいくつかあります。たとえば私の従業員ページを作成する場合、私はng-init="employeeController.createEmployee()"と言って、それらのコンボボックスを埋めます。

私はこれが最良の方法ではないことを知っています。どうすれば違う方法でこれを行うことができますか？

Answer 1

アプリを構造化する方法はいくつかありますが、Angularチームが承認したスタイルガイドはJohn Papaによって管理されています。 John PapaのAngular Style Guideを参照してください。その上で ：

まず、私はあなたが別のcontrollersにcreate、show、editとdelete機能を分割することを示唆しています。これは、各コントローラを確保するのに役立ちますないだけ1 単一 thing.Thisは、それはあなたがあなたのコントローラにスコープを挿入する必要はありませんcontrollerAs構文を使用しているようですので、Single Responsibilityのアイデアと第二Separation of Concerns

に沿ったものです。ここで

は、従業員を作成するためのコードである（のような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++; 
    }); 
}); 
} 
})(); 

あなたは、この例で、次の機能を分割することにより、他のコントローラを作成します。