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

`What purpose does the data-view attribute serve in Durandal JS?`

Events are not being emitted by Socket.io

Using ng-repeat in AngularJS to display Google charts

instructions on how to exclusively close a bracket within a double bracket in a regular expression match

Exploring the `React.createRef` method using Enzyme for testing purposes

Create a basic chart using JavaScript

Struggling to capture a "moment in time" of a form without losing any of the data

employing flush for lodash's throttle wrapper

React Big Calendar encountered an error: The element type provided is not valid, as it is expected to be a string for built-in

Issue with SetTimeout not functioning properly on initial use within socket.io

What is the process for turning off express logs on my node.js command line interface?

Display the date string in Material-UI TableCell格式

What is the most compatible JavaScript framework for openlayers?

Steps for sending a request to the root resource

Ensure that ExpressJS response includes asynchronous try/catch handling for any errors thrown

Tips for making an AJAX request using jQuery

Adjust background image size to fit the screen, not just the content

Utilizing AngularJS ngResource: Ensuring Consistent Use of the Catch Function

Ways to create two separate references pointing to a single object

AngularJS - "Refrain from replicating items in a repeater"