AngularJS for jQuery Developers

Or… AngularJS for people with less than 80398091709870 transactions per second

A friend of mine mentioned that he was working on his application using AngularJS. AngularJS is Javascript framework created by Google. It sounded very interesting to me so I checked it out.

AngularJS for jQuery Developers

If you are like me, most of your coding has been in jQuery. Now am I a jQuery developer? Not professionally no, but I do use the framework to make my life easier. I own several websites. WordPress is my CMS of choice. I write plugins and small apps. I’m curious about writing more complex web applications. AngularJs intrigued me.

AngularJS is great – it’s the rest of the baggage that’s heart breaking. In a nutshell, Angular is a very clever active template technology that tightly binds a JavaScript data object to an HTML document. The Data object is the model. The document is the view. Model-View. And yup, you guessed it, there is also a controller. MVC.

How is Angular different from jQuery?

For me, jQuery is great for manipulation. jQuery makes it trivial for you to navigate and manipulate the DOM, or Document Object Model. jQuery has very poweful selectors which help you locate, and then modify elements on your web page. jQuery’s write less and do more philosophy probably resonates with you as well.

AngularJS, however is a different beast. It uses what are called directives. Directives are fundamentally different than selectors and manipulators. Basically, AngularJS binds data to an element in the DOM. With binding, changes in the data automagically produce changes in the DOM.

Why is data binding special?

Because it means your JavaScript code – the code you write – does not actually need to know anything about the structure of the document displayed to the user.

Let me Give you an Example

Let’s say, I wanted to capture the data entered into a text input field, and as the user types I want that text to update in the page heading. Yes, this is the classic web version of hello world.
Menubar_and_the_jQuery_Way_and_Angular_vs_jQuery_md_and_AngularJS_—_Superheroic_JavaScript_MVW_Framework

The jQuery Way

Now, you my choose to do this your own way, is how I’ve seen it done.

So if you look at our file we have two elements, an h1 header and a text input. The scripts are loaded after the document is loaded and parsed. Our Javascript is saved in a separate file.

The jQuery code that makes it work is:

Now.. What is the code doing?
First, we have our snippet to tell the JavaScript to wait until the document is ready…

Then, we use jQuery selectors to find the input and attach a keyup handler. When the user releases a key, we will take the results from the input and copy them over to the span.

Finally, as a bit of book keeping we initialize the Span to say something. This is probably unecessary but it is what it is.

Not overly complex, but… you can tell right away that our Javascript MUST know something about our document to make this work. Also note that I don’t even have a variable here that stores the value. It’s saved in the input field right?

Angular Way

With Angular, this exact same functionality is done using directives. In fact the demo renders the same in the browser.

The_Angular_Way-2

Okay, you are probably wondering where the JavaScript file is listed. It isn’t. There is no JavaScript file.

At this point you say, What!?

You probably noticed that the HTML file had a few extra attributes. If you are like me someone told you ages ago not to add extra attributes to HTML files because that’s BAD. You might get in trouble.

However, some clever fellow at Google decided to break the rules (good for him). These extra attributes are called directives, and they represent a completely new way of manipulating a web page. In fact, you don’t think of it as a web page at all. Here’s how you think of it.

With Angular, there is a model, in this case our simple variable named… well name. And we bind that model to the DOM. When the model changes, Angular updates the DOM automagically.

How cool is that?
But how did it do it? That’s what the Angular engine does. It uses the browser itself to parse the dom and when it comes across custom attributes it does it’s magic. In essence it extends the HTML language. Very slick indeed.

The key AngularJS directives used in this example are:

  • ng-app tells us that it is an angular application.
  • ng-init is a bit of a hack, it lets me initialize the model, there are better ways to do this (if you had not guessed).
  • ng-model binds our model to the input field.
  • {{ name }} This little bit of sweetness is an expression. Angular replaces double curly braces with the values of the expressions contained in them. This is very similar to the handlebarsjs Javascript Template language.

Angular does all the magic of keeping the document in sync with the data. This is what it means to declare instead of manipulate. We use these extra attributes inside the tags to declare how we want them to behave. Then we let the framework do all the nitty gritty work of making that happen.

It’s Extremely Cool

No doubt about it…

But…

But… Google does not write apps for 1 or 2 people. Or 100 or 200. or 1,000 or 2,000. They write applications for everyone. That’s right. The whole planet. One million people a minute search google looking for something. When google builds something they expect 7,000,000,000 people to use it. Probably all at the same time.

So?

So, Google wants their applications to be robust. They want to make applications, real bonafide, performance tuned applications. If you came into this like I did, looking for a nifty way to make adding some functionality to your web site easier you are in for a nasty shock….
Suddenly your nice simple development environment starts to look like a franken-monster. It reminds me of the line from Wreck-It Ralph when Sergeant Calhoun said, “Doomsday and Armageddon just had a baby and it is ugly!”

Please don’t misunderstand. I love open-source, but angularJS is more than a framework, it is a way of life and a school of thought all rolled into one. Still don’t know what I’m talking about? Then read on to Part 2 where we talk about… shudder… test.

Leave a Reply

Your email address will not be published. Required fields are marked *