CODEWITHSUNDEEP
angularjswebstormcode-completion
Patrick Rogers-Ostema
Patrick Rogers-Ostema

Reputation: 121

Webstorm 10 Code Completion not working with AngularJS controllerAs syntax

I'm trying out WebStorm because it claims to have superior code completion when working with AngularJS projects. I'm using version 10.0.2 and ran into a code completion issue already using the AngularJS seed project.

I’m trying to use the controllerAs syntax to specify the controller viewmodel’s name inside the $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 & Route Config

However, inside the template html I get a “unresolved variable or type” warning. (a squiggly 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'd show the pictorial proof but I need more rep first:^)

Again, I’m just using the OOTB AngularJS Project that is listed as one of the base templates to create a new WebStorm project so I would expect everything is already configured properly for Angular to work properly. I’ve also watched a Pluralsight video where this kind of code completion seemed to work, although it was in WebStorm 9 not 10.

I checked and I have the AngularJS Plugin enabled. I also tried downloading the typsescript community stub Javascript Library for angularjs, but it didn’t seem to help. I generated the project using "Generating an AngularJS Application Stub" which according to the docs should give me Angular support.

Any help would be greatly appreciated.

Upvotes: 8

Views: 1526

Answers (3)

beauXjames
beauXjames

Reputation: 8418

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

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

ng-controller="vm as vm"

then all these squiggles will go back into the hole darcula hole they belong...can't bring myself to do it, personally...but it does make them disappear.

No additional suggestions...nothing useful...only absence of squiggle.

Upvotes: 0

gztomas
gztomas

Reputation: 3260

You can work around this by adding jsdoc comment

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

Upvotes: 4

Patrick Rogers-Ostema
Patrick Rogers-Ostema

Reputation: 121

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

If like me you 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

Upvotes: 2

Related Questions