The architecture of Angular controllers

Question

The architecture of Angular controllers

Being a novice in AngularJs, I have a query regarding the controller structure.

This particular file is my employeeController.js

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

        function employeeController(employeeFactory,$routeParams,departmentFactory,schoolFactory,mentorFactory,constants,$location,$scope) {
            var vm = this;
            // other code here...
        }

In my angular controller file, I have included two methods called editEmployee and createEmployee at the end of the file. I use these methods on both the 'create employee' page and the 'edit employee' page to load combobox values. For instance, on the 'create employee' page, I call

ng-init="employeeController.createEmployee()"

to populate those comboboxes.

Realizing that this may not be the most efficient way to handle this task, I am seeking suggestions on how to improve this process?

javascript angularjs

Answer 1

Answer №1

When structuring your app, the Angular team recommends following the style guide maintained by John Papa. You can find the Angular Style Guide by John Papa for reference.

One important suggestion is to separate the functionalities like create, show, edit, and delete into individual controllers. This approach aligns with the concept of Single Responsibility and Separation of Concerns.

If you are using the controllerAs syntax, there's no need to inject scope into your controller.

Below is an example code snippet for creating an employee (similar to create-employee.controller.js):

(function () {
  'use strict';
   angular.module('employeeApp').controller('CreateEmployeeController', CreateEmployeeController);
  
/** @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('empty!');
    }
  });
}

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: 'Employee added successfully'});
    $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++;
  });
});
}
})();

You can create other controllers by splitting their functionalities in a similar manner as shown above.

Answer 2

When structuring your app, the Angular team recommends following the style guide maintained by John Papa. You can find the Angular Style Guide by John Papa for reference.

One important suggestion is to separate the functionalities like create, show, edit, and delete into individual controllers. This approach aligns with the concept of Single Responsibility and Separation of Concerns.

If you are using the controllerAs syntax, there's no need to inject scope into your controller.

Below is an example code snippet for creating an employee (similar to create-employee.controller.js):

(function () {
  'use strict';
   angular.module('employeeApp').controller('CreateEmployeeController', CreateEmployeeController);
  
/** @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('empty!');
    }
  });
}

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: 'Employee added successfully'});
    $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++;
  });
});
}
})();

You can create other controllers by splitting their functionalities in a similar manner as shown above.

The architecture of Angular controllers

Answer №1

Similar questions

AngularJS Datepicker - calendar dropdown does not update when the model changes

What is the best way to create dynamic transparency based on cursor position?

"When attempting to pass a string into the res.send() method in Node.js, undefined

Why does JSON remain unchanged when a value is explicitly assigned in Javascript

Why does tsc produce a compiled file that throws an exception when executed, while ts-node successfully runs the TypeScript file without any issues?

Button for navigating to the previous slide on a Jquery slider

directive does not execute when the <Enter> key is pressed

Leveraging useContext to alter the state of a React component

Struggling with Vue's Router Transition fade in/out effect not functioning as expected?

I am in the process of creating several checkboxes and am looking to incorporate some added functionality

The check-all checkbox does not alter the properties of the selected object

What is the best way to assign a unique number to every div id that is generated?

Looking for assistance in establishing a connection between Node.js and Angular.js

What is the best way to use jQuery AJAX to make changes to an HTML element that will be permanent even after the page is refreshed?

Issue encountered with AJAX multiple image uploader

Dealing with error management in Transfer-Encoding chunked HTTP requests using express and axios

Is there a way to use jQuery to eliminate divs that contain multiple identical data values?

What are the steps to create an endless scrolling feature?

How can I utilize ng-repeat in AngularJS to iterate through an array of objects containing nested arrays within a field?

Using React to dynamically assign a backgroundImage based on a JSON response