Configuring the front-end. Section 7; configuring templates. In this section of the course, we will configure our Angular app to use the same Bootstrap theme that we have created and used in the Express js application. We will modify all the components that we have already created in the previous section by moving all of the handlebars template code from the Express js app to de-associate the angular components. Then here is a snapshot of what the about page looks like in our Express js application. When all the angular components are properly configured, we should have the same design layout as you've seen here and also in our Express app. Let's go and get started. We're here on the IDE. I'm going to go to the back-end first and just run our application in the back-end. If you remember the Express application, and I want to see what that looks like. When we build our page, it will have the same layout. Let's go to the browser and navigate to, I think 3,000 was the port number. This is the Express app and we're going to design our Angular to look exactly the same as this one here. We have file navigation links up here. As you can see, it's already built. Basically, we're just going to transfer it over and move it into Angular. Let's go back. I can close this tab now, and let's open the other tab for the front-end. Let's go in here and also run the NG serve, run the app. One-way changes. We can also just update our site. While that's running, we can just close this now and go ahead and make those moves. First things first, so in the back-end, we're going to just basically move everything from the views. All these are the views to our source components over here. Let's do the index first. Now this index here, as you can see, it was very basic, so we're going to go to the views up here. In the layouts, yeah the layout is the one that we want. You can just copy everything over if you want, or I think the safer way to do is basically copy these links here, all the way here to this head tag. Copy that, leave that open. Then move it to the index file. Those will go right below here. We'll put it right here. Then we can go back and then copy the other ones. The navigation will move this to a different tab. That will be the home tag. But I'm going to go to the footer. We'll be looking for our descriptor here, is bootstrap scripts. Copy all of those and put it below here before the app root. These are the ones that we need. We will have to modify this a little bit. So the style sheet. We'll be using this style sheet, the default style sheet in our code right here, as nothing there, but we're going to copy that over and put it here. That means in our index, we're going to modify this to just use the style sheet and it would just go directly to that style sheet like this. Now, these are the bootstraps and the scripts or the CSS here. Any additional CSS mainly from the bootstrap. This will becoming from our assets folder. Let's go to the assets folder here. Well, as you can see there's nothing here yet. We just have one gig heap. But we're going to copy what we already have in the public folder in the back-end. In the public folder, we see the Bootstrap folder, images and style sheet. Just copy all these folders here, four these folders. Just copy it and then we'll paste it right into the assets folder over here, and the angular side. Just paste it right in. Everything is intact now. We bribe them over, and we just have to change this URL or the links here to point to that location. These are going to go into the assets folder. We just put assets here. I'll just copy this and replace these with the assets. So that's it. The style sheet is already good. All these bootstrap things will be from the assets folder. I think this is done for this file. This is the root file. Maybe just going to rename this with that space in here. This one is done for now. We can close this and we're done with the layout. No, we keep the footer. Now let's go to the next view. I want to do the home. Well, the root component, this one here, what does it do? Now we're going to replace, we move all of these, we don't need this anymore. Let's Control all and we move everything. Then we're going to go to the layout. We'll replace all of these here with the content from the body all the way from navigation, all the way down to the end at the footer. Everything here, excluding that bootstrap thing down there, we move, copy all of those and put it inside the app component. Here is, we're going to replace that with a router outlet. The router outlet would be right in here. This is what we want. When we click on each of these things, it will flow and display render into that location. The footer is down here, the navigation up here, so we're good. This is the shell. Then I think this is done for this part. We're good. We can close this now. Just to see what that looks like, we can go to the angular page and see if that's what it looks like. Localhost 4200, as you can see, it's coming along. Not everything yet, but we have the navigation bar, we have the footer. The content, it's been displayed right now because we have the home to display this default message. It looks good. As you can see, if you go to these pages, you'd see that we'd have the layout match what we want. Homepage would look something like that. Compared to the backend, perfect. Now let's go and add those components. This is done. Let's go to the homepage first. Homepage will be the index. All you have to do is just copy everything, add to the home component in HTML. That should replace everything. Just save it. Close it. Let's go to the About and copy over. Save the contact. You can see how easy this is now because it's just frontend. Then the login. We have a login here. Then there's the register. Goes to our Register, I think. Then our providers. For providers here. Let's go to the providers that's inside the providers here. We'll eventually add this later on. For now we just need the main list, which is the providers list here. We're going to copy this one here and add that to the providers component here. Well, here's some errors because this has syntax from handlebars. We'll modify those. But let's save this and let's close the backend and see what it looks like. We have some spaces. You've got to fix this error first, otherwise angular is not going to like it. Here we've got the error. Let's fix that first. What that means in order for this to work, we have to change it to angular. Here it's a loop. We'll do something similar. We'll replace this with the ng-container. We'll use the ngFor. We say let provider of providers. If you remember from the previous section, and we'll close that at the very bottom. Replace this and each here with that tag. That's the angular view now. Then we remove this line. Then now all of these here we'll replace it with provider.id. All of these will be like that. We'll put provider.id.name, lastname, firstname company.company_name. Same thing here too, all these will be replaced with that provider down here as well. Anywhere else? One more here. Those are fixed, except we have one area to provide this, there's no providers available. Let's create that for this template to make it work. That means I need to create, let me just collapse all this fuss, it's messy now. Because there's no data in our providers list, there's no data here. What I want to do is create another variable here, like providers equals something because our is empty. If I do that, it's happy but there's no data. If you go to the view it should low, as you can see now it looks just like the previous one. You could go to the homepage, it's seamless, it looks exactly the same except the title is a little bit different here but providers, exit, we have no data, contact, looks good, login, register. Just add one more thing here and then we're done with this one here to get the same look as this. This data come from the example of just a simple object but eventually this will be coming from the database. Let's go and add that really quick, it's a really easy one actually. We have already in the back-end, in the models folder, we have this providers js. I'm just going to copy this models folder and add it to our app folder. Inside the app folder, just copy in there and we're going to modify these providers, it has to be a typed script, so the name had to be changed to TS and I want to say providers.data.ts, I have a little different name, and up here we'll just export it out, so it's just export, and that's it. We export the providers out and then now, so we don't need to do it at the bottom, I think we have it at the very bottom, it's a big file, we don't need this part here. We've got our data and then we have to import it to this providers component on the top here, you can type it up in import, I think if you just do here it might even just do it for you, so providers, there we go. It does it automatically for you, you import it from the providers data, pretty cool. Now we have the actual data coming from the data file and now if you go to the view, there it is, all data here, beautiful, because the navigation works because in the previous section we already configured our routes. What we haven't configured are these here, so when we click on more, notice it goes up details patients. This is another route we have to create, the edit would be the same thing, and then the delete here, we also have to configure that as well when we go to the delete URL here. But so far so good and just one tiny thing here we'll fix right now as you can see there's some spaces here and we don't have it here, something didn't put through over but we can easily do that very quickly right now. So go to the CSS part inside the component, providers component.HTML, and we can just add to the links down here, not here, these right here. For each of these anchor links, we can add another CSS here for the x system, mx, we'll just put a one mx margin in the x-direction, one pixel, so just do that. Mx dash one, the last we need mx dash one and that should give us some margins around the bands. If we save it, go to the view again, there it is. We have the nice spaces around each of these bands. As you can see, we got it, it's all good and we are now ready to go to the next part. In the next video, we will create the main navigation component in the folder as well and update our code to let Angular handle all the navigation links.
