Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Angular Building Blocks 2" Lesson is part of the full, Build Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Lukas continues explaining the various building blocks inside the Angular 2 framework. He talks about Data Bindings, Services, Directives and Dependency injection.

Get Unlimited Access Now

Transcript from the "Angular Building Blocks 2" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Lukas Ruebbelke: Data binding. So, this is quite interesting as they've introduced all kinds of new and interesting syntax into our templates. And I think I have a picture here. Yes. So, we still have our classic double curly braces string interpolation. But now, we have really, two main bindings. You have property bindings and event bindings.

[00:00:31] So now, you can bind to properties from your component within your template, and it's a square bracket. If you want to listen for an event on your template, and then convey that back to your component, it's parenthesis. Or if you want to, do them both. So there was kind of this concession of how in the world do we work with forms, we need two-way data binding.

[00:00:52] It only makes sense that when I type in the text field, that I automatically get this information. I mean that was the real money demo. When Angular 1 first came out it was, look, I can type in this text field and it automatically updates over here. How are we gonna have that demo still?

[00:01:08] So, they said, well, let’s take this one-way binding and this one-way binding, and we’re going to put them together, and now we have two-way data binding. So, I guess two one-way streets put together is a two -way street. And so, we have this hotdog in a box kind of syntax here, of the box, the hot dog, and it's simply saying, when this property changes, then it will fire off an event and it will show up in your controller and vice versa.

[00:01:37] And so, you can see here, I don't know where my mouse is. But you can see here, this ng model message. That, that's what that looks like. So, pretty simple. Yes, we have a question in the back.
>> Speaker 2: The first value, is that just a one-time expression?
>> Lukas Ruebbelke: What's that?

[00:01:53]
>> Speaker 2: Is that just an expression? The, cuz you have a property by the template on the top level, value, is that just any expression of a value and once its rendered and that's it? And there's no [INAUDIBLE] component template?
>> Lukas Ruebbelke: So, I believe this actually will change in the component.

[00:02:13] So, this is almost the equivalent of property, and there's some reasons why you would use string turbulation over property binding. But they, when it updates in the component, it will update as well. So it's still, I mean, so string turbulation is always been one-way. But it's not a one-time deal.

[00:02:34] So, it's not a bind once, rather.
>> Lukas Ruebbelke: And so, we're back on familiar ground, a service is just a class that we make available to our injector with the injectable metadata. I think we are almost in the home stretch. My voice is getting tired. So, a component is just a directive with added template features.

[00:03:06] But we also have built-in directives that come with Angular 2, NG4, NGF, NG-switch, a few off top of my head. But again, there's just a handful because now that we're using events and property binding, it's much simpler. So, in this case, we have a directive, and we are just saying, hey take this thing and apply it to the FEM blinker selector.

[00:03:40]
>> Lukas Ruebbelke: Dependency injection. Yes?
>> Speaker 3: Is it safe to assume that a directive is basically a behavior modification of a component?
>> Lukas Ruebbelke: Yes.
>> Speaker 3: Okay.
>> Lukas Ruebbelke: So, in Angular 1, there was really kind of two styles of components or directives rather, that is pretty obvious now in Angular 2.

[00:04:04] Is you had a component directive, that was kind of the self-encapsulated thing that you would pass around. And so UI bootstrap is a really good example of that, of like, I need this date-picker, and so, you would basically go and say like, date or UI dot date dot pick or whatever and had all of that behavior and capsulate it within that directive.

[00:04:28] And so, up until Angular 2 is I always referred to those kind of directives just simply as components. It was self-encapsulated, and then you had what I would refer to as decorator directives that I have this thing that already exists. I need to augment its behavior. And so, then, I would go in and do, essentially, I would decorate it with a directive.

[00:04:51] So, that concept still applies and it's pretty easy. And Angular 2 is that you have a component which is the self-contained, encapsulated unit of functionality, whereas a directive essentially augments any component's behavior with new capabilities. So for instance, a drag-and-drop would be a good example of that, a blank, if you wanted to blank a component.

[00:05:16] If I had a directive that I wanted to turn the mic over to Scott, I think he has commentary.
>> Scott: Yeah. Just to answer that. So, the analogy for the one-to-one ratio of how is it now in Angular 2 versus Angular 1. In Angular 1, we made a directive and used the restrict property.

[00:05:34] You had the E which was for element directive, think of that as the component to Angular 2, and then you might have placed an A for an attribute directive, that's a directive for Angular 2, so those are the differences. E is the component, A is the directive, that's really it.

[00:05:53]
>> Lukas Ruebbelke: If you had a mic, you could just drop it right now, and walk out the room.
>> Speaker 5: [INAUDIBLE]
>> Lukas Ruebbelke: And he breaks his toe.
>> [LAUGH]
>> Lukas Ruebbelke: So dependency injection, it works fairly similar to Angular 1, I think, in theory. So, on the surfaces, I need this thing delivered to my component.

[00:06:13] You put it in the constructor of your class and it's available. The difference is that Angular 2 works on the concept of hierarchical dependency injection or hierarchical injectors, so that each component gets its own injector. And so, you can actually declare services at a component level. Whereas in Angular 1, if you injected a service, it was essentially an application singleton.

[00:06:50] That's all you were getting. In Angular 2, that's not the case. So, now, we're saying Angular 1 had sort of a single high-level injector. Now, we're allowing injectors at a component level. The reason being, I believe, is that as Angular starts to kind of gear itself to be a large application platform, that there are used cases where you would want to, on a sub-feature basis, really dial in specific behavior.

[00:07:22] And so, with the kind of component system architecture that exists in Angular 2, you can inject it to a certain component, and it's only available to that component and its children. And so, that's pretty neat that you can actually create even kind of some variations of that on kind of a per componentry basis.

[00:07:42] Now, if you need for this, if you need a service to be available for your entire application, then you do it at the top level when you bootstrap your app, and then it's going to be available top down. So, for instance, when I bootstrap, I would generally put in my router providers, because I want routing, obviously, to be available for every single thing.

[00:08:05] Another thing is if you have, for instance, a large application, you really could be very specific about what gets what, instead of making it available to kind of like everything. So, there's some performance issues there as well. But in this case, you can see in the experiment's component, I am basically injecting the state service and the experiment service into it.

[00:08:32] And I've also marked it as private. This is a typescript thing, that if you violate this, you'll get a compile time error, but at run time, it just gets stripped out. And so, we're talking a little bit more about typescript in the next module, but this is pretty much kind of how it works, is that I want to inject or I want to make experiment service injectable.

[00:08:54] So, you just write your class, injectable metadata, and then, it's now available to the injector, and then from any other component or service or directive, you can then inject that into its constructor. The one thing that I like is if we've been through a few of these slides is, you'll start to notice that again directives, components, even pipes which are essentially Angular 1 filters, services, that they're really just classes.

[00:09:26] And so, now, you kinda have this unified kind of syntax across everything.