Tag Archives: AngularJS

AngularJS – JavaScript Swiss Army Knife

AngularJS I’ve been trying out different JavaScript libraries within couple of months. All the way from industry standard JQuery to bacon.js functional reactive programming library. Combining the best of them one can build custom library set and build your site/application with it.

Colleagues at work have been trying out AngularJS and they only have good things to say about it. I’ve been quite skeptical about JavaScript MVC frameworks since they mess with JavaScript prototype and use that for inheritance. Also messing and modifying up with DOM is something I’m not fan of.

So. I browsed to AngularJS web site and started to go through tutorial. It starts out with setting up environment which is very easy. Tutorial is based on Git branches so when navigating to next part you just switch branch.

First four parts of tutorial teaches you basic concepts of AngularJS. Importantly how data-binding works. It also teaches basic usage of testing with Jasmine which is run by Testacular.

Part five of the tutorial teaches you how to use Dependency Injections with AngularJS application. It shows how to make http request, automatically parse and bind it as model. There’s also some really good examples how to use mocks in tests.

Part six deals with pictures and links. It gives reader basic understanding how images and links are generated dynamically. It also lays foundation for navigating from wide range of data to more specific based one. There’s one more testing example in this chapter.

Part seven is about routing and multiple views. It teaches how to divide application into separate views. Views can have separate contexts which makes views quite safe to use. AngularJS includes very sophisticated Dependency Injection system. This chapter dives deeper into DI. One can say that it’s the core of AngularJS. It reminds me of Google Guice which is really lightweight and flexible DI system based on modules.

Part eight dives into showing details about initial data. It teaches how to deal with view templates. There’s one additional test to write. Because of BDD style testing, tests are very easy and intuitive to write.

Part nine shows basic usage of filters. Filters are DI Modules which can manipulate injected data. There’s also some cool example of event streaming.

Part ten is about event handlers. If you click, something happens. Easy.

Part eleven takes sample application step further. Services are introduced and low level http requests are wrapped  behind them. There’s also concept of “future” objects. When ajax request is made, “future” object is returned immediately synchronously. When asynchronous request is completed, “feature” object will be filled with data. After that AngularJS even streaming takes care of passing all data to views. Testing includes defining own Jasmine matcher.

That’s it for the tutorial. It’s excellent way to discover AngularJS. Don’t take this too seriously, but AngularJS reminds me of Java JSTL. That’s not a bad thing. I guess.

AngularJS is all a round tool for making client side MVC. It includes really easy to use concepts which are very intuitive to use. I would say that AngulaJS is like a Swiss Army Knife. It’s parts are not so powerful, but when combined into one package – it’s unbeatable. I’ve learned good lesson about how JavaScript MVC framework should work. I’m fascinated.