Building Awesomer Apps with Angular Challenge 1: Solution
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Challenge 1: Solution" Lesson
>> Lukas Ruebbelke: Let's just walk through this challenge real quick and then we'll hop into the Angular CLI. So I'm just gonna walk through and show some of the major pieces real quick in the sample application, and then I'll just kind of show real quick property, how to do it in a component and a service, and then I will move on.
>> Lukas Ruebbelke: So,
>> Lukas Ruebbelke: In our application, let's start at the top and kind of work down. So remember, if you remember the graphic, it was module, route, component, service. And so let's do it in that order. So, the entry point to pretty much every application is in the index.html.
[00:00:49] So, let me collapse some of this.
>> Lukas Ruebbelke: And in our source folder we have our index.html And you'll notice here that we have app-root. And so this is the component that we're placing on the stage, our top level component. So outside of loading a component in via a route, how you get a component on the page Is by adding it to a template via a selector.
[00:01:25] And so in our index.html, this is how angular is instantiated and begins to live on the page. Now, with that said, there's kind of some Bootstrappy stuff that needs to happen. And this happened in main.ts, also in the source folder. And so what we're doing here is we're using platformBrowserDynamic to boostrap the module.
[00:01:57] And we're saying OK we're gonna spin this up, bootstrap the app module. From here we could say, well, within our ng module we're bootstrapping the app component and you can see here, remember selector, this is how something lives in the page, it's app route. If we go back here you can see this is how we're adding it.
[00:02:27] So main TS is where we're boot strapping our main module and then within our main module this is where we're boot strapping our component. Now if we go into app component what I want to call out is this right here.
>> Lukas Ruebbelke: Is just for the most part an ES6 class.
[00:02:50] So I will use ES6 in TypeScript fairly interchangeably, but for the most part this is an ES6 class. So we have properties that we're binding to. We have a method here that is doing some stuff and so on. So within here let me hop into the templates. So then, this is the metadata up here, component, and then if we go to template url In here, if you remember it was a title property on the component.
[00:03:34] Over here, I am binding to this somewhere, yes, up here. So it's a property. We're just saying, because it's just a string that we wanna render, doubly curly braces. Now, this is the module. So I've kinda went from here for the module, to the top level component. But, if you look here, on line 23, there's a router outlet.
[00:04:03] So when we go to item's widgets in these different things, this is where this component is being inserted. So you'll, on your top level components, generally have a router outlet. You can also have them in child components, so you can have nested routes, I'm glad they finally figured that out.
[00:04:21] And so in the router outlet, what goes in here? So let's move now to routes. If we go to within our app the app routing module, we have some pretty basic path to component mapping. Widgets to widget component. So we have some animation stuff, we'll get into that.
[00:04:46] And then we even have, we're saying path, and we're doing some lazy loading here, and I'll talk that on the third day. But really at the bottom line is that you have a path in the URL that gets mapped to a component. And then from here, it's just more of the same.
[00:05:05] So we have ItemsComponent, properties, methods, and things are happening. So, if I hop back into the browser, I'm on items. If we go to Widgets you'll notice that the, up here the route changed and now it's loading the widgets component. Home, same exact thing. Now it's loading the home route, home component and then from there, if I actually go to the home component, this is kind of interesting.
[00:05:39] That I have four components on the stage. Item search, items list, app newsletter, apps widgets list, and so I can use a component in more than one place. So if we look into the browser, we have these lists here. Well they also exist over here, and so this is the beauty of having well defined components, is that they're reusable.
>> Lukas Ruebbelke: And so to that end let me just put a quick property on here so we can just kind of see how this works. Let's go Message = "Holla at yer boy!" So now this is a property. We can now bind to it.
>> Lukas Ruebbelke: Each one because I'm super obnoxious.
>> Lukas Ruebbelke: Also, you'll notice here, that you can see how as I started to type, it started to give me hints. Try doing this in ES5. It kind of works in ES6 a little bit but TypeScript, this is pretty much having essentially type ahead and code hinting. Again Java C Sharp is like duh we have had this for years.
[00:07:01] It is a java developer, it's super useful. I write code much faster, and I make less mistakes. So being able to communicate intentions is, I think, really, really handy, and it just allows me to go faster. So here you can see a little property on it, I can now bind to it.
>> Lukas Ruebbelke: Any questions about any of the pieces? Do we understand Module, route, component. Let me show you one other thing just real quick. As you'll notice here, I need to get items, and I need to get widgets for my home component to render. So what do I do?
[00:07:45] I just inject them into the constructor, and then I can call methods on them. So, if I go over here, item service, if I step in. Again, it's just a class with some methods on it. And so, module, route, component, service. We kind of see how this fits together.
[00:08:07] What happens, is we have a module that's kind of a very broad container. Routes that defines how we get to specific pieces via components, and then components are just very thin layers that the user can interact with, and then the business logic and the state management, and the different things happen in the services.
[00:08:28] So you're going very broad to very specific with the bulk of your business logic, happening in the service. One of the reasons is because in a service you can often times test these in isolation, because they're just classes. When you spin up a template, or a component with a template you have to satisfy that view and manage it, Angular makes it easier, but having to try to test directives in angular1.x is super hard.
[00:08:59] So now by having just a straight class, especially when you do it with very fine-grain functions, it's really, really easy to test. And the first step, I think, to writing a good test is having good code.