Angular.js and MVC :: Part 1 – Models

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).

Source

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.

Posted in Angular, Backbone, JavaScript, MVC, Uncategorized | Tagged , , , | Leave a comment

Using templates inside a jQuery Plugin

Recently I was tasked with using templates inside of a jQuery plugin I was creating. I had decided to just pass in the id of the template into the initialization of the plugin and having the functionality of templating baked into the plugin. But I came across a very interesting “issue”. Note the quote around the word issue.

Either way, thanks to the jQuery core team for this very helpful write up:

If a string is known to be HTML but may start with arbitrary text that is not an HTML tag, pass it to jQuery.parseHTML()which will return an array of DOM nodes representing the markup. A jQuery collection can be created from this, for example:$($.parseHTML(htmlString)). This would be considered best practice when processing HTML templates for example. Simple uses of literal strings such as $("<p>Testing</p>").appendTo("body") are unaffected by this change.

Bottom line: HTML strings passed to jQuery() that start with something other than a less-than character will be interpreted as a selector. Since the string usually cannot be interpreted as a selector, the most likely result will be an “invalid selector syntax” error thrown by the Sizzle selector engine. Use jQuery.parseHTML() to parse arbitrary HTML.

Source

Here is a simple example demonstrating the proper use of implementing templates into your jQuery plugin(s).

Check out this Pen!

In summary, use the built-in jQuery method parseHTML on your generated templates in order to have the proper DOM object. You may find this useful when you create a memory in object and want to carryover any attached events when appending to the DOM.

Posted in Development, Frontend Development, JavaScript | Leave a comment

New Superman Trailer

I’m extremely excited about the new Superman movie coming out this summer, and WB has just released the third trailer which showcases some amazing footage from the movie. Fingers are crossed :)

Posted in Movies, Personal Interests | Leave a comment

Debugging Node.js Applications Meetup Notes

In this new series I hope to share my notes with you on the meetups I attend. I know that many of the presenters will most likely give out their slides publicly, but I thought this would be one more way of displaying that information freely to the community. Either way, let me know what you think and whether this is helpful to you.

These notes are related to today’s Debugging Node.js Applications meetup at the Brightcove Office in Boston, MA. A special thanks to the organizers (Jesse Streb  and Tim Walling) and of course our presenter Daniel Rinheart.

View Notes

Update (04/18/2013) – Slides Available here.

Update (04/18/2013 @ 10:51AM EST) – Recorded session is on YouTube as well.

Posted in Development, Meetups, Node.js | Leave a comment

Learning Frontend Development

Learning a new technology can be difficult, especially if you don’t know where to look or who to connect with. This can be very difficult when you’re starting out and haven’t established a community where you are located or have moved to a new community. I know I’ve found it extremely difficult in my own experiences, and so in this post I go over the way I usually learn technology, and specifically frontend development.

Continue reading

Posted in Development, Frontend Development, JavaScript, Professionalism | Leave a comment