Webstorm 10 Code Completion does not work with AngularJS controller. Syntax

Question

I am trying to use WebStorm because it claims to have excellent code completion when working with AngularJS projects. I am using version 10.0.2 and have run into a code completion problem already using the AngularJS initial project.

I am trying to use the controllerAs syntax to specify the name of the viewmodels of the controller inside $ routeProvider as follows.

'use strict'; angular.module('myApp.view1', ['ngRoute']) .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'view1/view1.html', controller: 'View1Ctrl', controllerAs: 'vm' }); }]) .controller('View1Ctrl', [function() { var vm = this; vm.hello = 'Hello World'; }]); 

Controller and route setup

However, inside the html template, the warning "unresolved variable or type" appears. (curved line under vm)

 <p>This is the partial for view 1.</p> <div>{{vm.hello}}</div> 

HTML warning

But the page loads just fine when I run it

I would show a graphical proof, but first I need to repeat more: ^)

Again, I just use the AngularJS OOTB project, which is listed as one of the basic templates for creating a new WebStorm project, so I expect everything to be properly configured for Angular to work properly. Ive also watched a Pluralsight video where such code completion seemed to work, although it was not 10 in WebStorm 9.

I checked and enabled the AngularJS plugin. I also tried downloading the javascript library for libraries with descriptcript type for angularjs, but that didn't seem to help. I generated a project using the "Generate AngularJS Application Stub" which, according to the docs, should provide me with Angular support.

Any help would be greatly appreciated.

Answer 1

You can get around this by adding a jsdoc comment

 /** * @name vm * @type View1Ctrl */ 

Answer 2

I heard from JetBrains support that both "controllerAs syntax" and "Router support" are still under development, and they are planned to be improved in the future.

If you, like me, want to support these efforts, you can vote for them here:

https://youtrack.jetbrains.com/issue/WEB-11175

https://youtrack.jetbrains.com/issue/WEB-10654

Answer 3

--- Currently in Webstorm 2016 v.3 ---

In your wrapper element for a directive, you can be redundant and use the attribute

 ng-controller="vm as vm" 

then all these squiggles will return to the hole darcula of the hole to which they belong ... cannot force itself to do it personally ... but it makes them disappear.

No further suggestions ... nothing useful ... just the lack of garbage.