You can build single page applications with JQuery and/or AngularJS. In this lesson, John will look at some of the fundamental differences between the two approaches.
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.
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.
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.