AngularJS Workflow in WebStorm

Ekaterina Prigara

WebStorm 8 introduces a slew of new AngularJS features. This post will help you understand and optimize your workflow around what we provide.

https://youtu.be/kWlj4a_e0G0

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 em>@ngdoc, em>@name, and em>@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

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

Comments below can no longer be edited.

63 Responses to AngularJS Workflow in WebStorm

  1. Jim Cummins says:

    March 31, 2014

    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:

      March 31, 2014

      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.

      • Mikhail says:

        April 2, 2014

        Thanks for the update. By default, with IDEA 13.1.1 the in-place as well as external documentation work perfectly: for example, the external doc for ngRepeat is: http://docs.angularjs.org/api/ng/directive/ngRepeat

        After addition of my local angular.js as a Library, and specifying following for external documentation (stable versions of Angular):
        http://code.angularjs.org/1.2.15/docs/api
        http://code.angularjs.org/1.2.15/docs

        both in-place documentation as well as external documentation stopped working.
        Can you please help with this? TIA.

        • Dennis Ushakov says:

          April 2, 2014

          Please try updating AngularJS plugin, this problem should be fixed now

          • Mikhail says:

            April 2, 2014

            Unfortunately, my current AngularJS plug-in version is 135.565 and I cannot update it – IDEA does not show it ready for update as of now.

            • Dennis Ushakov says:

              April 3, 2014

              Oops, it seems that documentation fix was not backported to 135 branch. Will do that and publish updated plugin version later today.

  2. James says:

    April 4, 2014

    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:

      April 4, 2014

      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:

    April 15, 2014

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

  4. Paul says:

    April 17, 2014

    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:

      April 17, 2014

      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:

        April 19, 2014

        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 😀

        Cheers Paul.

        • Ekaterina Prigara says:

          April 21, 2014

          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:

    April 19, 2014

    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:

    April 22, 2014

    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: ‘=’
    }
    }
    });

    • Dennis Ushakov says:

      April 23, 2014

      This feature is implemented on master and probably will be back ported to 8.0.x branch

      • Robert Kozikowski says:

        April 23, 2014

        Wow, I just looked at it, it’s awesome. Is there going to be some level of type checking based on @ngdoc comments as well?

        • Dennis Ushakov says:

          April 26, 2014

          Currently there’s none, but feel free to create feature request in our tracker

      • Januel Yee says:

        June 12, 2015

        Where is this feature now? Is this now included in Webstorm 9?

        • Ekaterina Prigara says:

          June 12, 2015

          Like it was said, that is available in WebStorm 8+

  7. Daniel Salamon says:

    May 7, 2014

    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:

    May 22, 2014

    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:

      May 22, 2014

      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:

        May 22, 2014

        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:

          May 22, 2014

          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:

            May 22, 2014

            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:

            May 22, 2014

            Ok, I have filed an issue:
            http://youtrack.jetbrains.com/issue/WEB-12241

        • Ekaterina Prigara says:

          May 22, 2014

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

  9. Alex says:

    May 23, 2014

    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:

      May 23, 2014

      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. MEAN Stack Walkthrough and Tips | JetBrains WebStorm Blog says:

    June 4, 2014

    […] AngularJS native support […]

  11. Jonathan Jones says:

    June 6, 2014

    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:

      June 9, 2014

      Please provide some code sample, I cannot reproduce this issue

      • Thierry Goettelmann says:

        June 30, 2014

        {{foo.bar}}

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

        • Ekaterina Prigara says:

          June 30, 2014

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

        • sroe says:

          October 31, 2014

          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:

    June 18, 2014

    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:

      June 18, 2014

      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:

    July 2, 2014

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

  14. Ranjit says:

    July 20, 2014

    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:

      July 21, 2014

      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:

      July 23, 2014

      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:

    September 25, 2014

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

    • Ekaterina Prigara says:

      September 25, 2014

      John is using some custom templates for creating ngdoc. You can add one in Preferences | Live templates.

  16. Peter says:

    October 29, 2014

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

    • Ekaterina Prigara says:

      October 30, 2014

      Absolutely! It’s one of the key features of WebStorm. Check out this tutorial.

  17. xyz says:

    December 5, 2014

    hm..
    you use good font.
    what is used font name?

    • Ekaterina Prigara says:

      December 5, 2014

      That’s default.

  18. Ryan Skinner says:

    January 14, 2015

    For some reason angular is not working for me at ALL.. SO FRUSTRATED. Ive been trying to fix this issue for the past 2 days and I’m getting nowhere..
    heres my code
    (html)

    {{site.bend.title}}

    Phone: (260)-710-6488
    Email: John.Mckinney@tkc.edu

    Leave a comment

    {{comment.body}}


    Comment:{{commentCtrl.comment.body}}

    -{{commentCtrl.comment.author}}

    by:

    (javascript)
    var webstorm = angular.module(“webstorm”, []);

    webstorm.controller(“SiteControl”, function () {
    this.bend = john;
    });
    var john = {
    name: ‘John Mckinney’,
    title: ‘Contact John!’,
    comments: [{
    body: “You’re awesome John!!”,
    author: “ryan.skinner@tkc.edu”

    }]
    };
    webstorm.controller(“CommentController”, function (comment) {
    this.comment = {};
    this.addComment = function () {
    this.comment.createdOn = Date.now();
    comment.comment.push(this.comment);
    this.comment = {};

    }

    });
    whenever I throw something in an h1 tag it comes out exactly how I put it in

    • Ekaterina Prigara says:

      January 16, 2015

      Dear Ryan,
      It’s quite hard to say what’s wrong with your code since the HTML tags didn’t survived pasting to the comment.
      For the advice on the code I would recommend you posting a question on http://stackoverflow.com/.

  19. 15 Useful AngularJS Tools For Developers says:

    January 20, 2015

    […] WebStorm is suited not just for Javascript but also HTML and CSS. It has an awesome live editor which lets you see your coding results on the browser without frequent refreshing needed. By default, their newest version carries the AngularJS plugin bundle although you will need to include the Angular script in your project first. For more details, read the WebStorm blog post. […]

  20. Penn says:

    January 29, 2015

    Hi, I am beginner for webstorm, just install webstorm 9.0.3.

    And followed the steps Using AngularJS-webstorm 9.0.2 help document, unfortunately, I cannot run my test angularjs project.

    I download the latest angularjs javascript library, and set the library for angular.min.js
    Even the app-version cannot be found! Could you please help me to fix it?

    Thanks.

    Penn

    • Ekaterina Prigara says:

      January 29, 2015

      Hello, what exactly goes wrong? Is your app working in browser?

  21. herman says:

    March 17, 2015

    Hello,

    I’m having difficulty with bower. I seem to not understand what it does or to set it up proparly like you have done. I’m struggling with it for hours now but i can’t get it to work..

    Thanks,

    Herman

    • Ekaterina Prigara says:

      March 17, 2015

      What’s exactly your problem? Try using Bower in the command line like it’s described in the Getting started section on http://bower.io/

  22. MobiWeb Technologies says:

    September 24, 2015

    Great write up. Just wondering – can you give a breakup of the performance boost you got with each optimization. We’re trying to optimize our Angularjs website and were wondering how we should prioritize these optimizations. Thanks.

  23. Jaime says:

    May 19, 2016

    Great post. Check this one out as well. AngularJS – When JavaScript Met MVC
    https://www.ziptask.com/AngularJS-When-JavaScript-Met-MVC

  24. saint scott says:

    June 7, 2016

    It’s wired that when webstorm detect the node_modules, the autoinserted double curly doesn’t work again

    • Ekaterina Prigara says:

      June 7, 2016

      Do you have angularjs module in it?

  25. Jaime says:

    July 7, 2016

    Thank you for sharing this great post.
    Check this one as well…
    “AngularJS – When JavaScript Met MVC”
    https://www.ziptask.com/AngularJS-When-JavaScript-Met-MVC