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.
What do you mean by "step backwards"? Do you disagree with Angular 2's components with controllers approach? I think it's a big improvement over how you write components in Angular 1.x.
What I meant was, that this two-way data-binding example would be simpler in Angular 1.x. To clarify, I like the "everything is a component" idea. Angular 1.x introduces many new concepts that seem to just boil down to components in Angular 2. I also like the move to DOM properties over HTML attributes and I don't even mind the strange syntax. Mainly because it allows you to convey very specific meaning to angular with very little code. And that is my main gripe about the Angular 2 component syntax, it seams very verbose. Am I wrong on that? My understanding is that Angular 2 is being designed with the es6 class syntax in mind and that is part of the reason it looks clunky in es5, is that the case?
I wouldn't worry about syntax. Syntax can easily be wrapped/refined/etc for ease-of-use to improve the "code writing" experience. Once we start getting closer to release and apis are locked down, I'll talk more about improving syntax. For now, it's more important to focus on concepts.
I really like the way Angular 2 has come together. Is {{}} still a two way binding and {{::name}} one time?
Also that's not webstorm is it John have you moved on?
It is really bizarre that downloading this video downloads a completely different video.
am I the only one who feels this is a step backwards?