AngularJS modules vs CommonJS/ECMA6 modules
<p>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. </p>

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

<p>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.</p>

<p>I'm feeling that the same job of dependency management is done twice.</p>

<p>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 <code>grunt concat</code> 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?</p>

<hr>

<p>Example from the project:</p>

<p>File <code>model.module.js</code>:</p>

<pre><code>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);
</code></pre>

<p>File <code>entity_view_controller.js</code>:</p>

<pre><code>"use strict"

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