First steps with AngularJS

I decided recently to take a course on Udemy in AngularJS, as I have little to no background in web development and so wanted to dip my feet in a little bit and learn some new technologies. The course itself is given by a guy called Dan Wahlin and can be found here.

I completed it in two sittings, so I think $40 is a bit on the expensive side. I actually got it on offer for $10 which I think is probably closer to the actual value. Either way, the content is excellent and explained quite well – not just the how, but more importantly the why. He explains regularly his own preferences for doing things which allows you to benefit from his experience in the real world.

Given I haven’t much background in web development, it’s difficult for me to fully appreciate the problems that this framework solves for you. However, my experience as a software engineer does tell me that the final projects are very neat, well organised with clear separation of concerns between presentation and logic which is always good. It seems to allow for easy testing, which I think I will play with a little bit next.

AngularJS itself is a client side javascript framework that supports the MVVM pattern and is used in the creation of single page applications. The presentation layer (the html) talks to a controller via whats called the $scope. This can be thought of as the view model. It contains whatever data the controller has fetched/calculated/otherwise decided that should be displayed and the html reads from the $scope to display what it wants. I say read, but it actually binds directly to the data, which is one of the really cool features of the framework. You can simply say a text box should bind the the model value “data” and it will be kept forever in sync, available in both the controller and the html. This eliminates the need for lots of ‘if button clicked read value’ style code allowing the developer to concentrate on important stuff. In fact, this is one of the design principles of the framework. From the wiki page:

AngularJS is built around the belief that declarative programming should be used for building user interfaces and connecting software components, while imperative programming is better suited to defining an application’s business logic.[1]

Aside from the controllers, the course also went into Factories and services, which are singletons that the controller can use to do specific tasks. Good designs seem to keep controllers as thin wrappers to these services and factories.

At the end of the course, I decided to implement a simple Flikr search page, to search for images by tags. It’s quite trivial and clearly demonstrates that my next course should be in css but really I was just trying to exercise the different elements covered in the course. It can be seen here and the code here.

Advertisements
Posted in: Web

One thought on “First steps with AngularJS

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