Why do AngularJS directives (attributes, etc.) show up as "invalid" in WebStorm 8?

Question

I just installed WebStorm 8 a couple of hours ago. I've been writing some AngularJS stuff, and I have a rather annoying little problem. The AngularJS plugin seems to work partially, whenever I type ng- I get an intellisense popup that shows all the various ng-* attributes. However, that's where things stop working. I do not seem to be getting the more advanced intellisense capabilities in either .js files or .html files. If I create an angular module called "app" inside app.js, then "app" does NOT show up when I type ng-app= in the HTML file. Additionally, WebStorm highlights all ng-* attributes as invalid html when editing the html file. None of the other angularjs features seem to work, either. I don't get any intellisense in bindings, for example.

I've found some topics here on SO that indicate I may need to add AngularJS as a JavaScript Library in the project settings...however there are ZERO instructions on how to do that properly. The topics on SO are very short and link to WebStorm documentation which is very general, without any specifics. How exactly does one set up AngularJS as a JS library within WebStorm? Is that even really necessary?

I should note that AngularJS does indeed show up in WebStorm's settings as a plugin, and it is checked. I basically only have ng-* attribute intellisense, but I get none of the other AngularJS enhanced support that was supposed to come with WebStorm 8. I've installed and uninstalled webstorm completely a couple of times. Not really sure where to go from here...

Answer 1

To add Angular JS as a Project library go to

Preferences > Project Settings > JavaScript > Libraries > Add

and then select the Angular directory to add it.

I'm on a Mac but windows should be roughly similar.

You can also do

ctrl/cmd + shift + a

(go to anywhere) and type libraries to get to the same place.

Note: I have Angular referenced in my main html file via https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js and the it works without adding it as a library.

Edit:

From the Webstorm blog: If you prefer to use a CDN, place the cursor over the highlight library name, hit Alt+Enter, and Download Library. This will set up a local library in WebStorm’s cache (not in your project) so WebStorm can access AngularJS methods, directives, etc for autocompletion and documentation lookup.

Answer 2

Also make sure you have the jebrains AngularJS plugin

Answer 3

Are you refrenceing AngularJS from a CDN in your HTML? If so just download angular and reference the local copy in your HTML. Then the angular features should start working. Alternatively I think you can just click the path to the angular CDN in your html, press Alt+Enter and select something like download library.

Answer 4

To resolve this in IntelliJ I downloaded the angular library.

These are the steps.

To add a TypeScript definition file for a library or framework you use, go to Preferences | Languages & Frameworks | JavaScript | Libraries – click Download and search for the library you need by typing its name, then hit Download again.