My introduction to angular.js

Angular JS

For me, the process of making websites has changed a lot in the 15 years I’ve been in the business. HTML, CSS and JQuery are still the preferred languages of UX Designers and Frontend Developers like myself. Why? Simply because these are the languages that the web browser renders, this is the output you see in your viewport. How that output gets there and the rich level of interaction that website apps now present to the user is where we’ve seen the biggest changes and developments. I worked in an e-commerce company for 4 years prior to returning back to freelance work, there we used asp.net repeaters to retrieve data from our databases and present them as html pages, we injected data into those databases using C#. I kept hearing about this other structural framework called Angular.js so I thought i’d take a brief look to see what all the fuss is about.

Angular is more than a Java Script library

Anyone who has worked in the Frontend of websites and apps will have used plenty of JQuery. It’s our ‘go to’ library of Java Script that saves us heaps of time and allows us to add a nice level of user interaction to our pages, so to see the extention .js on the end of “Angular” is a reassuring and familiar sight. The we open it up for the first time and discover it’s a whole lot more. As the angular.io state;

“Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop”

Angular empowers a Frontend Developer

In simple terms Angular brings complicated backend functionality (usually reserved for people who understand and write code such as C#) into the frontend. At a first glimpse it’s not too dissimilar to something like asp.net

asp repeater
A typical asp.net repeater used on an e-commerce website

In a simple “Hello World” index document we can see our first glimpse of how Angular (much like asp.net) allows us to present data from a source and render it on the page as html output. Of course the app/controller could contain any kind of javascript functions, iterations or objects.

Angular Code
Angular source code that is injected into our html page
The HTML markup (note the attributes and reference the angular source {{message}} )
The rendered browser html output
The rendered browser html output

Two Way Bindings

So we’ve seen how Angular can retrieve some data and present it on a page much like asp.net. Now lets look at a simple two way binding that demonstrates how Angular can also add a rich later of interaction that can open the possibility of injecting data back into a database from it’s application.

Presenting some different input fields using scopes in Angular
Angular reading and presenting the user input interaction.

Amazing right! All of this without a line of C# being written. I’ll look forward to taking this much further in my next blog post.

A very small draw back

angular js is built upon node.js. It can easily be set up for local development by installing node on your machine and running as a local server. If like me you;re used to developing WordPress sites for small businesses you’ll find they often use cheap, shared web hosting. I’m yet to find a shared hosting provider who will allow you to install node.js on their server. So keep in mind angular.js is more likely to be reserved for your larger clients.

Check back soon for more of my experiments with angular.js.