Debugging AngularJS Source with WebStorm

The great thing about AngularJS is that it comes with a very full featured test suite. This means that you can use tests if you:

• want to play around and try to add new features in AngularJS 
• or try to understand AngularJS internals

This is my quick guide on the steps I had to carry out to debug the code I downloaded. I'll be using windows and webstorm. Some of these are pretty standard steps if you know nodejs + karma but should be helpful nonetheless. All commands should be run the from main AngularJS folder. The git root folder (whatever you want to call it). Not the src folder. In particular the folder where you have package.json , Gruntfile.js, karma-config-* files.

Get AngularJS source

Download (git clone) from https://github.com/angular/angular.js

Make sure you have NodeJS installed 

A pretty painless task: http://www.youtube.com/watch?v=VLncCs8bdI0

Install the pre requisite global NodeJS packages

You need grunt and karma. Pretty painless after you have node: 

npm install -g grunt

npm install -g karma 

Download AngularJS prerequisite NodeJS packages

Run:

npm install

from the main AngularJS folder. This will basically read package.json and download any prerequisites. 

Setup your CHROME_BIN

I have this environment variable pointing to my chrome.exe (not chrome canary).

Build Angular

Build AngularJS (required if you want to run the tests):

grunt build

Run the karma server

Simple command: 

karma start karma-modules.conf.js --no-single-run --auto-watch --reporters dots

This should start chrome + run the tests (module tests in this case as I ran karma-modules.conf.js) 

Leave this command (i.e. karma) running in the background.

Now setup debug environment in WebStorm

Create a new WebStorm project from your AngularJS folder. Edit your run configurations: 

(Don't mind that I already have debug karma setup, you will not). 

Add a remote debug config: 

Add set it up as follows. Call it whatever you want but url to open and remote url are important: 

http://localhost:9876/debug.html

http://localhost:9876/base

Great. Now set a breakpoint, Start debugging and watch the magic happen. 

AngularJS minification

Just downloaded angular source. Its no secret that AngularJS uses google closure tools. In case you are wondering how here is the grunt config:

This uses the custom grunt task as follows:

And the contents of the grunt task are just calling google closure compiler with proper arguments:

AngularJS + RequireJS

TypeScript has excellent support for AMD / RequireJS and you can see that over here

http://www.youtube.com/watch?v=4AGQpv0MKsA

Now that I am working on throwing AngularJS into the mix it feels a bit awkward to integrate AngularJS / RequireJS / TypeScript.

I've done it before and infact this presentation uses all three:
http://basarat.github.io/TypeScriptDeepDive/
It provides a great sample for you to experiment with if you need to (based on RequireJS + AngularJS seed project https://github.com/tnajdek/angular-requirejs-seed)

It becomes a lot less relevant when you do your bundling and minification on the server e.g. http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification . Let me explain.

There are two reasons behind organization of your script files.

First: 

Items that are declared in the global namespace are available before they are used.

e.g. $ should be available before your code runs e.g. even the init: 

Or for that matter angular should be available before you go on creating your modules. This is the area where RequireJS is still relevant when you use AngularJS. This is the area that can also be solved by ordering in your JS bundles.

Second:

Functions declared are called in order. AngularJS does this inherantly. Any module declaration / service declaration / scope declarations are just declarations. These are executed depending upon the order they are defined as a dependency. e.g

Directives controllers and services all get instantiated (using function calls) before the module gets instantiated. This is a region of overlap between RequireJS and AngularJS and if you are using Angular then RequireJS loses a bit of its charm.

Finally:

The final decision is of course up to you and you will have to make it for your project based on your requirements. If you are using a lot of script tags and don't have a server side alternative then yes, I feel requireJS is a must for you. Otherwise, not so much.

Additionally: 

The angular team itself depends on closure compiler to do its minification (confirmed fact) along with sourcemaps (my assumption) to do its debugging. So they can effectively use a single script tag since the ordering logic is maintained by the closure compiler. 

TypeScript Deep Dive

I recently gave an indepth advanced talk on TypeScript at Melbourne ALT.NET:
http://www.meetup.com/Melbourne-ALT-NET/events/115068682/

I had a lot of fun preparing the slides for this presentation. They are based on RevealJS / HTML. I addtionally strapped in TypeScript / Angular / RequireJS for my future talks.

You can find the slides here: https://github.com/basarat/TypeScriptDeepDive and I encourage you to use these in your own talks and contributions are appreciated.

Slides embedded here as well (click on slide to make active and press f to go fullscreen):

Knockout vs. AngularJS : MVVM Frameworks

I gave this presentation at Melbourne alt.net : http://www.meetup.com/Melbourne-ALT-NET/events/105244942/

Thought I'd share the slides over here as well :

Mvvm knockout vs angular from Basarat Syed