AngularJS Intellisense in Visual Studio 2015

0
votes

Recently I started to use Visual Studio 2015 Community instead of Brackets. As it is said on a website, it has some kind of support of Angular, however, I did not even see it anywhere instead of HTML files. Even variable "angular", while hovering on it, prints

angular <type unknown>

I added an image to explain what I mean.

enter image description here

I tried to change JavaScript TextEditor References to Implicit (Web), however, after reboot, it comes back to Implicit (Windows).

I use Web Essentials and I know that it has feature to create Intellisense JS and TS files, however, this features are always disabled. I opened each directory in my project and checked it, this feature was always turned off.

In addition, I tried to create Scripts directory with _references.js manually, but it works very...baaad, I need to move it to another directory and return it into previous to make options like auto-sync available. The same thing is about _references.js

To make this case more cleaner: I create _references.js manualy. Now it has its Anto-Sync and Update References options. —> Reboot Visual Studio 2015 —> _references.js doesn't have such options anymore. However, even before reboot, if I update it, it will skip everything except app.js in root folder.

P.S. AngularJS IntelliSense works in HTML files, i.e. I can place ng-* attributes. So...I think, that something just doesn't work in VS 2015. P.S.S. I use NodeJS for server-part of WebApp.

2
javascriptangularjsnode.jsvisual-studio-2015intellisense

2 Answers

1
votes

Well, I understand you are looking for a solution to work with Instellisense and Visual Studio, no matter what.

I am using Visual Studio also, but I moved to work with TypeScript. It is actually writing a kind of extended strongly typed JavaScript. That means you can declare the types of your variables. Example: var x:string = 'test';

There are of courses advantages and disadvantages. I like the advantages, that's why I used it.

  1. You have to compile your code. Understand that as parsing your Javascript for error checking and a transformation process from *.ts files to become *.js files.
  2. You can add header files. Have you ever developed C/C++ apps? Well, in TypeScript you can add definition, or *.d files, which are in fact just header files for checking JavaScript function definitions.
  3. TypeScript on Visual Studio uses Intellisense. That's what we are talking about!

The #2 advantage is great. It prevents you to execute wrong code like: 

setTimeout(myFunc, 'abc');

This wouldn't work for the second param should be a number, and not string. But as I said, you have to add the definition files to your TypeScript solution in order to work ok.

If you like trying that (you won't regret), follow these steps:

  1. Download and Install TypeScript for Visual Studio - Follow the link https://www.typescriptlang.org/
  2. Create a TypeScript Projet - Very easy, there's a template already for that after installing the TypeScript for Visual Studio;
  3. Add angular, jquery packages using NuGet
  4. Install the following definition packages - angularjs.TypeScript.DefinitelyTyped - https://www.nuget.org/packages/angularjs.TypeScript.DefinitelyTyped/

I believe this is an even better solution than just plain Intellisense, since it also prevents you from sending wrong parameters to functions in angular. Since JavaScript allows any variable to be of any type, it is really hard to do a code review when anything in your JS breaks. With TS, this shouldn't happen. If you do that, the compilation will fail.

0
votes

Have you tried using this at the beggining of your js file where you want Intellisense?

/// <reference path="pathToAngular.js" />

https://msdn.microsoft.com/en-us/library/bb385682.aspx