Digging Angular

After diving into backbone last month, I thought it’s time to have a look at AngularJS. What’s the hype with AngularJS? Why is it a popular choice for large scale websites? I often ask people at meet-ups whether their company uses Backbone, Ember and/or Angular and quite a few people usually reply with ‘Angular’. My next question usually would be why they have decided to choose AngularJS and majority of the responses is that AngularJS is backed by Google and that there is a wider support and documentation.

AngularJS is considered a new paradigm for web development. Why? Well, here are some Angular vocabulary and examples to show you just how powerful Angular can be…

Directives

One of the first observations I made when I first started looking into Angular was the statement on the AngularJS website; “AngularJS is what HTML would have been” – that’s a pretty strong and bold statement! AngularJS allows you to ‘extend’ the HTML vocabulary. You can set your own ‘directives‘; custom attributes and elements.

<html ng-app="ngApp">

The ng-app attribute in the html tag above is an example of a directive which is used to auto-boostrap the application. This is commonly forgotten by beginners.

Data Binding

The two way data binding in Angular is extremely powerful and simple – it’s automatic synchronisation! When the model changes, so does the view.

<input type="text" ng-model="firstName" />
hi {{firstName}}!

Filters

AngularJS comes with many handy filters built-in. Filters allow you to manipulate and filter the presentation of your views. You can apply Angular filters directly by extending the bindings in your HTML views

{{ 12 | currency }}

The Code School “AngularJS Tutorial for Beginners” is also a great way to get an insight of what it’s like to code in Angular.

There are still lots to learn in AngularJS – will definitely write more as I dive deeper… stay tuned!

Advertisements

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