A Match Made in Heaven
When I found Angular a couple years ago it really was a match made in heaven. I was using jQuery Mobile and looking for something that would allow for “live” updating on the client side. I played around with libraries like Backbone, Knockout, and Ember, but all of them had a big learning curve and seemed messy. I had become quite akin to the idea of data attributes that came with jQuery Mobile and was looking for a “just add water” implementation of a JavaScript MVC. That is when I found Angular and now Madness Labs uses Angular’s MVVC goodness on EVERY project.
Who Gives a Shit?
Well I for one give a hell of a shit when it comes to my MVC. For those of you who are tired of all the abbreviations, MVC, stands for Model View Controller. In layman’s terms that means the functionality for your app, and it is broken into 3 distinct pieces, as illustrated below (from WikiPedia).
The controller is your code that manipulates the model, the model is your data the drives the view, which is what the user interacts with, and thus the cycle repeats. Now the majority of websites online today make use of some form of MVC, but the big difference in Angular being that all of the heavy lifting is done on the clients machine and sometimes without writing a single line of JS! Again who gives a shit right? WRONG! This drastically reduces the load on your servers and in the same foul swoop makes the user interface instantly reactive to changes. This isn’t to say that you don’t need to send some things to the server, but it can mean just that, as seen in our Madness Pass App on Github.
Alright, you Convinced me…Now What?
Rather than try to give you a long winded explanation of how to get Angular setup and make your first app, I think it would be better to point you to a couple resources that really helped our team wrap their minds around this amazing framework. Below are a list of resources, Madness Approved:
- https://www.codeschool.com/courses/shaping-up-with-angular-js
- https://www.youtube.com/user/angularjs
- https://www.angularjs.org
The first link is to Code School and we highly recommend checking this tutorial series out. This wasn’t around when we first adopted Angular, but even so it was a great watch to see some best practices as stuff we do every day here at ML. The second link is for Angular’s YouTube channel and they have some great video material to get you going, plus a more in depth view of certain features. The last, and certainly not least, is the link to their official site where you can download the latest build, see some examples, and get into the nitty-gritty with the docs.
What That’s It?!?
Yup, this is just a quick intro to what is quite the deep rabbit hole. We may touch on Angular topics as part of Madness U in the near future, but for now we hope this will get you excited enough to check it out and get your hands dirty with some code. As we said we use Angular on EVERY PROJECT here at Madness Labs, so if you want to code with the best of us then I recommend you arm yourself with some grade A+ frameworks like Angular.