7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Data Binding

Let’s build our first Angular app, and learn about the ‘M’ and ‘V’ of the MVC system in Angular: binding Models to Views via Angular’s templating system.

2.2 Data Binding

In the last video, we took a look at this example from the AngularJS homepage at AngularJS.org. Now we're gonna mess around with this really simple example to find out how it works basically by breaking it. I'm gonna grab the source code from this page and paste it into my little app here, that will show us a live updating demo of what it is we're writing over here. I'll save this as angular-example. So if I enter my name, and let's say I'm called Tom, because I am called Tom, then you can see that we have this updating right here. I'm also gonna just space this out a little bit to make it easier for us to see exactly what it is that's going on. So you'll remember we have this script tag up here that brings Angular into the page, and that's coming from Google's hosted CDN, googleapis.com. And you remember the ng-app attribute that tells Angular to instantiate itself on the page. Just to prove that without this Angular won't run, I will remove it. And you can see straight away that we're seeing our templating appear on the page. Angular looks through your DOM for these curly braces and will pull them out and swap in the value of the particular model that you specify inside the curly braces. So when we remove Angular from the page, that won't work. So let's add angular back to the page. I'll just add that ng-app attribute to the HTML tag and you can see straight away that that disappears, and we can once again type in our name or the word world, or whatever, and it updates. We're using the ng-model attribute, and that tells Angular that we want to use the value of the text box as a model within our application. You can think of a model as just a piece of data within the application. It's really that simple. A model is just a piece of data that you can use somewhere on your page that you can interact with, that you can update. And a model can be an array, it can be a string, it can be a number, it can be an object. It can be a whole range of different things. So let's add a new model to this page. I'm going to change the message that we put before the name, so here I will add a couple of curly braces, and this tells Angular that we want to insert the value of a particular model in here. So you can see that now there's nothing here, but we're also not seeing the curly braces because Angular is removing them. Then in here I'm going to add your-Message. Again, you'll see nothing's appeared over here, but that's because we haven't given your-Message a value. To give your-Message a value, we need to create another source for the model. So let's just copy this straight out and edit just before the existing label and text box that we've got. Here I'll change this to be Message, and update this value to be your-Message, that I'll copy from down here, and then update the placeholder. So now we can enter a message, in this case, Hi there, and then I'll add a name. And you can see now we have full control over what's going on in both sides of the h1. I can update things around the two models. So if I then add another message, Hi and World, then you can see that we have changed this so that's not an exclamation mark. And really anything that you change around these models, Angular's perfectly happy with. So I can make this an h3, and obviously this is disappearing because this is completely refreshing the page every time we make a change over here. But if I add a message again, you can see that it's now using the default browser style sheet for the h3, so it's a little bit smaller. That's really the most simple example of data binding that we can do in Angular. In the next video we'll take a look at another component in an MVC architecture, the controller.

Back to the top