Angular with ES6 Controller As Behaving Strangely - angularjs

Question

That's a bad title. I'm aware. That's because I'm not entirely sure how to ask this question. I've got two essentially identical classes, behaving just a little bit differently, a corresponding controllerAs: 'vm' in the state config for each of them also behaving differently and a perplexing "this method can be static" warning from Webstorm in one of them and not the other.
index.html:
<div ui-view="main"></div>
<div ui-view="portfolio"></div>
app.js
// this file contains only the module setter with all the
// dependencies, as well as the $stateProvider config and
// any actions that occur when the app runs
'use strict';
angular.module('necApp', ['dep1', 'dep2', 'etc'])
.config(['$urlRouterProvider', '$locationProvider', '$animateProvider', Config])
.run(['$rootScope', '$state', Run]);
function Config(params) { /* do stuff */ }
function Run(params) { /* do stuff */ }
main.js
use strict';
import { MainController } from './main.controller';
angular.module('myApp')
.controller('MainController', MainController)
.config(['$stateProvider', Config]);
function Config($stateProvider)
{
$stateProvider
.state('main',
{
url: '/',
views: {
'main': {
templateUrl: 'app/main/main.html',
// OF NOTE: I have access to the controller as 'vm' in the view
// regardless of whether I include the next two lines
controller: MainController,
controllerAs: 'vm'
}
}
});
}
main.html
<!--
again, this expression is evaluated whether or not I include
the `controller` and `controllerAs` properties in my $state config
-->
<h1> {{ vm.result }} </h1>
main.controller.js
// OF NOTE: when I DO include the `controller` property in the $state config
// for the main route, this controller is registered and instantiated twice
'use strict';
export class MainController
{
constructor($http)
{
/* #ngInject */
angular.extend(this, {
$http: $http,
result: ''
});
this.Init();
}
Init()
{
this.$http.get('/endpoint').then(res =>
{
this.result = res.data;
});
}
}
portfolio.js
use strict';
import { PortfolioController } from './portfolio.controller';
angular.module('necApp')
.controller('PortfolioController', PortfolioController)
.config(['$stateProvider', Config]);
function Config($stateProvider)
{
$stateProvider
.state('portfolio',
{
url: '/portfolio',
views: {
'portfolio': {
templateUrl: 'app/portfolio/views/portfolio.html',
// OF NOTE: I do NOT have access to the controller as 'vm'
// in the view in this case without the next two lines
controller: PortfolioController,
controllerAs: 'vm'
}
}
});
}
portfolio.html
<!-- this is NOT evaluated without the `controller` and `controllerAs` properties in the $state config -->
<h1> {{ someExpression }} </h1>
portfolio.controller.js
'use strict';
export class PortfolioController
{
constructor()
{
angular.extend(this, {
someExpression: 'Testing . . .'
});
this.Init();
}
// OF NOTE: Webstorm warns me that this method can be static, even though
// 1) that breaks it and 2) I do NOT get that warning in MainController
Init()
{
// works as expected
console.log('initializing PortfolioController.');
}
}
As always, I very much look forward to your thoughts and comments.

Answer 1

Okay, before anybody else wastes their own valuable time with this, it turns out I'm just dumb. Or forgetful. I found a forgotten and unused directive I wrote that was for some reason using the MainController as 'vm'. Geez.
Although: I still have Webstorm warning me that PortfolioController.Init() can be static, while I do not get that warning on MainController.Init(). So that's still a mystery, I guess.