AngularJS Workflow in WebStorm
WebStorm 8 introduces a slew of new AngularJS features. This post will help you understand and optimize your workflow around what we provide.
Include angular.js in Your Project
While the AngularJS plugin is now bundled with WebStorm* the AngularJS features don’t kick in until you’ve included the AngularJS scripts in your project.
Local
Head over to http://angularjs.org, click the download buttons, then move the angular.js script into your project.
CDN
If you prefer to use a CDN, place the cursor over the highlight library name, hit Alt+Enter, and Download Library. This will set up a local library in WebStorm’s cache (not in your project) so WebStorm can access AngularJS methods, directives, etc for autocompletion and documentation lookup.
Libraries can be reconfigured later under Settings | JavaScript | Libraries. This trick also works with any other JavaScript library.
Bower
If you have http://bower.io/ installed, WebStorm will pick up on the angular.js script automatically. It’s worth noting that WebStorm can now help you manage your bower.json libraries under Settings | JavaScript | Bower.
The Basics
The first thing to notice is that you’ll start getting autocomplete for HTML attributes (e.g., ng-app) as well as autocomplete for JavaScript symbols (e.g., angular.module). For faster autocompletion, try typing “na” to quickly filter to ng-app or “nc” for ng-controller. WebStorm does character matching against complete words to help you select your desired autocomplete as quickly as possible.
Also, hit F1 over any directive to quickly view document. You can click the up arrow to jump to the online docs as well.
Lastly, you’ll get completion for matching braces, so when you type {{ the matching }} will automatically be inserted.
Navigation Features
WebStorm will help you to easily navigate between your modules, controllers, and directives.
Simply Ctrl or cmd + click (Windows/Mac) in your HTML and you’ll be instantly transported to whatever file and line number your modules, controllers, or directives are defined. You can also simply use Ctrl or cmd+B if you prefer the keyboard.
You’ll be surprised as your project gets bigger and bigger and you start spreading modules, controllers, and directives across many files how easily this helps you navigate around what you’re working on.
To get back, simply hit Ctrl/cmd+Alt+left arrow to navigate right back to where you were. You can also simply invoke Search Everywhere by double-tapping Shift and it will show you a quick list of your recent files.
Similarly, we’ll provide the best completion and navigation we can infer for your expressions and filters as well.
WebStorm will also warn you when it can’t find modules, controllers, and filters. So if you see highlights and grey squiggly lines, double-check your work:
Custom Directives
WebStorm provides support for autocompletion and navigation with your own custom directives as well. If you use restrict: ‘E’ for custom elements, WebStorm will limit the autocompletion to elements. If you use restrict: ‘A’, then it works only for attributes.
You can even Rename your directives which will update both the HTML and the JavaScript (and docs, if you choose) so that you’re naming always stays in sync. Just invoke the Rename Refactoring with Ctrl+T and let WebStorm work its magic.
Lastly, if you want autocomplete for expressions inside of custom directives, make sure to properly document your directive with em>@ngdoc, em>@name, and em>@param. WebStorm parses the docs to know which attributes accept expressions.
Working with routing and urlTemplate
WebStorm also helps you with urlTemplate by providing similar autocompletion and navigation. Simply place the cursor inside the quotes and either hit Ctrl+Space once for autocomplete based on your current path or tap autocomplete twice for autocomplete across your entire project. The .gif below shows hitting autocomplete twice.
If you begin to have multiple modules and your scripts are nested inside directories, but you want to maintain your relative urls against the root path, then you’ll need to mark the partials’ parent directory as a Resource Root so that autocompletion and navigation works properly, otherwise WebStorm won’t know how you want to treat your urls.
Download WebStorm
Head over to http://jetbrains.com/webstorm to download WebStorm 8+ and try out all the new AngularJS features. Make sure to check out our What’s New page and videos to explore the other great new features like multiple cursors and selections, spy-js, GruntJS, and more!
*If you’re using IntelliJ IDEA (starting from v.13.1), PhpStorm (starting from v.8, EAP build available now), PyCharm (starting from v.3.4, EAP will start soon), or RubyMine (starting form v.6.3, EAP build available now) you’ll need to install the AngularJS plugin from Settings | Plugins | Install JetBrains Plugin (or double-tap Shift for Search Everywhere, type Install, and hit Enter).
Develop with pleasure!
JetBrains WebStorm Team
Subscribe to WebStorm Blog updates
