Angular JS Best Practices for Organizing Dependencies and Variables

Question

I am working on a project where I am making sense of what a bunch of overseas developers did in Angular JS a year before I joined the company. It's a huge project with no documentation. I was curious about if anyone has seen anything like this with so many dependencies included in the code and then each dependency renamed as a variable like (e,t,n,r,s,a), which is then included in a complex nested structure that's 140 lines long for one controller. Is this considered best practices for coding?

I have a feeling it's messier than it needs to be. Does anyone know an effective tool or methodology way to map dependencies, variables, etc. and re-organize Angular JS code?

Sample Code

define(["./../_module", "moment"], function (e, t) {
"use strict";
e.controller("trendController", ["$scope", "$state", "$q", "$rootScope", "labelsService", "trendService", "gridSettingsService", "colorpickerSettingsService", "loadDisplay", "uiGridConstants", "APP_CONSTANTS", "globalErrorService", "utilsService", "usersService", "browserHelper", "pageErrorHandlingHelper", function (e, t, n, r, s, a, l, d, i, o, c, u, g, f, b, v) {
    function h(t) {
        var n = angular.copy(C);
        return n.graphColor = e.defaultColors[t], n
    }

    function D() {
        var t = n.all([O, j])["catch"](p.errorHandlingActions.loadedFailed);
        i.addDisplay(t, "", e.gridAreaId)
    }
    var p = this;
    p.errorHandlingActions = v.errorHandlingActions, e.hasMeasurementsUnitsClash = !1, e.gridAreaId = "trendWrapper", e.labels = {
        genchoosedev: "",
        genchooseobj: "",
        generror: "",
        gennodata: "",
        genhour: "",
        genday: "",
        genweek: "",
        gencustom: "",
        gendatetime: "",
        tndlink: "",
        tnddevlbl: "",
        tndptlbl: "",
        tndclrlbl: "",
        tndexport: "",
        tndtbllbl: "",
        tndgphlbl: "",
        tnddataempty: "",
        tndtime: "",
        tndpointhdr: "",
        tndgphmeas: ""
    };
    var O = s.getLabelsForPage(e.labels).then(function (t) {
        e.labels = t
    });
    e.defaultColors = c.TRENDS.DEFAULT_COLORS, e.trendPointsMax = c.TRENDS.TREND_POINTS_MAX, e.devicesObjects = [], e.defaultColorPickerOptions = d.getSettings(), e.isPredefinedFiltersUsed = !1;
    var j = a.getAllTrendDeviceObjects().then(function (t) {
            return _.forEach(t, function (e) {
                e.objects = _.sortBy(e.objects, "objName")
            }), e.devicesObjects = _.sortBy(t, "name"), f.getTrendInfoSettings(r.sessionUser.userName).then(function (t) {
                if (t.trendLines && "0" != t.trendLines[0].devInst) {
                    e.startDate = t.trendStart, e.endDate = t.trendEnd;
                    var n = [];
                    _.forEach(t.trendLines, function (t) {
                        var r = angular.copy(C);
                        r.deviceObjects = _.find(e.devicesObjects, {
                            id: t.devInst
                        }), r.selectedObject = _.find(r.deviceObjects.objects, {
                            objID: t.objID
                        }), r.graphColor = t.colorVal, n.push(r)
                    }), e.selectedDeviceObjects = n, e.isPredefinedFiltersUsed = !0, e.triggerReloadDataWithPredefinedFilters()
                }
                e.$watch("selectedDeviceObjects", function (t, n) {
                    var r = _.last(t);
                    if (angular.isDefined(r) && null !== r.selectedObject) {
                        var s = parseInt(r.selectedObject.objID);
                        !isNaN(s) && angular.isNumber(s) && t.length < e.trendPointsMax && t.push(h(t.length))
                    }
                    if (t.length >= 2) {
                        var a = t[t.length - 2];
                        null === a.selectedObject && null === r.deviceObjects && t.splice(t.length - 1, 1)
                    }
                    e.HasDataToDisplay = _.filter(t, function (e) {
                        return null !== e.selectedObject
                    }).length > 0, e.saveTrendInfoForCurrentUser()
                }, !0), e.$watchGroup(["startDate", "endDate"], function (t, n) {
                    e.saveTrendInfoForCurrentUser()
                })
            })
        }),
        C = {
            deviceObjects: null,
            selectedObject: null,
            gridOptions: null,
            graphColor: e.defaultColors[0]
        };
    e.selectedDeviceObjects = [angular.copy(C)], e.HasDataToDisplay = !1, D(), e.reloadHandler = null, e.unitsOfMeasureCounts = [], e.$watchCollection("unitsOfMeasureCounts", function (t) {
        var n = {};
        _.each(t, function (e) {
            null !== e && (n[e] ? n[e]++ : n[e] = 1)
        }), e.hasMeasurementsUnitsClash = Object.keys(n).length > 2
    }), e.TriggerDataLoad = function (t, n) {
        null === n.deviceObjects && (n.selectedObject = null), n.selectedObject ? e.unitsOfMeasureCounts[t] = n.selectedObject.units : e.unitsOfMeasureCounts[t] = null, null != e.reloadHandler && e.reloadHandler(t, n)
    }, e.colorChangedHandler = null, e.TriggerColorChanged = function (t, n) {
        null !== e.colorChangedHandler && e.colorChangedHandler(t, n)
    };
    var S = function () {
        var t = {
            preselectedDataPoints: [],
            datesRange: {
                start: e.startDate,
                end: e.endDate
            }
        };
        return _.forEach(e.selectedDeviceObjects, function (e) {
            angular.isDefined(e.deviceObjects) && null != e.deviceObjects && angular.isDefined(e.selectedObject) && null != e.selectedObject && t.preselectedDataPoints.push({
                deviceId: e.deviceObjects.id,
                objectId: e.selectedObject.objID
            })
        }), t
    };
    e.redirectToExportTrend = function () {
        var e = S(),
            n = JSON.stringify(e);
        t.go("exportTrendData", {
            paramsJson: n
        })
    }, e.saveTrendInfoForCurrentUser = function () {
        var t = {
            selectedDeviceTrends: e.selectedDeviceObjects,
            datesRange: {
                start: e.startDate,
                end: e.endDate
            }
        };
        return f.updateTrendInfoSettings(r.sessionUser.userName, t).then(function (e) {}, p.errorHandlingActions.failed)
    }, e.startDate = null, e.endDate = null, e.exportSelectedPoints = function () {
        var e = S();
        return a.exportTrendData(e.preselectedDataPoints, e.datesRange).then(function (e) {
            angular.isDefined(e) && e.length > 0 && b.saveFileAsCSV(e)
        }, p.errorHandlingActions.failed)
    }
}])

});

Answer 1

I highly doubt this is the original code, probably it's the output of some minification / obfuscator tool. the single letter variable is an optimization applied by minifiers in order to reduce the size of the project, but they actually remove spaces, comments, new line etc..

Here my guess is that their aim was to obfuscate the code, and this is undoable. you cannot go back to the original names. Online you can find some JS beautifier but they just format the code to make it "better looking" if it isn't, but this code is already formatted so doesn't help.

the only way to retrieve the original variables names would be to have some sort of mapping (actualName / oldName) saved somewhere.

personally i would get in touch with these guys to understand if there's any trace of the original code.

Answer 2

The use of variables like (e,t,n,r,s,a) is not a best practices, because they are meaningless, this is an example of how I manage the dependency inyection in the controller, I have created a function notifyCtrl, the parameters of the function are my dependencies, then I send the function declaration as parameter in my angular.module.controller

function notifyCtrl($scope, notify) {
    $scope.msg = 'Hello! This is a sample message!';
    $scope.demo = function () {
        notify({
            message: $scope.msg,
            classes: $scope.classes,
            templateUrl: $scope.template
        });
    };
    $scope.closeAll = function () {
        notify.closeAll();
    };
}
angular
.module('angularModule')
.controller('notifyCtrl', notifyCtrl);