Learning Angular, part one

While learning web app development, there is something that has bothered me - it seems hard to structure HTML and Javascript code in a good way. Much of my experiment code is quite entangled and messy, and with much global variables. This is partly just because I've sometimes rushed out experimental things without caring about design quality or maintainability, but partly also because I simply haven't had much good ideas of how a web app can be structured in a good way.

AngularJS is a client-side HTML/Javascript framework that aims to solve some of this.

With Angular you typically write your app following the MVC (Model View Controller) design pattern, with the benefits that comes from using MVC. Your View code is all in the HTML markup, and the business logic (i.e. Javascript functions and variables) can be kept separate from it. This means good separation of concerns.

Also, Angular provides two-way data bindings, i.e. when the user changes something in the View, the corresponding data inside the Model is automatically updated, and vice versa. Angular can update the contents of a web page dynamically.

So what you do when you create an app using Angular is that you think of your app in terms of Views, Controllers and Models, then you write those components (using Angular's declarative syntax) and you wire these parts together (using Angular concepts like directives). Angular will take care of keeping data in sync and updating the Views.

A lot of functionality is abstracted away by Angular and so you don't need much code to do dynamic web-page apps.

The tricky thing with Angular is that it is quite hard to learn and wrap your head around. At least this is what I've felt so far. Documentation on the official homepage is quite sparse, and there are not many good introductions and tutorials around. Perhaps this is because the framework is still quite new.

There is at least one good tutorial around though: searching for bits and pieces of information to get to understand the framework, I stumbled upon this great YouTube video by Dan Wahlin: AngularJS Fundamentals In 60-ish Minutes. This is the best resource I've found teaching the fundamentals of Angular and showing how to do an app using it.

After watching Dan's video I tried to think of a simple app I could try to make using Angular. I decided to make an app called Fridge, where I can see on a web-page which things I have in my fridge, so that when I'm leaving work in the evening I know what items I need to buy to cook dinner. The fridge contents will be stored in a database on my server, and from the web-page it should be possible to add and remove items, so that when I go shopping I add those items to the database, and when I take out stuff from the fridge I remove them from the database. All of this using the web-page. (So, hooking up a web-cam in my fridge to automatically keep track of what it contains is something I leave for the future...)

I thought this app is a good way to experiment with a server-side database and learning some more about how to do simple CRUD style web-services. So besides from utilizing Angular, this small project included use of MongoDB and its Node.js client library, for handling the database on the server, as well as websockets (via SocketIO) for sending CRUD-style messages between the client and the server whenever the client wants to read or modify the database. A benefit of using websockets is that if there are multiple clients connected to the server, the clients can be updated in realtime whenever the database is updated. So that when my girlfriend puts something in the fridge, I can see it directly. Nice!

My next blog post will show how I made the app.