Using AngularJS in Visual Studio 2013
Today, Visual Studio provides IntelliSense suggestions for APIs directly off of the angular object.
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
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).
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
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
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.