Tuesday, April 22, 2014

Video: A JavaScript Feed Reader in Under 10 Minutes Using Angular JS

An important component of the decision to use a framework should be the amount of ceremony and ritual involved. You must carefully weigh what it takes to ramp up on the technology and how common tasks are performed. It does no good to adopt a library that forces you to solve a problem with more effort than it would take using your basic tools. One of my favorite examples to showcase technology is a simple feed reader. Several years ago I recorded a video to demonstrate how to build a Silverlight MVVM Feed Reader from Scratch in 30 Minutes. It opened a lot of eyes for people who thought MVVM was overcomplicated.

HTML5 and JavaScript have matured significantly and it turns out it is even easier to build a similar application from scratch using tools like Angular (I even throw in some Twitter Bootstrap styling so it looks halfway decent). One of the things I really like about Angular is that it is really doesn’t involve a lot of ritual or ceremony. In fact, in this video I probably take too much time doing things like setting up a title and writing constructor functions instead of just in-lining the code for my controllers and services.

Nevertheless, I manage to make a functioning feed reader entirely in the browser from scratch in less than 10 minutes. In the video below you’ll see how to bootstrap Angular using the Content Delivery Network (CDN), set up your initial app, add a controller, then add a service and wire everything together. I even show you how the built-in forms controller automatically handles disabling the submit button for me when I specify the input type as a URL and note that it is required. Enjoy this video as it illustrates how Angular can save you time building your web-based apps:

Angular JS Feed Reader in Under 10 Minutes.

If you are interested in learning more, check out my course on Mastering AngularJS and read about consulting and training opportunities. Grab the source and run the demo for the feed reader yourself right here.

1 comment:

  1. OK, that was just showing off! Seriously, a very impressive display of knowledge (and typing skills)