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

My very first backbone app

At work, we thought we would try to integrate a mini backbone app into the main site. We chose to take the out log in status on the header into a backbone app.

So what is Backbone.js?

Backbone.js is a JavaScript frontend framework that provides structure for your application code, the event-based communication for your application, and the necessary interconnectedness for your data, application logic, and user interface. Simply put, Backbone.js allows us to develop applications much easier and better (more scalable, reusable, and modular code).

What stood out to me straight away is the structure of setting up a Backbone app. As I have been writing php for some time, I am familiar with MVC structure and so I was immediately intrigued. There are many different ways you can design and make your own decisions with the architecture for your app in Backbone.js.

Great reads to get started