We continually strive to make the JavaScript editing experience better, part of this is providing support for popular libraries and patterns used by developers. AngularJS is one of the most popular JavaScript libraries and you’ve asked for even better support for it in Visual Studio. This post illustrates how to improve your experience in Visual Studio 2013 when working with AngularJS; if this framework is new to you, take a look at the tutorial on the AngularJS website.

Today, Visual Studio provides IntelliSense suggestions for APIs directly off of the angular object.

However, when you start to really work with AngularJS, you quickly find that IntelliSense does not provide as much help as it could. This is because the JavaScript editor doesn’t understand the way that Angular dynamically loads object references when your app is launched (i.e. dependency injection). John Bledsoe, a member of the Visual Studio community, created a great extension that helps the Visual Studio editor with this. By simulating the execution of your Angular application as you write your code, it provides a significantly better IntelliSense experience.

For example, here’s the IntelliSense experience without the extension installed:

The icons in this screenshot mean that the editor is simply listing out any identifiers (variables, parameters, object members, etc.) in the file; I should be seeing APIs provided by the $routeProvider such as a .when() function.

After the extension is installed, I see a much better list:

APIs provided by the $routeProvider object are now shown.

Adding AngularJS to a project

To get started, I need to install the AngularJS extension for Visual Studio. To do this, I download the angular.intellisense.js file and place it in the Program Files (x86)\Microsoft Visual Studio 12.0\JavaScript\References folder on my PC.

This extension works the same with any project that uses JavaScript, including Apache Cordova, ASP.NET, LightSwitch, and Windows Store apps, among others.

If you’re interested in trying it with the upcoming Visual Studio 2015 release, you can also use this extension, starting with the Visual Studio 2015 CTP 5 release.

Next, I add AngularJS to my project in Visual Studio using the NuGet package manager (you could also download AngularJS directly from http://www.angularjs.org and place it into your own project alongside your other script files).

Now, as I reference the angular.js or angular.min.js files in my source, Visual Studio uses the AngularJS extension to offer better JavaScript editor support.

Editing with AngularJS

Let’s quickly walk through some examples of how the AngularJS extension improves the editing experience when used with AngularJS, I’ll show you how it provides time saving features like IntelliSense and code navigation.

Configuring your Angular application

The first step in building an Angular application is to create a module in JavaScript that represents my app. I’m going to create one named “project”:

Then, I reference it in my main HTML file:

After defining my project module, I want to configure the URLs of my application. To do this, I’ll use Angular’s routing feature, which lets me bind behavior with custom URLs for my application. Below, I’m starting to setup the routes for my app, using the built-in Angular ngRoute module and the $routeProvider API. I’m about to use the .when() function to define a URL; this function lets me configure the HTML I want to display and any app logic that I want to run when the URL is accessed:

Here’s what the final code looks like after I’ve configured a “/list” URL, which will load a listController when it’s accessed. The controller will be responsible for setting up the data/model and behavior that will be attached to a list.html page for this URL.

Defining a Controller

Now, I’ll define a controller named listController. Here you’ll see I’m using a $scope parameter, which is a special parameter defined by Angular that is accessible from my HTML view - any members I assign to the $scope will be available in my HTML.

IntelliSense shows me the JSDoc comments for the $scope APIs as I use them, this saves me a trip to the web browser to review API documentation.

Adding a Service

For the next step, I want to pass data from the controller to my HTML page. I could code all of my data into the listController, but I prefer to break up my application into smaller pieces that can be re-used and tested in isolation from other features. A common way to do this with Angular is to define a service, which I can then call from my controller. You can think of a service as a single-instance object that may be reused across other parts of your app.

Here I define a projects service that I can call in my controller to retrieve project data. To keep things simple while I’m getting started, I’m returning a hard-coded list of objects.

Now I’ll add a reference to the projects service in my listController; I can see IntelliSense is provided for the projects service when I call it, and the allProjects member is shown:

Building a directive

Now, I want to create a custom HTML component to list the names of projects from my projects service. I do this by building a directive: a self-contained component combining visual layout and behavior that I can attach to HTML DOM elements in my application.

Below, I’m defining a directive named “listProjects”. I’ve included an HTML template that will be used to generate the HTML for the directive. Next, I’ll write the controller for this directive. The AngularJS IntelliSense extension is providing suggestions as I work with the $elements parameter, which lets me access my directive’s DOM element.

After defining this directive, I use it in my HTML to render the list of projects.

Navigating Angular code

Finally, the Go To Definition feature allows me to navigate to the definitions for the APIs I’m using in my source by right-clicking on a function or variable defined in my application and selecting Go To Definition.In this example, choosing Go To Definition will take me to the allProjects member I defined on my projects service.

Using AngularJS with TypeScript

I’ve spent this post talking about how you can improve the coding experience for Angular in the JavaScript editor. If you’d like to develop an Angular application using TypeScript 1.4 or greater, download the Angular .d.ts files from the DefinitelyTyped site or install the AngularJS TypeScript 1.4 NuGet package and add them to your project to get API signatures for Angular.

Looking ahead to AngularJS 2.0

The AngularJS extension supports AngularJS 1.2 and greater (at the time of writing, the extension has been tested through AngularJS 1.3). Looking ahead, AngularJS 2.0 will take a new approach to development from that used in AngularJS 1.x, and it’s likely that new AngularJS 2.0 coding patterns will require new Visual Studio support. We’re working with the Angular team to ensure a great Visual Studio experience for AngularJS 2.0.

Help the community improve the AngularJS extension

If you have any feedback about the extension or would like to assist the effort, please join us on the AngularJS IntelliSense project site.

If you want to help contribute to this extension, browse the source on the project site and review the JavaScript IntelliSense extensibility API documentation for Visual Studio; this is the extensibility API John used to build this extension.

I want to share a final thanks to John Bledsoe for working passionately on this extension and making significant improvements to it over the past few months. We sincerely appreciate the support of developers like you who share our passion for JavaScript developer tools.

Jordan Matthiesen– Program Manager, Visual Studio JavaScript tools team Jordan has been at Microsoft for 3 years, working on JavaScript tooling for client application developers. Prior to this, he worked for 14 years developing web applications and products using ASP.NET/C#, HTML, CSS, and lots and lots of JavaScript. Twitter: @JMatthiesen