AngularJS modules vs CommonJS/ECMA6 modules

Question

I've joined an ongoing web project with frontend written in Angular 1 as MVC framework and using Webpack as build system and I'm feeling like Neo in MATRIX 2 in a stack of nested matrices.

The project is split into separate .js files, each annotated as module in either CommonJS style (with require and module.exports) or ECMA6 style (with imports and exports). Webpack transpiles ECMA6 to ECMA5 with Babel and creates a single bundle from them.

Within those CommonJS modules reside AngularJS modules. Living inside CommonJS, Angular does the task of dependency injection of its own with Angular's RequireJS-esque module system.

I'm feeling that the same job of dependency management is done twice.

Is it true, that when Angular was written, Angular developers had in mind that multi-module Angular projects should've been simply concatenated e.g. with grunt concat into a single bundle and served to the client, where Angular $injector was responsible for dependency management? So, our Webpack build is just an over-complication on top of that?

Example from the project:

File model.module.js:

import angular from "angular";

import {EntityViewController} from './entity_view_controller'

// @ngInject
function routes($stateProvider) {
    $stateProvider.state("modeller.entity.view", {
        url: "/:id/view",
        controller: EntityViewController,
        templateUrl: "/states/modeller/model/entity_view.html"
    });
}

export default angular.module("states.modeller.entity", [])
    .config(routes)
    .controller("EntityViewController", EntityViewController);

File entity_view_controller.js:

"use strict"

export /* ngInject */ function EntityViewController($scope, $stateParams, EntityModel) {
    $scope.entity = {};
    $scope.attributes = [];
    EntityModel.get({id: $stateParams.id}, (data) => {
        $scope.entity = data.entity;
        $scope.attributes = data.attributes;
    });
}

Estus Flask Estus Flask · Accepted Answer · 2016-01-28T10:33:35

It is true that Angular is concat-friendly and doesn't require other modular solutions. Some development styles (notably JP) imply the usage of IIFE's to avoid global namespace pollution. The one can write IIFE's by hand or delegate this job to Webpack or other modular systems.

The usage of modular systems introduces design solutions that are unsuitable for plain JS.

Class inheritance in Angular components (e.g. controllers) is ugly with Angular DI. And when using the classes app-wide with IIFE modules the one may need to maintain exports manually - again, that's the job for modular systems.

Considerable amount of app components can be framework agnostic, this expands options for architectural decisions (framework migration, isomorphic apps) and allows the units to be tested separately from the framework.

JS modules and Angular modules/DI play nicely together in my experience.

AngularJS modules vs CommonJS/ECMA6 modules

1 Answers