Building Awesome Web Apps with Angular 2 Review of Angular 2

Transcript from the "Review of Angular 2" Lesson

[00:00:00]
>> Lukas Ruebbelke: It's review time. Angular big picture, Angular 2 big picture. So in the context of the big picture, what is the purpose of NgModule?
>> Lukas Ruebbelke: Don't be afraid.
>> Lukas Ruebbelke: So your mouth is half moving there like you wanna say something.
>> Speaker 2: Yeah, so in this current project, NgModule is where we tie it all together in Bootstrap, the app.

[00:00:35]
>> Lukas Ruebbelke: Yeah.
>> Speaker 2: So it happens to the only module in there, but there could be others.
>> Lukas Ruebbelke: So there is one more for the routing, but you're right.
>> Speaker 2: That's true, yeah.
>> Lukas Ruebbelke: So think of essentially, NgModule as an organization mechanism to organize things to tell Angular how essentially it should be compiled or how it fits together.

[00:00:59]
>> Lukas Ruebbelke: And so just when I think of NgModule, I just think of it is as just a container where Angular things go into, so that Angular knows where everything is, yes?
>> Speaker 3: Comment in from the chat. Christie is saying organization.
>> Lukas Ruebbelke: Yes.
>> Speaker 3: And Javier group features that are meaningful to our business.

[00:01:17]
>> Lukas Ruebbelke: Perfect, so that's great. Essentially it allows you to organize or group features that are meaningful to the business. And so for instance, if you have something that may need to be peeled off into a different application or etc. Well, you can break those into modules or NgModules as you see fit.

[00:01:39]
>> Lukas Ruebbelke: So what do we use routes for?
>> Speaker 2: Routing.
>> Lukas Ruebbelke: Routing.
>> Speaker 2: [LAUGH]
>> Lukas Ruebbelke: And what does that entail, my friend?
>> Speaker 2: Your URL or different state change.
>> Lukas Ruebbelke: There we go, so state change, keep going. So when we go to a specific URL, so think of a URL that's really just a serialize representation of the state of the application.

[00:02:11] So for instance, if we have a route that's forward slash items, we're telling Angular based on this URL, we want to be in an items state.
>> Lukas Ruebbelke: Right, so Russ has it. So mapping state to component. Interestingly enough, IC routes is being yet another organizational mechanism. It allows you to organize your application into discrete levels of state that you can then represent and navigate directly to.

[00:02:48] And Angular is responsible for the state. I'm going to map it to this representation of components on the screen. So for instance, a really simple example that we have is that when we go to the item state. We're mapping that state or that URL to take the item's component and load it into our router outlet.

[00:03:10] But when we go to the widget's URL, then it's saying take the widget's state essentially and take the widget's component and put it into the router outlet. So think of it as just really a dynamic mechanism for organizing your application into levels of state. And so when you start to think of your application as a machine or you have these kind of levels of state or state application can be in.

[00:03:38] Routing is just a really convenient mechanism for moving between those items or those levels of state.
>> Lukas Ruebbelke: Okay, what role does components play?
>> Lukas Ruebbelke: I think you have an answer.
>> Speaker 4: Another organization mechanism?
>> Lukas Ruebbelke: Yes, another organization mechanism. [LAUGH] So that's absolutely right, let's expand on that.
>> Lukas Ruebbelke: What do you think, let's ask your colleague here.

[00:04:15]
>> Speaker 5: I mean it's kind of the view of your app and the code that runs when you interact with the app.
>> Lukas Ruebbelke: So you say view and code, you're absolutely right, it's two parts. And then together, they come together, so we'll talk about this a little bit more.

[00:04:38] But that forms essentially a building block for your applications. So at the end of the day, it is an organizational mechanism but it's really the core atomic building block. Among really module state and all the routes and everything at the bottom of it is components. And then what we'll find out is that you can have a component with components, components, components.

[00:05:02] But even though it's components all the way down, it's still just components. So at the core, at the fundamental, the essence of everything are components. Any questions? Make sense? Pretty simple. We have an atom, we have a component. Everything is built on top of that. So what are services for?

[00:05:26] Yes, they're an organizational mechanism. [LAUGH]
>> Speaker 2: Encapsulating business logic.
>> Lukas Ruebbelke: Yes, thank you. So the idea is that you want your components to be as thin as possible, essentially to consume just enough data to satisfy the view that the component owns. And just enough logic to essentially capture user events and convey it to a service.

[00:05:57] The reason being is that if you have business logic in a component, that logic is now coupled to that component and you can no longer reuse it. So in Angular 1, a really common scenario is I've got this stuff in my controller. What happens if another controller needs to use it?

[00:06:17] Well, the answer is you basically extract it out into a service, so that two controllers can consume that data. Same thing with services in Angular 2 is, what happens if you have two components that need to share data? Well, it goes into the service. Not only that, it's when you have business logic and it's in a service, it's much easier to test.

[00:06:41] The reason being is because with a component, that Angular 2 has actually done some pretty good job or a pretty good job streamline testing in Angular 2. But it's really easy to test in ES6 class without any Angular dependencies. And so that was one of the problems with Angular1 is all I wanna test is directive, how do I do that?

[00:07:04] Well, I've actually got to simulate DOM when I write my unit test. You would actually write a quasi isimal fragment, you basically speed it up, initialize it and then you would try to test it really, really hard. But by extracting things out into purely in a perative context i.e, in the ES6 class.

[00:07:22] It makes it much easier to test and move around. Makes sense? Good.
>> Speaker 3: There's some confusion about component in the chat.
>> Lukas Ruebbelke: Yeah, so I think Hans and David, they're absolutely right. So one is the basic building block but Angular is a component tree. So you'll have your top root component and then everything is essentially built off of that.

[00:07:55] So, looking at this code here, we've talked about NgModule But what mechanism is in play in these three lines of code?
>> Lukas Ruebbelke: I'll give you a hint, organizational mechanism.
>> Speaker 6: Creating a new component?.
>> Lukas Ruebbelke: So yes. I mean we are creating a component but more so. On the first two lines, what are we doing?.

[00:08:38]
>> Speaker 6: Pulling in resources that are required.
>> Lukas Ruebbelke: Yep, so essentially, pulling in other modules. And then, at the last line, we're exporting our class. And so this is modules at a framework level, or rather, a language level<< And so you'll see this a lot. And up until RC5 this is actually what we used to construct our applications.

[00:09:07] We'd import things and wire it up into metadata. Module has simplified that but we still use ES6 modules as a fundamental make it four or an application so just other one of the biggest difference is from somebody from for instance ES5 into ES6 slash type script is wrapping their mind around really importing and exporting functionality.

[00:09:35] But this super nice because now Just like we have dependency injection, in a sense, you are supplying a dependency for your code to use, so we know for a fact that this item's component needs this functionality, as well as the component, so we simply provide it. And we very specifically and explicitly can state its requirements at the top of the file and just pull those in.

[00:10:06] Whereas with ES5, well, how did that work? Well, if you go to the index.html page, and you look into the bottom of the page, a lot of times you would have 20, 30, 40, 50 script files. And I think even let's just go back to the browser here.

[00:10:33] This is one of the downsides of using S5 is you have to declare everything in kind of one place and then its implied that it's available. The problem is that if anybody ever gotten these out of order like things will break. With modules that is elevated and so That alone simply is one.

[00:11:02] Organize your application but then satisfy dependencies is really, really powerful. Let's just walk through these real quick and talk about what is the purposes of These properties. So bootstrap let's start with an easy one. What does the bootstrap property do?
>> Speaker 7: App loads. So gonna launch app component.

[00:11:38]
>> Lukas Ruebbelke: So what your telling it is we're going to when we bootstrap we're saying we want to first bootstrap to the module but then when the module loads the entry point is component. And so that becomes our top level component. As a result of this if you go to your index dot HTML you will see the app component selector in the HTML so that it actually has Kind of an anchor or entry point into the template.

[00:12:05] Okay, providers?
>> Speaker 8: Services.
>> Lukas Ruebbelke: Yes, so this is where we define our services for our application. And so by putting them into the providers array, Angular now knows that they're there, and they can supply them to as you know for dependency injection. Now Imports. Yes so now we're importing additional modules that we need So for instance, the browser module, so that essentially encapsulates the browser functionality as well as kind of Angular core.

[00:12:48] But the Angular team has broken out Angular 2, and two kind of smaller modules, so that you can define them as necessary. So you might actually have an application That doesn't use any hdp calls. It may not be that kind of application, so therefore you don't need to import it.

[00:13:11] You don't need to incur the overhead or it. Or, you may have an application that just doesn't have any form, that's purely for display purposes. Yes?
>> Speaker 4: Can you just repeat again the [INAUDIBLE] the declaration<< The providers, these providers with the service, and the declaration was with what again?

[00:13:28]
>> Lukas Ruebbelke: Well, you just got to my last and final question for this slide. What are declarations for?
>> Speaker 9: Components.
>> Lukas Ruebbelke: Components. And, essentially, anything that has a view class or that will live in the dom. So, aka, components. So this is where your components go. So components for declarations.

[00:13:57] Imports, you import your dependencies. Providers is for services. And then bootstrap is for your component that you want to bootstrap when that module is loaded or bootstrapped.
>> Lukas Ruebbelke: Yup, so we're getting a lot of good answers in the chats.
>> Speaker 3: A question?
>> Lukas Ruebbelke: Yes?
>> Speaker 3: I notice that the bootstrap is an array.

[00:14:25] Which implies you can have more than one entry point?
>> Lukas Ruebbelke: I believe that's so, but I've never done it. So that may be the case, if somebody would like to try that out. I think you can,
>> Lukas Ruebbelke: I wonder if you could. So, we'll maybe try that over lunch.

[00:14:47]
>> Speaker 3: Try that over lunch.
>> Lukas Ruebbelke: That's a good question.
>> Speaker 3: Yeah. Shouldn't be hard to give it a go.
>> Lukas Ruebbelke: I think you possibly, so at one point, you simply had a single top level, but they may have changed that with NG module, to where you could actually have two components and bootstrap them both in parallel.

[00:15:05] Okay so what is the entry point to our application here?
>> Lukas Ruebbelke: So we just went through the app module
>> Lukas Ruebbelke: Now what's happening here
>> Lukas Ruebbelke: specifically at the last line?
>> Lukas Ruebbelke: We were bootstrapping? What are we bootstrapping? The app module.
>> Speaker 10: The app module.
>> Lukas Ruebbelke: Which then loads app component.

[00:15:47] And one of the reasons why we have platform browsers Dynamic is because, web bootstrapping it specifically for a browser context, because you can actually run angular In other, essentially rendering targets. So you can actually, I know that electron is a target that they're working on, but you can actually run Angular on the server side.

[00:16:13] You can bootstrap Angular to use web workers. There's a lot of different ways to spin up an Angular application. And so this is why we have this platformBrowserDynamic, which then we use to call bootstrapModule and bootstrapAppModule. And so this is why we have this war with Angular 1, it was just ngAapp and you're good to go like it's bootstrapped.

[00:16:42] With Angular 2, we have a lot more options about how we want to handle that. So, what is the basic structure of a route?
>> Lukas Ruebbelke: There's kind of two main things I'm looking for. If you have good eyesight, you may be able to see on the slide, but I expect commentary on this.

[00:17:11]
>> Speaker 5: It's an array of objects that has a path and a component.
>> Lukas Ruebbelke: Nailed it. Path and a component. So, what's another property we could possible have on there?
>> Speaker 5: Children.
>> Lukas Ruebbelke: Children.
>> Speaker 8: Children.
>> Speaker 5: Redirect.
>> Lukas Ruebbelke: Redirect too is another good one. So once you understand path and component, you'll use that a lot.

[00:17:31] Redirect to for kind of your base path, if you wanna redirect to a specific route or what does asterisk do.
>> Speaker 6: Catchall.
>> Lukas Ruebbelke: Catchall. So it's a wild card route, wild card route. Now as we learned yesterday that if we hit a wild card, it's just going to take ItemsComponent and put it into the router outlet.

[00:18:00] The problem is and why there may be a good reason to do this, the caveat is you are now in a crazy potential URL that you have now loaded a state or a component that doesn't match the URL. Remember, your URL, think of it as essentially a serialized version of the state of your application, you're now in like crazy state and you're actually showing something that is valid.

[00:18:31]
>> Speaker 3: Quick question, which file did that bootstrap code come from? Where you had said that one line where you get that bootstrap? What file did that come from?
>> Speaker 6: Main.ts.
>> Speaker 3: Main.ts.
>> Lukas Ruebbelke: Main.ts. So let me just, I think I have it here. If we go to, yeah, so main.ts and it's right here in the root.

[00:18:59]
>> Lukas Ruebbelke: There we go. So, we're bootstrapping in main.ts.
>> Lukas Ruebbelke: And notice it's pulling in app module and that's all it needs to basically kick things off and since we're here.
>> Lukas Ruebbelke: Of course, I think there's a ton of index.html's in this project.
>> Lukas Ruebbelke: You notice here that in our index.html, we have essentially our selector for our topple over component.

[00:19:35]
>> Lukas Ruebbelke: And what you can do is, cuz there's a question about we had loading or something, you can put something in here. So this spinner will exist until, essentially the module or the component's loaded. And so especially for the top level component, it's very common to actually put the, really a preloader right in there in the middle.

[00:20:00] So it can run and then that component is loaded, and it will then essentially replace that item with the actual component view. So if somebody was wondering why that is there, it's for UI purposes, because those things are important. I'm looking at you, CSS designer. We love you.

[00:20:21]
>> Speaker 2: Do you know the idea of putting in more or less a simplified version of your page while it's loading from an SEO standpoint?
>> Lukas Ruebbelke: Yes, we know about that.
>> Speaker 2: Okay.
>> Lukas Ruebbelke: So the question is do I know, but I'm gonna rephrase that question slightly is, is there a mechanism or a technique for providing a simplified version of the page for SEO purposes?

[00:20:52] And there's a project called Angular Universal which is officially supported by Angular and what this does is it allows you to actually render, take your first pass of your Angular application and it renders at the service. So instead of essentially loading a blank template and then filling it in as the data comes in, it will actually fill that template in at the server serve, essentially the first pass of the application.

[00:21:20] And then once it loads, Angular will then pick it up and kinda fill in the rest. And so, it's a super awesome project. My friend Jeff Whelpley started it and the reason why he did it was he works at Get Human. He's the CTO and a lot of their, essentially their revenue is based on people finding them on the Internet.

[00:21:41] So, that's a real SEO case. Now I kind of bristle a little bit when SEO comes up, because I find that it's generally find a straw man argument of like JavaScript. Well, what about that SEO thing? And I've found that when I really press somebody for, what are you building?

[00:22:01] What do you need SEO for? And a lot of times, you find, well, I'm building this single page application where the user logs in. Wait a second or you're building really a complex application with various levels of state and you're like why would you want to index that on, why would you even want that indexed?

[00:22:24] Or I mean, I've literally, well, the user logs in and then well, you certainly don't wanna index user specific state. And so there are definitely cases for SEO, but I think throwing SEO just out there is like well, what about JavaScript and SEO and it's like well there are ways to handle that if you really have an SEO problem.

[00:22:46]
>> Speaker 2: More so also or in addition to that, I should say just from a response time.
>> Lukas Ruebbelke: Yes, so that's actually a better example.
>> Speaker 2: That's really kind of what I meant. Yeah, the response time giving them something immediately.
>> Lukas Ruebbelke: Yep.
>> Speaker 2: Since being these apps get pretty large.

[00:23:03] And on a mobile like you had said yesterday, last calls.
>> Lukas Ruebbelke: Yep, I would definitely check out Angular Universal and there's some stuff around, just progressive write applications like web a lot of really interesting things you can do to really get that first render really fast.
>> Lukas Ruebbelke: So, let's make a comment.

[00:23:29] Let your public site handle the SEO and keep it out of the app. So a lot of times, again, using the right tool for the right job is if you have just a lot of content like that's really not a good candidate for an application. Use it, for instance, my blog is in WordPress, because that's the best tool for displaying a lot of content and managing it like it's not Angular.

[00:23:52] And so again, using the right tool for the job and it's totally fine to have just a static single page, a static page. Now for your public site, and then Angular handles all of the application step so really even segmenting that out is a good example but performance on the other hand, that is important.

[00:24:13] And I think Angular Universal is a trick to that. Well one of the tools. Okay? Where were we? So we did the wild card route. All right, so back to you. What are the two main pieces of a component? Yeah I was pointing at you.
>> Speaker 7: The template.

[00:24:42]
>> Lukas Ruebbelke: Yes.
>> Speaker 7: Meta data and class.
>> Lukas Ruebbelke: So, template and class, they are kind of the two big pieces. And then, I'm just jumping through here. So, anyway, I'll talk about meta data in a second, let's kind of back this up here, let's talk about components, one of the classes.

[00:25:07] So what does implements OnInit do here?
>> Speaker 10: You're declaring your component is gonna react to that event and OnInit, you're gonna implement that.
>> Lukas Ruebbelke: Yes, for the most part. Could you expand? Specifically, when we say implements. So OnInit is what?
>> Speaker 10: Is an event in Angular.
>> Lukas Ruebbelke: Kind of but in this case right here, it is an interface.

[00:25:38] So we're simply saying that this class is going to implement whatever is defined within this interface. And so in this case if you go to the OnInit interface then there is an ngOnInit method that by implementing the interface we are now contractually obligated to implement it. So again there's nothing forcing us to do it.

[00:26:09] But TypeScript, it essentially development time and compile time will call you out if you have failed to do so. So, with that said how does ngOnInit work?
>> Speaker 3: Good comments in the chat room right now.
>> Lukas Ruebbelke: Yap so Javier actually had it so you use it to, well

[00:26:45]
>> Lukas Ruebbelke: Not quite actually.
>> Lukas Ruebbelke: So Hans actually had it, so it's really a life cycle specifically it's when the bindings for your component have been satisfied. The reason why we use this is because.
>> Lukas Ruebbelke: We need to perform when we load our component, when we have initialization logic we need a place to put it especially when that logic has a dependency on data that's coming from a parent.

[00:27:19] So the big takeaway here is keep your instructor light weight, you can use it for basic assignment. But a lot of times, you will have it simply for dependency injection to define it. And then you will handle your initialization in ngOnInit. Because you can safely assume that any kind of dependencies, or data dependencies via binding, has been satisfied at that point.

[00:27:55]
>> Lukas Ruebbelke: So.
>> Lukas Ruebbelke: What do we do to inject a dependency into our component?
>> Lukas Ruebbelke: And just rephrase this.
>> Lukas Ruebbelke: Yes?
>> Speaker 3: Question, so then I'm having a hard time finding which file is this one from.
>> Lukas Ruebbelke: So this is purely for discussion purposes. But it is [INAUDIBLE] So this not a specific file but if you went to items component you would see a similar version of this.

[00:28:36] But our items component has a dependency on the items service. How do we get it in there?
>> Speaker 2: The constructor.
>> Lukas Ruebbelke: << Yes.
>> Lukas Ruebbelke: So in our constructor, what does the private keyword do?.
>> [INAUDIBLE]
>> Lukas Ruebbelke: Yes. Very good. So it is constructor assignment. But what it does now.

[00:29:08] Assigns a variable or property on that class that we can then use outside of the constructor. So therefore on ngOnInit, we can then reference this .itemsService. Yes.
>> Speaker 11: If you have private, can you also have public?
>> Lukas Ruebbelke: Yeah.
>> Speaker 11: And then does that make it a member variable of the class and available to whoever uses that component?

[00:29:34]
>> Lukas Ruebbelke: So technically, when things are compiled, so typescript is a super set of VS 6. ES 6 is a superset of VS 5. So at the end of the day, everything is being compiled into ES 5. So it's important to point out, that public and private and the different assets modifiers are strictly at really a kind of development time and compile time in the form of warnings.

[00:30:03] But once it's into ES 5 there's nothing to actually keep it from doing that. So, once it's been compiled to DS-5, there's no concept of public and private. But what you could do is, if you needed to access this, or what you wanted to control this, so by default I set things to private.

[00:30:23] And therefore if I tried to access the item's service outside of this component, for some reason, TypeScript would be like, hey. This thing's private. You can't touch it. But you could do, you know, public. So, for instance, you had, a better use case. You had a service that references, maybe, another service that you want to make available.

[00:30:48] To something else. You can set that to the public. Yes.
>> Speaker 3: I had a question from way early this morning before we began. And it's like 45 minutes ago. [LAUGH] But it's appropriate to right now.
>> Lukas Ruebbelke: Good.
>> Speaker 3: I think. Let's see. Are all functions that I declare in the service public?

[00:31:10] Can I declare some function that takes object, modify it, and return in a service that's not accessable to anything outside of it?
>> Lukas Ruebbelke: So by default everything is public. But then you can basically set it to private if you would like.
>> Lukas Ruebbelke: Let's see here. Make sure. Yeah, so ngOnInit runs after the constructor.

[00:31:38] The constructor will run pretty much right away. But then certain things need to happen, bindings need to be satisfied, tablet needs to be initialized, and then ngOnInit will run. So that's really important that ngOnInit runs after the constructor.
>> Lukas Ruebbelke: Okay, back to you my friend. How do we connect our template and component class?

[00:32:05]
>> Speaker 7: Metadata.
>> Lukas Ruebbelke: Metadata, all right. I'm just throwing you these, we're playing slow pitch softball right here. Hit it over the fence, it's easy.
>> Lukas Ruebbelke: So what are two things a component must have?
>> Speaker 2: Elevator and template URL.
>> Lukas Ruebbelke: Yes, kind of. So selector and a template. So you could, as you do template inline, but it has to have a selector and a template.

[00:32:35]
>> Lukas Ruebbelke: And because of that then, we essentially have our three main pieces. Template, it always comes with a class, and then the metadata then provides a way for us to get it into our Angular application.
>> Lukas Ruebbelke: So I'm coming right back to you. What's another way to define a component template?

[00:32:54] We have template URL, what's another way to do this?
>> Speaker 2: Inline?
>> Lukas Ruebbelke: Inline, yes.
>> Speaker 2: Please don't do that. [LAUGH]
>> Lukas Ruebbelke: So that actually leads to the question of why might we use one instead of the other? Cuz I think there's use cases for both.
>> Speaker 2: Size, simplicity.

[00:33:21]
>> Lukas Ruebbelke: Yes, keeping things small, very specific. So if you're every writing a class, or a constructor, or really a template, and you start to realize my goodness, I'm on line 400. You probably should stop and realize hey, this is the canary in the coal mine, and it just toppled over dead.

[00:33:48] That is generally an indication that something has went wrong and you have not achieved the appropriate level of abstraction for your application.
>> Lukas Ruebbelke: And it's just, on the surface it's really like, that totally makes sense. I've just seen it so many times where somebody's like hey, will you look at my code, and can you help me fix this problem?

[00:34:12] And you look in their constructor or their component class, and it's 1,200 lines of code.
>> Lukas Ruebbelke: And so hopefully, in that situation, I can figure out what they're doing, as in, this line here is wrong. But, did you know, you have an architectural problem that's way worse. And so this is one of the things, I've mentioned clean code.

[00:34:35] But this is one of the things that Robert Martin really hits on, is,you want to keep things small, fine-grained, and very specific. So this is single-responsibility principle. Because when you mix responsibilities together, and you need to then repeat some piece of that responsibility somewhere else, you have no way to reuse it.

[00:35:01] Then you have to figure out how to actually abstract that responsibility or that code out, that functionality into something else. Not only that, is when you have code that's doing more then one thing, well how do you test it? If you have a function doing three things, the only way to test that is, you have to test all three things.

[00:35:25] And you have to test the possible permutations that those three things will do. And so I'll talk about this more in Reactive Angular. But really one, you wanna minimize state, or for complexity, you need to minimize state. But in doing so, you need to think about how to actually minimize the control flow through your application.

[00:35:49] And when you have a function that internally is doing three things, that's one, how do you test the middle thing in isolation? You can't, because now it's couples with everything else. And so even just expanding on this a bit, I think it's really important, and you would see this a lot more in Angular 1, but keeping imperative logic out of your templates.

[00:36:11] And so I would see things like ngIf a and b or c or d equals 123, find out what you mean to me, or something. You just see this logic statement, and it's like, well how do you test that? How do you possibly test that bit of logic?

[00:36:32] Well you can't, because it's coupled into the component. And so what you really want at the end of the day is small pieces of code that really do one thing, with a clear input and output. So that your method has a component contract, that when I call this method, and I put this in, I'm going to get this out, every single time.

[00:36:54] And so this is a high-level architectural discussion, but this is why one, I think using inline templates is a good kind of a canary in a coal mine for, are my components specific enough? Now to flip to the other side, where would this maybe not be appropriate?
>> Lukas Ruebbelke: So one, I'll just throw this out here, is we have somebody, a designer, a UI designer, who their primary function is to build out pixel-perfect HTML in CSS.

[00:37:38]
>> Lukas Ruebbelke: There are a lot of moving parts when it comes to Angular 2 specifically. And it may not be appropriate or compassionate to subject them to an Angular 2 workflow. I just know designers that, they're great on a tablet drawing or doing mock ups, and Photoshop is their jam or really now Sketch.

[00:37:58] And then you're like okay what I need you to do is go install npm and Node. And then we're gonna do this, and then we're gonna run the Angular CLI, and then you need to download WebStorm, and then we need to configure your TypeScript compiler, and you're gonna lose them.

[00:38:16] And so I think by using these external assets, if your workflow is of such, you can decouple that development piece from the main workflow. So that somebody can go, they can do the templates, they can deliver them to you, and you can leave them external. Or even if you so want, you can then chop them up yourself, and make them inline.

[00:38:42] But that, your workflow may not support it. And I think with Angular 1, there was a really good designer story for that. Where you could know just enough HTML to really kind of do some interesting things. Angular 2 is getting there, but I think inline templates, I think that makes it a bit harder.

[00:39:01]
>> Speaker 2: One quick question. I understand the style URLs, where you can have different style sheets. Can you give a real-world case of why you'd do multiple right here?
>> Lukas Ruebbelke: So maybe like a base style sheet? And then a component-specific style sheet.
>> Speaker 2: Wouldn't the base be pulled in a lot earlier?

[00:39:23]
>> Lukas Ruebbelke: Maybe, I mean, so you may wanna pull it in at the, let's say you have a smart component, or a container component. You have specific for that feature. But then for this particular thing, you wanna pull it in very specific. So it just allows you essentially nth degree of granularity and control.

[00:39:54]
>> Lukas Ruebbelke: All right, let's talk about binding. What is the easiest way to bind to a simple text value? If anybody's done Angular 1, I expect that they will have this answer. What's that?
>> Speaker 11: Interpolation.
>> Lukas Ruebbelke: Interpolation, yes. String interpolation. So what's the best binding for sending data to the template?

[00:40:21] So they have a property in our class and we wanna make it available to our template. By the way, Rush, you're exactly right, it's interpolation. So class to template, which one is that? What's that?
>> Speaker 12: Property binding.
>> Lukas Ruebbelke: Property binding, sweet, all right, and from the template back to the class?

[00:40:47]
>> Speaker 12: Event binding
>> Lukas Ruebbelke: Event binding. Man, like one of the most fundamental things, you guys are nailing it. All right, so how do we keep things in sync between both?
>> Speaker 2: [INAUDIBLE] in a box.
>> Lukas Ruebbelke: I heard a banana in a box. [LAUGH] Yes, it is a,
>> Lukas Ruebbelke: Banana in a box, or to a data binding.

[00:41:08] So the question is, what is actually happening here?
>> Lukas Ruebbelke: So again, What do the brackets mean?
>> Speaker 12: Property value.
>> Lukas Ruebbelke: Parentheses?
>> Speaker 12: [INAUDIBLE] data binding.
>> Lukas Ruebbelke: And if one sends from template to class and class to template, and we combine them together, as I've said. Two one way streets side by side is really just a two way street.

[00:41:35] And so this is what we're doing. So to that end, on ngModel, if you took out the parenthesis, it would just be one way. You would set the property but there'd be no way to set it back to the thing and so that's what actually using the parentheses does.

[00:42:01]
>> Speaker 13: So is that really a convenience method? You can do the same thing by having separate property and event bindings?
>> Lukas Ruebbelke: You can. So for instance, you could do input and capture that within that. Say value, whatever you want it to be. Like my value equals event.value. And so you can very much separate those out and have them side by side.

[00:42:27] So it's just a convenience method. With ngModel, basically picking up on text input, I believe. So as you type, it's actually internally capturing that event and then surfacing it. And we'll revisit this concept in component driven architecture when we start talking about inputs and outputs. Because I suspect I haven't done it.

[00:42:49] So you can actually do custom two way data binding. To where we could pick any property, or any attribute, and make it two way. There's a way to do that, and in doing so, I'm pretty certain that I could actually write ngModel from scratch, if I wanted, so just something to think about.

[00:43:12] Okay,
>> Lukas Ruebbelke: I'm bringing this diagram up because we're going to revisit this heavily in the next module. So on your left hand side, so stage left, or I don't even know how that works, never mind. So template to class, what binding goes there?
>> Lukas Ruebbelke: And from class to template?

[00:43:42]
>> Lukas Ruebbelke: Property, yes. Very good, okay. So what is this?
>> Speaker 13: Interpolation.
>> Lukas Ruebbelke: Interpolation. What do we have here?
>> Speaker 13: Property binding.
>> Lukas Ruebbelke: Property binding, yeah a lot. Don't they have a class? What do we have here? This side of the room, you're banned for the next two questions.

[00:44:05] Over here.
>> Speaker 14: Event binding.
>> Lukas Ruebbelke: Event binding. So you're super quiet but I wager you are way ahead of us right now so. Event binding. Yes, he sure can hear it. All right, I'm no longer fooled by that ruse. And what do we have here?
>> Speaker 15: Two way.

[00:44:26]
>> Lukas Ruebbelke: Two way binding, yes.
>> Speaker 3: Martin is asking in the chat room, could you give an example of when you would use a property squares instead of a value, curly braces?
>> Lukas Ruebbelke: So the question is, when would you use a property binding versus interpolation?
>> Speaker 3: He just came back and said you didn't explain it, so sorry.

[00:44:51]
>> Lukas Ruebbelke: Yep, so it's worth mentioning because they do talk about this specifically in the Angular docs is that, there are times when you can use them both but generally for kind of simple string values, like I have an H1 tag and I wanna put something in, I'll just do interpolation.

[00:45:10] But anything that really can update over time or is dynamic or is going to be a property on the element itself, then I use property binding. Alright, so how do components in directive differ? This is for all my one.x homies that are coming to Angular 2 for the first time, that always comes up like, what's the difference between a component and a directive?

[00:45:41]
>> Speaker 2: Doesn't have a template.
>> Lukas Ruebbelke: Yes, I mean, that is at the core.
>> Lukas Ruebbelke: Directives do not have templates. They are only there to modify existing elements. Yep, Russ, you got it. No templates in directives.
>> Lukas Ruebbelke: So this is an interesting question. How is a service like a component?

[00:46:14]
>> Speaker 2: It's a class wrap with metadata.
>> Lukas Ruebbelke: Boom, nailed it. It's like that song, C is for cookie? The C is for class and that's good enough for me, okay? There's a few more things in here. So at a high level, that's absolutely right. Like the shape is almost identical.

[00:46:34] What about the constructor? Dependency injection is just the same, it's exactly the same? Methods and properties, exactly the same? I would say really the main difference between a component, wait a second. How are the different? I'm not going to answer my own question now. There's one kind of specific thing I think that really sets them apart.

[00:47:02] But other than that, other than the metadata, I think they're almost indistinguishable.
>> Lukas Ruebbelke: What do components have happening under the hood that we can hook into?
>> Speaker 2: Events?
>> Lukas Ruebbelke: Events, lifecycle hooks, that's the difference. The reason why we have those is because when a component is added to the DOM, or taken from the DOM and is being initialized there's kind of this sequence of events that needs to happen that we can then tap into.

[00:47:37] Whereas a service, because it never lives in the DOM, the only really event that we need to know about is the constructor. Has the service been instantiated? But after that, its methods and properties. And even to that point, component lifecycle hooks are really just methods that implicitly get called by Angular.

[00:47:58] And it's that simple.
>> Lukas Ruebbelke: So apparently I just accidentally answered a question in, or rather yeah, I actually did answer a question in the chat. So that's the difference really, it's because services do not live in the DOM, they don't really have that component lifecycle that components have.