Exporting/Importing AngularJS Controllers, Directives, Factories, Services with Webpack 4

Question

I managed to migrate our AngularjS 1.3.15 project from Gulp to Webpack 4, and now I'm trying to organize all our huge 5000+ line files into separate files. The problem is that I have no idea how exactly to export an AngularJS controller or directive etc. as to be easily imported into an index.js file, so that can be imported to our main.js file.

Example, one of our huge files starts with the angular.module and then a controller, like this:

(function () {

angular.module('AppName', ['app.services'])


    .controller('SomeCtrl', ['Session', 'Api', '$scope',
        function (Session, Api, $scope) {

        let init = function () {
                console.log('Stuff');
            };

            init();
        }])

This is then followed by a factory:

.factory('GlobalChart', [function () {

    let self = this;
    self.containerWidth = 210;
    self.containerHeight = 210;
    self.width = 150;
    self.height = 150;
    self.radius = Math.min(self.width, self.height) / 2;

    return this;

}])

Followed by a directive:

.directive('reportTopbar', ['$window',
    function ($window) {

        return {
            templateUrl: 'views/someview.html?v=' + GLOBAL_VERSION,
            transclude: false,
            scope: {
                data: '='
            },
            link: function (scope, element, attrs, ctrl) {          

                // code here

            },

        };
    }])

Following this last example there's just a bunch of directives, and everything is in this huge file, hence the need to organize this so that it's maintainable.

So what exactly would be the correct way to export all these?

Answer 1

Start by examining what you have.

The angular.module call returns an object, but in your implementation, you are ignoring the result (not storing it). You are instead chaining the calls to .controller, .directive, etc. onto this anonymous object.

One possible way to solve this would be to store the return value of the module call (i.e. var app = angular.module(....)), which can be exported. Then, in each of your other calls, you can chain on the stored value (app.directive(...)), which then makes each of these calls separable from the main code file, and potentially exportable.

This is method would be the most direct way to solve your immediate problem, since it would only require declaring a variable and then referencing the variable throughout your code. However it would not be the most optimal solution.

Another possible way would be to declare each of your controllers, factories, directives, etc. as functions, and chain them onto the angular module by name.

This also brings up another topic where you could improve the functionality and readability of the code: Dependency Injection. You can use $inject instead of inline Dependency Declarations, to make future imports and minification of the code much cleaner.

For example:

angular.module('AppName', ['app.services'])
.controller('SomeCtrl', SomeCtrl);

SomeCtrl.$inject = ['Session', 'Api', '$scope'];
function SomeCtrl(Session, Api, $scope) {
...
}

Now, you can export a single file with the Angular Module Definition and all of the controllers, factories, directives, etc. declared together, in an easily identifiable place. All of the individual functions can then be exported as needed in their own files, keeping the code clear, clean, and readable.

These tips (and many others) are covered in John Papa's Style Guide. This guide is a must read for anyone serious about optimizing their AngularJs code.