Using jsFiddle with AngularJS

AngularJS is an awesome framework and its google group is very active. AngularJS community figured out quite early that it is so much easier to collaborate having a live code snippet.

There are many code snippet sharing tools out there but the jsfiddle is great and is used very often by the AngularJS community.

This post tries to dive into several usage scenarios of jsfiddle with AngularJS framework. The aim here is to make sure that people can quickly and easily prepare their jsfiddle which is crucial for getting help from  the AngularJS community.

Start safe

The easiest way to have a working jsfiddle with AngularJS is to start from a template prepared by the AngularJS team: http://jsfiddle.net/IgorMinar/ADukg/. The jsfiddle under this URL is updated with each release so you can just bookmark it and use it a starting point for your fiddles.

One remark: when using http://jsfiddle.net/IgorMinar/ADukg/as a stating point make sure to fork it instead of editing the original one.

Configure your own fiddle

jsfiddle is simple to use but there are couple of settings that we need to get right. All the jsfiddle options that need to be configured are located inside one of the panels on the left-hand side. Now we will take a tour of panels that are important from AngularJS point of view.

Choose Framework

jsfiddle has built-in support for AngularJS which makes the whole process of creating a new jsFiddle rather straightforward. In is enough to choose AngularJS as a framework and no wrap (head) (this is very important, otherwise your jsfiddle won’t work properly!).

Manage Resources

By The “Manage Resources” tab allows us to add additional references to external JS / CSS files. This tab comes very handy if we would like to use AngularJS modules other than ng (ngCookies, ngResource, ngSanitize or test-specific ngMock, ngMockE2E), external libraries (jQuery, angular-ui) or some fancy CSS. The screenshot below shows a jsfiddle configured with ngResource and bootstrap CSS being added.

Info

Next comes the info tab. On this tab you can customize some ‘info’ settings (title, description) to your liking but the setting you want to really pay attention to is the one in the ‘Body Tag’.
Usually AngularJS is bootstrapped inside the <body> tag – this is where we do use ng-app directive. Now, if we do define a module we need to put its name in the ng-app attribute and we do this in the ‘Info’ panel. Here is an example:

If a module is not used we can simply put <body ng-app>.

Yes, you can!

I’ve noticed that people often think that jsfiddle is very limited and can be used to illustrate only the simplest use cases. While it is true that there are use cases that are tricky / impossible to show with jsfiddle you can actually get pretty far. Here I would like to demonstrate how to use jsfiddle with some “advanced” AngularJS constructs.

Partials

There is no support in jsfiddle for creating files, so we can’t prepare HTML templates as individual partial files. What we can do thought is to embed partials in the HTML panel with the script directive. Here is the example of using ngInclude with jsFiddle.

Routes and $location

Inspecting the result panel shows that jsfiddle is using a separate IFrame to present execution results. This means that we’ve got a separate “address bar” for our scripts and we can provide code snippets making use of:

xhr ($http, $resource)

Testing $http and $resource shouldn’t be much of the problem, here is the example of using MongoLab with $resource: http://jsfiddle.net/pkozlowski_opensource/mMRfV/.

It is worth noting that jsfiddle has an ‘echo’ service that will respond with whatever content was sent. Check jsfiddle help for more details: http://doc.jsfiddle.net/use/echo.html

There is more

There is AngularJS WIKI page that has number of other jsfiddle / plunker examples so you might have a look for inspiration. Be ware thought that some of the fiddles are quite ‘messy’ – even if those examples are super-interesting, often stunning!

Getting help, the smart way

Don’t get me wrong, I love helping people. I really like code and tricky problems. But sometimes I really don’t feel like responding to posts on the AngularJS mailing list and most of the time this is due to the following reasons:

  • no jsfiddle / plunker provided: if I see a post full of source code that I can’t run immediatally I’m less likely to look into the issue; the thing is that in most but trivial cases you need live code to debug to actually understand what is going on – if I’ve got a source code in a post I need to copy it to a jsfiddle / plunker myself and often I’ve got no time / energy to do this; fortunately, after reading this blog post, you should know how to prepare a working jsfiddle!
  • code example too big: we are all busy and have only limited amount of time to spare; I want to help but want to do it fast – the less code I’ve got to read the faster I will understand it, so:
    • try to have a minimal reproduce scenario, omit everything that is not essential to the problem / issue you want to discuss;
    • omit any noisy parts of HTML: don’t include body / head tags in the HTML panel, just configure your jsfiddle;
    • don’t include CSS if it is not essential to demonstrate your problem – unless you are showcasing something omit any CSS that is not needed. If you are exposing a problem it doesn’t need to be pretty – just needs to be fast and easy to understand. Attributes in HTML there are there only due to CSS (class, id etc.) just make the HTML bigger / harder to grasp.
About these ads

7 Comments on “Using jsFiddle with AngularJS”

  1. Tom says:

    Great post and very helpful – thanks for writing it up.

  2. petebd says:

    By the way there is now a 1.0.2 fiddle framework choice, which also gives you the option of automatically including ngResource and ngSanitize modules.

  3. blesh says:

    Mr. Kozlowski… do you have a chat client or email information? I’ve seen you frequently on Stackoverflow and we share an interest in AngularJS. I wanted to thank you for answering so many questions about Angular on Stackoverflow. I love Angular, but I feel their documentation is lacking. So I’ve been trying to answer as many questions about Angular on SO as I can. I’ve noticed you and I appreciate your effort. Hopefully Angular will start to get more attention soon.

  4. Łukasz says:

    Please do post more often :-) Great to see that more developers are working with AngularJs and sooner or later they will end up here! I’m subscribing to RSS :)

  5. Ben Lesh says:

    Hey Pawel!

    One more thing to add: If you need to use JQuery with Angular, you’re actually better off selecting JQuery from the Framework dropdown THEN adding ANgular as a resource, This way Angular will use full jquery objects as $elements in places like your directive linking functions.

  6. Sunny Shah says:

    Excellent Post!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.