angularjs intellisense in visual studio

Question

I've managed to get intellisense for the ng- directives in the HTML. I also get intellisense for most javascript files. However, I have no idea how to get intellisense for bits that are injected. Consider the following:

function mandatsCtrl($scope, Domiciliation, logger, $q) {
}

how to I get intellisense for $q or $scope, which are injected ?

• omid.n: you may wanna check this out [visual studio 2013 angularjs intellisense support][1] [1]: stackoverflow.com/questions/19709538/…
• mnu-nasir: how did you get intellisense for ng-directives in the HTML. can you let me know please?

Answer 1

I created a javascript file that you can reference that gives (nearly) complete AngularJS intellisense in JavaScript files, including on your custom factories, services and so forth.

https://github.com/jmbledsoe/angularjs-visualstudio-intellisense

Answer 2

As far as I know you can't do nothing like that. But if you are using ReSharper you can try AngularJS support for ReSharper plugin. It's in the early stage so I guess we can expect a lot more over time.

Here's another link for HTML5Schema (all the ng-* attributes available in Intellisense). I guess you already have that.

There is also a Chrome plugin AngularJS Batarang. Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications.

I'm looking forward to other answers.

• Sam: yeah I have the schema. The Resharper plugin is promising but for now it does not do much more than the schema. Wait and see....
• kayz1: Yeah, let's hope there will be more. Code snippets are nice too.

Answer 3

You can get intellisense on injected parameters (and just about everything else) if you use TypeScript. TypeScript let's you specify the type of your parameters so VS will know how to use them.

eg.

/// <reference path="./angular.d.ts" />
function mandatsCtrl($scope: ng.IScope) {...}

• Sam: I had a look at TypeScript and it looks interesting. But one thing that I can't figure out, is how to get these .d.ts files ? For instance, where's the angular.d.ts file that you've mentionned ? Same for any third-party libraries I use (jQuery, etc..)
• rob: @Sam there is a good community managed collection of d.ts files here: tsdpm.com github.com/Diullei/tsd.
• Sam: Thanks ! Can I use an older version of the d.ts files, and still use the latest version of the libraries in my code ?
• rob: @Sam You can but you might get a runtime error if your using a function in the d.ts files that no longer exists in the new version of the library. It should be easy to keep your d.ts files up to date though using NuGet or tsd
• hans: another source for d.ts files is github.com/borisyankov/DefinitelyTyped these can also be inserted into vs projects via nuget

Answer 4

Have you taken a look at this: https://github.com/matijagrcic/AngularJS-Intellisense-For-Visual-Studio

I have got Intellisense for $scope and $q through one of the extensions I have (think it must be 'Web Essentials 2012'), although it doesn't seem to be particularly intelligent Intellisense - it's just suggestions of every single possible JS method/property.

• Sam: I've tried to install it but the registry key could not be added. It's not a valid key apparently...
• Matty J: I got it to work actually, but had to modify the registry key to get it to work, as explained here: github.com/matijagrcic/AngularJS-Intellisense-For-Visual-Studio/…. There needs to be only one backslash () in the "File" value - ie. it should look like: "File"="html\html_5_angularjs.xsd"
• Dave Alperovich: interesting. I added the registry and selected AngularJS as my HTML validation. But it doesn't work well for HTML (I now have to have the Doc type, Body, etc, included in my Views just to get basic HTML 5 validation), and it doesn't work at all for Angular