Angular 2 - Binding (es5)
Binding in Angular 2 works much the same way as binding in Angular 1, but there are some very important differences. John covers the differences and improvements you can look forward to as you start building your own Angular 2 components.
[00:00] Binding works pretty much the way that you're used to, but one thing to be aware of is that you cannot write binding inside of your main index HTML page. Don't even try it. You actually have to start with a component. I'm going to start with this "Clock component," and create it real quick. So "A clock instructor" with a proper component and "View annotations," and then "Bootstrap it."
[00:52] We've our clock template showing up in our HTML because it's replacing this clock element. To move this into a binding, I'll just go ahead and delete it, put the double curly braces that we're used to, and say that "This is a message."
[01:10] Then, we declare the message inside of the clock. We can say "I'm a clock." Now, our template is looking for a message property on our clock which is handled here, and then rendered out here.
[01:31] A couple of things to note if you're familiar with Angular 1 is that there is no dollar scope, we're just applying directly to the clock itself. There's also new controller as defined anywhere. Again, this is just the controller. You don't need to worry about that scope inheritance or anything or the dot that would come before this because this is automatically limited to what's inside of our clock component.
[01:55] Now, the other great thing to point out is something that didn't work before in Angular 1 where you'd try something like a set interval, which would fire off every second, and then we try and change a bound value inside of here.
[02:07] You'd have to use scope applier or something, but if we just set this up properly like you normally would, so I'll say "Clock is this. Clock.time is zero." We'll change this to clock just to be consistent.
[02:25] Then, inside of our set interval, say clock time plus plus, then I can simply render out the time here inside of my template time, hit "Save," and you can see the clock is ticking.
[02:42] This is because we don't have to use scope apply anymore because of a thing called "Zones," which is going to hook into things like set interval or any event that's going to be fired in the browser and you no longer have to worry about scopes, dollar apply, dollar timer services to get around that sort of thing.