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 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 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 repeater
A typical 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 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 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.

How to merge wordpress sites


In this blog post I go on to explain how I’ve been faced with the task of merging 4 WordPress sites into a single site for my client Warwick Music Ltd. They had a site for each of the plastic musical instruments they invented, manufacture and retail (the pBone, pTrumpet and pBuzz) along with a site catering for music educators. The challenge has been to maintain their valuable domain / link equity, ensure all the content can still be accessed and present under their existing brand as a single WordPress installation.

I needed to carefully plan my approach. For anyone faced with a similar task my best advise would be to map this out first, but also make sure you have access to some useful SEO tools such as MOZ, alongside the basics obtained from Google Analytics. I split the task into 5 main areas;

  1. Merge of content using the Export and Import feature of WordPress
  2. Enable WordPress to handle multiple domains
  3. Add new access pages and make template code and markup changes
  4. Analyse landing pages and user behavior to facilitate the production of a 301 redirect list
  5. Test and go live