Recently, I have been working on transitioning an AngularJS application to ES6. In the past, I have followed a pattern where controller files register themselves with the application so that I don't have to worry about which controllers or services are defined in each file. By using require(), I was able to manage dependencies and initialization in a way that allowed me to focus solely on the controller file.
As I explore migrating to ES6 and utilizing import instead of require(), I am facing challenges with code that relies on order dependency. Below is a rough outline (never executed) of what I am aiming to achieve.
So far, I have discovered that I can export a RegisterIndexController() function from index.js and then call it from app.js. This approach works, but I am interested in exploring if I can reverse the flow of dependency. For instance, passing "app" from app.js to a controller.
app.js
app = angular.module('app', ['ui.router'])
angular.element(document).ready(() => angular.bootstrap(document, ['app']))
import './controllers/index'
app.run(() => {})
index.js
app.controller('IndexController', IndexController)
class IndexController {
/*@ngInject*/
constructor() {
this.count = 10
}
}
index.html
<div ng-controller="IndexController as vm">
{{ vm.count }}
</div>