For the past couple of weeks I’ve been diving into Angular.js, and have found it to be an extremely useful tool. If you’re not familiar with Angular, its essentially another lightweight framework that conforms, or helps you conform, to a certain standard when writing frontend applications. For this post, I’d like to briefly introduced you to some of the key points that I’ve learned thus far and hopefully give you some insight before you leap into creating your own Angular application.
In Angular there is no set Model, at least from what I can gather with my initial experience. I say this because my experience has primarily been with Backbone where you could define a Model with the base Backbone.Model class. Lets look at a quick example.
The User Model in Backbone
Check out this Pen!
The User Model in Angular
Check out this Pen!
As you can see theres a clear difference in how models are used in each type of MVC framework. While in Backbone we explicitly define a particular model, in Angular that model is simply exposed through the $scope and its information rendered in the markup as quickly as you’d like it. Both frameworks implement models differently and because of that each technique has its pros and cons.
To better explain how Angular models are used, here is a quote directly from their documentation:
In Angular, a model is any data that is reachable as a property of an angular Scope object. The name of the property is the model identifier and the value is any JavaScript object (including arrays and primitives).
Although this is pretty simple, coming from a more traditional background in MVC using Ruby on Rails and Backbone, it was extremely difficult to understand this concept in Angular. In these paradigms we try and clearly define the domain (model) and establish properties, methods and relationships. Angular doesn’t stop you from doing this, but instead liberates you to get started immediately with creating data-binded objects to the UI through the $scope property.
I hope this has been a useful tidbit of information for those of you trying to hit the ground running with Angular and coming from a similar background. For brevity I’ve kept this post short but look forward to having an open and constructive conversation in the comments. In the next post, I will be discussing how views play a part in each framework and discuss the very different approaches each implement.