Application Wiring: JQuery vs AngularJS

John Lindquist: To compare how you would wire things up in jQuery versus the way you do it in Angular, let's take this example of a jQuery button and some content. When I click on this button, it's going to hide this content. In jQuery, we basically say, "Find the button on ID," and on click, let's find the content and then we will toggle it.

Then we're basically done with our jQuery stuff. I'm going to click this. It's going to toggle the content. Show, hide, show, hide.

Let's see how we can do this in Angular, as well, to compare the results. I'm just going to give it a little break there for some visual separation and then we'll set up an app. This is the first major difference. We need an application. We can't just immediately wire things up like jQuery does and we'll compare it. We'll also set up a controller which will give us some data that we can share.

Then we'll set up our button which will say, "Angular Click." This will click app toggle.

Our content can simply be Angular content. We will hide this when app. Is hidden is set to true. Let's set this up in the JavaScript. We'll need our module and we'll compare. Compares the name and we'll need our controller with app controller.

Now from here, we're going to say app toggle is a function. That's what's going to be triggered on click. App is hidden, defaults to false. When you toggle, we'll say app is hidden is equal to the opposite of what it currently is set to.

This should work, as well. Once I refresh here, I'm going to click on this. It's going to hide and show, hide and show. Basically, in the end, we've accomplished the same thing. It's just that the major differences here are we do need an app in Angular to be able to set things up but we don't need an immediately invoking function or the on load event to be able to wire things up. Angular will handle all of that for us.

Also, the huge difference here is that we are looking up IDs. We're looking up however you want to use the selectors in jQuery to wire things together. We look up something. We wire up a click. We look up something else. We wire up a toggle.

In the Angular world, you're actually just providing data. We're not even showing that there's a button. We're not showing that there's any content. We're just providing an API through the toggle and we're providing some data through is hidden.

What that means in the end is that I can actually duplicate this a few times and if I refresh, I can hide and show all of those. You could do the inverse so that I had...let's see, div inverse. I could say ng show and app is hidden so that when I refresh here, it will show the inverse. The only thing that is supposed to be shown is what's showing. This flips it.

You can also provide this data to other directives and other things throughout your app that need to be shown or hidden or anything else that could use that true/false flag. At the end of the day, this would be a bit more difficult to do in jQuery because you end up writing more JavaScript. You need to look up more selectors. You need to add more toggles. You need to find more things and wire them up through your JavaScript.

In Angular, you end up declaring more things in your HTML so you're adding more HTML tags. You're adding more attributes, more things to wire into so that you're using the API you provided through the methods and the user events like clicking and key presses and hooking those into your controllers. Then the data that changes or the data that you're watching is hooked into other attributes or directives to manipulate the dom and change the elements that are there.

That's the huge difference, is that Angular has this declarative style where you end up writing more HTML that responds to the way that you've written the data and exposed the API. In jQuery, you end up writing more JavaScript to look up the elements and then manipulate them in your JavaScript. At the end of the day, you do get a bit more flexibility out of Angular because of the way that it presents the data and the methods to the HTML.