Getting to know AngularJS

As a beginner web developer, all of my experience with client-side coding never exceeded the few JavaScript or jQuery tricks I used to manipulate objects in the DOM, add animation or add custom behavior to traditional HTML tags. With jQuery, I could do more advanced DOM manipulation and animations. But the code was always messy and not maintainable by any means.

In my graduation project, I was assigned with the task to write a Single Page App. Since I was using ASP.NET Web Forms, I had to rely on Ajax and jQuery to achieve the Single Page App functionality. However, the code was extremely messy and so many blocks of code were hard-coded, which made the process of fixing bugs and updating the code challenging and inconsistent. I would have to send an AJAX request to the web server, and according to the response, update the UI manually. One simple error or exception and the whole thing would fall apart.

jQuery AJAX funtions

The power of JavaScript and client-side coding

Getting to know JavaScript frameworks was like opening a whole new world of possibilities for me. For example, the process of fetching data from a web service, injecting it in a template and adding it to the page is a piece of cake using JavaScript libraries like KnockOut or AngularJS. Building Single Page Apps gets easier with a framework handling all the data-binding and the routing for you. One can finally focus on what he wants to build instead of having to worry about the tedious work of reinventing the wheel.

Hello, AngularJS!

AngularJS has been getting more popular since its initial release in 2009. With its detailed and elaborate documentation, over 85,702 questions tagged with #angularjs on StackOverflow and tons of online tutorials, you can definitely get to learn AngularJS with the confidence that it’s well supported and the community is large enough to the point where any question or problem you might encounter will have a solution of some sort on the web.

AngularJS Popularity

Getting to know Angular

AngularJS uses the MVC design pattern, which was familiar to me as I previously used ASP.NET MVC. There’s your views which are “HTML Snippets” That you use, your scope that you use to bind data from your controller to the view, and finally your controller which is a simple JavaScipt function.

Angular is also modular, which is extremely helpful. You can inject other modules in your app and use them pretty easily. As I was developing a web app of mine called PhoneSmash, I needed the page to responsive so it would be properly viewed from multiple devices. Of course I could have used Bootstrap’s grid system, which is great and it does the job, but with Angular, I had a different approach on the problem.

I used a module by Jason Kulatunga called matchmedia-ng. All I had to do was installing the package using bower, including the script in my HTML page and inject the module in my app:

var app = angular.module('App', ['matchmedia-ng']);

var app = angular.module(‘App’, [‘matchmedia-ng’]);

This powerful dependency injection idea is one of the amazing things about AngularJS. According the documentation on the module’s GitHub page, all I have to do to make use of the responsive design functionality is to simply decide what behvaior I want according the page’s size and orientation


Other useful modules that I have used so far are ‘ngRoute’, ‘ngStorage’ and ‘ngAnimate’.

To recap, I think using AngularJS extends the possibilities of what I can do as a web developer. Recently, I've been diving more into Web Apps and modern web browsers’ capabilities. As part of my practice routine, I've been building my own little project called PhoneSmash, it uses AngularJS for handling the routing and the data-binding and Angular really delivered when it came to code maintainability and performance. I’m going to dive more into AngularJS and its other amazing functionalities like custom directives, services and factories as there’s so much more to learn about this spectacular framework.