AngularJS support for ReSharper

Matt Ellis

In case you haven’t already been introduced, AngularJS is a popular JavaScript framework for creating dynamic web applications. It provides many of the services required to build such applications, not the least of which is a declarative approach to updating the UI. It favours the use of data binding and templates over direct DOM manipulation, and it makes it possible to create complex sites with a minimum of code. For more information, check out the examples on their home page, or take a look at the video tutorials by our very own John Lindquist.

We’ve just released a plugin that adds ReSharper support for some of AngularJS’ features (here’s a direct download link). It’s an initial version, so doesn’t cover everything, but what it provides should give you a helping hand in creating your sites. Currently, the plugin provides code-completion for Angular’s custom HTML attributes, and a bundle of Live Templates to make building common constructs easier.

Code completion will include all of AngularJS’ “ng-” attributes when editing HTML files, and include a description tooltip:

It also supports the HTML5 “data-” prefixed versions of the same attributes.

And of course, since ReSharper has smart matching, you can type initials to quickly get to the start of the attribute you want. For example, you can type “dngbh” to get to the “data-ng-bind-html” attribute:

The plugin also ships with 26 Live Templates, based on the IntelliJ and WebStorm templates by Pawel Kozlowski and John Lindquist, respectively. They are split into functionality for directives, modules, scope, routing, html and global helpers. For example, you can use the “ngindex” template to create a simple HTML page to start your development,  or “ngb” to create a binding expression. These work in HTML or HTML-like files (Razor, ASPX, .html)

The JavaScript templates can create code for directives, for loops, modules, routing and scope. These are available in JavaScript files, and within script tags in HTML-like files:

Please check out the templates explorer to get a full list, or to edit, add or remove templates.

This is just an initial release. We’d love to expand the feature set, supporting custom HTML element directives, navigation to model properties, binding expressions, and more. If there are any features you’d like to see, or if you find any bugs, please add a feature request to the Issues page. And of course, it’s Open Source – if you’d like to see a new feature, how about taking a crack at it? We’ll help.

Now, go and download it, and make lovely dynamic JavaScript applications.

Subscribe to a monthly digest curated from the .NET Tools blog:

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!