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.

image04

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.

image03

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.

image06

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.

image01

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:

image02

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.

image07

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 @ngdoc, @name, and @param. WebStorm parses the docs to know which attributes accept expressions.

image05

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.

image00

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.

image08

 Download WebStorm 8

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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Cool Feature, Screencast, Tutorials and tagged . Bookmark the permalink.

47 Responses to AngularJS Workflow in WebStorm

  1. Jim Cummins says:

    Great stuff. Can you give an example of how to configure Angular in the context of Settings > Javascript > Libraries. It looks like PHPStorm isn’t detecting Angular for me even though it shows up under PHPStorm’s bower area. I want to add it manually under libraries to see if that helps.

    • Ekaterina Prigara says:

      Make sure that you’re using PhpStorm 8 EAP and AngularJS plugin is installed. In this case PhpStorm should provide AngularJS support no matter how you add angular.js file to your project (as long as it’s not minified).
      If you would like to try adding it as an External library, go to Settings > Javascript > Libraries, then click Add, in the new window write some name for the library, then click + and Attach files: you can select angular.js file located anywhere on your computer. If you select Global option, then this library will be saved in the IDE caches and you could enable it in any project.
      Let me know if it doesn’t work.

  2. James says:

    I’m getting issues too after updating from IDEA v13 > v13.1.1 and AngularJS plug-in v135.565 today.

    I’m using the seed AngularJS app from Google, which uses Bower. I’ve tried adding Angular manually to the project libraries, and un/reinstalling the plug-in and the app, creating a new web project etc, but it’s not recognising anything from Angular.

    • Mikhail says:

      A friend of mine reported similar problems with Ext JS 4 – when the predefined Custom Types is chosen in the JS libraries customization dialog and then “Download” clicked following problems happen:
      1) Ejt JS 4.0 is downloded, while the latest version is 4.2.2.
      2) The downloaded js file has very long name (“…_with_comments.js”) and the always-needed-open tab with it takes too much space. Would be great to have IDEA’s “Pin Tab” feature to contract the tab in size – similar to how it Chrome does with its tabs to Stick / Pin.
      3) Documentation does NOT work – same as with Angular.

      Would be really great to have a page somewhere on JetBrains wiki to have valid “Documentation Paths” for popular JS frameworks. “Specify documentation path” is too loose, especailly it is perceived incomplete when docs simply do not work.

      ( IDEA v13.1.1 )

  3. BrutalBrutus says:

    How (what shortcut) did you use to add doc to the controller js? That’s a nice feature.

  4. Paul says:

    Hi all, I love angularjs and have been developing apps in Visual Studio, however I decided I wanted a better IDE for client side development and which supports Mac OS, so I purchased WebStorm 8, so glad I did, I love it, I’ll keep Visual Studio for building back end services only and as I do a lot in the .net world

    Being a WebStorm newbie I’m looking for resources that shows how to create a new angular js project from scratch, one that assume you’ve never used WebStorm before. Can anyone help me out??

    Much appreciated.

    Paul

    • Ekaterina Prigara says:

      Hello Paul,
      Actually this blog post is a good starting point. I would also suggest you watching a set of very short videos covering WebStorm basics http://www.jetbrains.com/webstorm/documentation/ and this webinar for some handy tips and tricks http://www.youtube.com/watch?v=leKbqNpgoNQ
      Let me know if you have any specific questions.

      • Paul says:

        Thanks Ekaterina,

        The problems I’m having seem to be related to the Project Type and getting Bower to work. I really want to use a package manger if I can get it to work. I’ve pretty much read and followed all the documentation and videos over the past few days to no avail.

        1. As AngularJS is not available as a project type when creating a new project, what is the best option to choose? So far I have been selecting ‘Empty Project’. I won’t be doing any server side dev as I’ll be consuming existing restful services 99% of the time. if using Empty Project is part of the problem then I guess its either HTML5 Boilerplate or Bootstrap?

        2. I have downloaded and installed node and npm package and seem to be having issues setting it up in webstorm 8 and getting it to work.
        Under Preferences/JavaScript/Bower I have the following:
        Node Interp is set to: /usr/local/bin/node
        Bower exe is set to: /usr/local/bin/npm
        bower.json is empty, I can’t locate such a file and therefore I’m unable to use + to add any dependencies :-(

        3. Under Preferences/Node.js and NPM I have the following settings.
        Node interpreter: /usr/local/bin/node
        Packages: npm, version 1.4.3, latest 1.4.7. Pressing the blue update arrow, getting the Packages window and choosing to Install Package does nothing :-(

        In available packages I can search and find bower, but when I click in Install Package button it then becomes disabled indicating its going to download the package BUT nothing ever happens, even after several hours of waiting, the package doesn’t get installed and button stays disabled. Then if I select another package and then go back and reselect bower the button install package button is enable. I have tried this many times without success :-(

        I would be incredible grateful if you could help me out :-D

        Cheers Paul.

        • Ekaterina Prigara says:

          Hey Paul,

          1. That’s right, now we don’t have a project template for AngularJS app, but adding one seems like a good idea. For now, I would suggest you using this AngularJS seed project: https://github.com/angular/angular-seed . You can just download it, rename project folder and then open it from the WebStorm welcome screen – Open directory…

          2. If you would like to use Bower you need to make sure a. Bower is installed globally on your computer and b. bower is initiated in the project (you have bower.json file in it).

          a (also relates to 3). Go to Preferences | Node.js and npm, click Add, find Bower, on the right on the window check Options and write -g (you need to install package globally), then click install.
          When the package is installed, the package name becomes blue and Install package button is enabled. After that you can just close this window, you’ll see Bower in the list of your installed packages.

          b. Now you need to initialise Bower in your project (skip this if you’re using Angular seed, this project already has valid bower.json file, and for it you just need to execute bower install command in the WebStorm built-in Terminal to install the dependencies that are already defined in it). There are 2 ways: 1. in the built-in terminal run bower init (http://bower.io/#defining-a-package) or 2. manually create a new file bower.json and add there at least the project name { “name”: “my-project” }.

          If you would like to add dependences to your project with Bower, go to Preferences | JavaScript | Bower. In the Bower executable specify the path to Bower (NOT npm!), something like /usr/local/bin/bower and in bower.json – path to the bower.json file in your project.

          Hope it will help you.

  5. David says:

    Is the autocomplete available in Jade?

    Jade is fairly common in the Node.js environment, which in turn is popular for use with Angular.

    My initial test seems to indicate it isn’t.

  6. Robert Kozikowski says:

    Are there any plans to support custom element directives with more than one parameter? I end up using them a lot in my project.

    It would be really cool if I could get auto completion for param-one in ng template for following directive:
    /**
    * @ngdoc directive
    * @name customElement
    * @restrict E
    * @param {string=} paramOne
    */
    webstorm.directive(“customElement”, function() {
    return {
    restrict: “E”,
    scope: {
    paramOne: ‘=’
    }
    }
    });

  7. Daniel Salamon says:

    Great feature!
    WebStorm also has great CoffeeScript support, but my question is, can we use Angular and CoffeeScript support together, like writing the Angular files in CS instead of JS?

  8. Sebastian Römmig says:

    Great IDE and features, but how can I use the intention for creating e.g. app.js like shown in the video?
    I do not find any intention inside my Settings->IDE Settings->Intentions is it a custom one???
    Using WebStorm 8.0.2 and try to do it like it is shown in the video…

    • Ekaterina Prigara says:

      Here is what happens in the video:
      John prints script src=”app.js”- app.js file doesn’t exist in the project and WebStorm highlights the file name as non existent. With the shortcut alt-enter on the file name, you are provided with a quick-fix “Create new file”.
      I would recommend you 2 ways to look up shortcuts: 1. Help – Default keymap reference or 2. Settings – Keymaps

      • Sebastian Römmig says:

        I tried Alt+Enter like suggested in help documents, but I only get “Inject Language/Reference” as intention suggestion.
        That the ide is not showing the bulb is not the problem…
        I’ve updated from 8.0.1 to 8.0.2 maybe thats the problem?
        I also do not see the icons for filetypes in the project explorer no more.

        • Ekaterina Prigara says:

          Are you sure that you don’t already have this file in your project?
          Regarding the icons… it’s really weird. Please try File | Invalidate Caches and let us know about the result.

          • Sebastian Römmig says:

            Ivalidate Caches does the trick with the icon problem, but not with the intention.
            Step 1: I’m inside a html file which lays inside my project structure.
            Step 2: I type “” (it autocompletes with ).
            Step 3: I click on “test.js” and press alt+enter (twice, because nothing happens when only hitting it once)
            I will try it again with a new Project and will file a bugreport if it still doesn’t work. Thank you for your help anyway.

          • Sebastian Römmig says:
        • Ekaterina Prigara says:

          Thanks for reporting the issue, we’ll have a closer look and reply you on YouTrack.

  9. Alex says:

    Is it possible to have autocomplete for paths when using ng-src for example? At the moment it does not work, but if I change the ng-src attribute to just src then the autocomplete for the path works as desired. Is there somewhere I can set this? Thanks

    • Ekaterina Prigara says:

      No, we don’t resolve the path in ng-src because it usually contains a data-binding and it’s quite tricky. We’ll see what we can do to improve it.

  10. Pingback: MEAN Stack Walkthrough and Tips | JetBrains WebStorm Blog

  11. Jonathan Jones says:

    I just installed the EAP release and AngularJS auto complete is working great. The only complaint I have is that in ng-repeaters the variable set to represent each object is showing as unresolved.

    For Example:
    ng-repeat=’person in people’
    {{ person.name }}

    I would almost prefer to only have auto-completion in the HTML files, or have it ignore variables nested in repeaters until resolved.

    • Dennis Ushakov says:

      Please provide some code sample, I cannot reproduce this issue

      • Thierry Goettelmann says:

        {{foo.bar}}

        If “foos” is for example retrieved via Ajax, then Webstorm/Phpstorm says “Unresolved variable bar”

        • Ekaterina Prigara says:

          Since it was retrieved via AJAX at the runtime, WebStorm is not aware of the content of retrieved JSON.

        • sroe says:

          You can do this:
          /** @typedef {object} foo
          @property {string} bar */
          and Webstorm will stop complaining about unknown bar.
          For some reason you also have to declare foo too as var and say /** @type {foo} */ before var foo;

  12. Mark Anderson says:

    I’m stuck. I’m just starting with Angular (client for REST). I’m trying to move from VisualStudio Pro 2013.

    I have my project defined and my angular auto-complete etc, but how do I test my app? I can’t use file://. In VS, when I click debug, it fires up a web server and runs it. What do I do in WS8?

    Regards

    Mark

    • Ekaterina Prigara says:

      In the project view right click on the html file you’d like to open in browser and click Open in – your browser of choice. WebStorm will start its built-in webserver and open your index.html (or other file you need).
      Alternatively you could click on browser icon on the top right corner of the editor, when html file is opened.

  13. mike wassermann says:

    How do I setup WebStore from scratch, just installed WS.

  14. Ranjit says:

    Hi,
    I’m using WebStorm 8 and my code has a number of angular modules and services. I’m injecting other angular services but WebStorm is not able to resolve them for code navigation.

    here is an example:

    ‘use strict’;
    angular.module(‘module1′, ['mod2', 'mod3'])
    .service(‘service1′, function($q, service2, service3) {

    }

    Note: When I click on service2 (which is defined in mod2) webstorm says “Cannot find declaration to go to”

    I have angular.js included in the scripts.

    Please help!

    • Ekaterina Prigara says:

      Hi,
      It’s a known bug: http://youtrack.jetbrains.com/issue/WEB-11593
      Follow the updates on the issue to know its status. Thank you!

    • Nick M says:

      Hi Ranjit,

      I don’t know Webstorm’s official way of doing it, but after playing around a bit, I was able to get this to work using annotations.

      // mod2.js
      ‘use strict’;
      angular.module(‘mod2′, [])
      /**
      * @name service2
      */
      .service(‘service2′, function() {

      }

      // module1.js
      ‘use strict’;
      angular.module(‘module1′, ['mod2', 'mod3'])
      .service(‘service1′, function($q, /**service2*/ service2, service3) {

      }

      In mod2, the @name annotation seems to tell webstorm to index that function. Then, in service1, the /**service2*/ is clickable using ctrl + click. Using ctrl + click on the regular service2 argument doesn’t seem to do anything, but doing the same on the annotation jumps to the reference. Also, auto-complete for service2 inside service1 seems to work even without the annotation in the arguments.

  15. camden_kid says:

    @ngdoc doesn’t appear in my list of doc options. How was WebStorm set up in the video for @ngdoc to be valid?

  16. Peter says:

    Is it possible to debug the application from WebStorm? (instead of having to use the Chrome inspector)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">