Separating Controller and Service files for app.js file

Question

What I am attempting to do is import the employeeController to be able to use it for my application. Do I need to redefine the module empoyeesApp inside of the controller file? Is there a way to import and apply the file so that I don't have to copy the code back into the app.js file.

app.js

import angular from "angular";

angular.module("employeesApp", []);

employeeController.js

angular.module("employeesApp", [])
  .controller("employeeController", function ($scope, employeeService) {
    $scope.firedCount = employeeService.firedCount;

    var promise = employeeService.getEmployees();

    promise.then(list => {
        $scope.employees = list;
    });

    $scope.addEmployee = function () {
        var employee = {
            "name": $scope.employee.name,
            "street": $scope.employee.street,
            "city": $scope.employee.city,
            "state": $scope.employee.state,
            "zip": $scope.employee.zip
        };

        employeeService.addEmployee(employee);

        $scope.employee.name = '';
        $scope.employee.street = '';
        $scope.employee.city = '';
        $scope.employee.state = '';
        $scope.employee.zip = '';

        $scope.employees = employeeService.getEmployees();
    }

    $scope.deleteEmployee = function (employee) {
        employeeService.removeEmployee(employee);
        $scope.employees = employeeService.getEmployees();
    }
});

src
  - app
    - components
      - employees
        - views
          - form.html
          - table.html
          - stats.html
        - employeeController.js
        - employeeService.js
- index.html

Answer 1

app.js

import employeeController from 'path-to-employee-controller';
import employeeService from 'path-to-employee-service';

angular.module('employeesApp',[])
.controller('employeesController', employeeController)
.service('employeeService', employeeService);

EmployeeController.js

export default function EmployeesController($scope, employeeService){
 //...
}

EmployeesController.$inject = ['$scope', 'employeeService'];

EmployeeService.js

export default function EmployeeService(){

}

//EmployeeService.$inject = ['dependencies-if-needed'];

Declare controller and services in separate files and export the function so that you don't need to call angular.module('moduleName').controller() or angular.module('moduleName').service() to attach them to the module.

Answer 2

Declare your controller like this:

angular
    .module('employeesApp')
    .controller('employeeController', function ($scope, employeeService) {

    });

And your service:

angular
    .module('employeesApp')
    .service('employeeService', function () {

    });

Be sure that those files are loaded by including it on your index.html or loading it on your state declaration if your are using ui-router.

Answer 3

Define dependencies only once:

app.js

import angular from "angular";

angular.module("employeesApp", []);

employeeController.js

̶a̶n̶g̶u̶l̶a̶r̶.̶m̶o̶d̶u̶l̶e̶(̶"̶e̶m̶p̶l̶o̶y̶e̶e̶s̶A̶p̶p̶"̶,̶ ̶[̶]̶)̶
angular.module("employeesApp")
  .controller("employeeController", function ($scope, employeeService) {

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

— AngularJS Developer Guide - modules