Video instructions and help with filling out and completing Who Form 2220 Navigation

Instructions and Help about Who Form 2220 Navigation

Hello everyone Gary Simon of course cetera comm and today we got a real exciting one you're going to figure out basic routing and navigation within angular 2 good stuff now unfortunately at the time of recording this video the angular client doesn't yet have a way to generate routes automatically so we have to do it manually now if you're watching this video maybe a few weeks or months down the road go ahead and check at the github angular client page to see if they've introduced that feature ok so what we want to do first is switch over here to our command prompt and you can see I've already ran this command right here inside of my project examples folder so ng new routes project and the reason I ran it before is simply because I wanted to let this run through it does take quite a while for it to download and get everything ready to go so once you have that ran and by the way I'm using the angular client for that if you're unfamiliar with what that is go ahead and check out one of my previous videos in this series about everything that you need to get that working so this basically generates a new angular 2 project now we're going to CD into that folder which is routes - project alright and then we're going to hit ng serve and so we'll give it a little bit of time here you more seconds see a bunch of green stuff spit out and not red stuff all right and then we'll go over here and localhost 4200 and it works ok so first before we get into the actual router and how that all works let's add a theme from boots watch comm which is custom themes for bootstrap so we have all these different predefined themes for bootstrap I'm going to use this one darkly although you can use whichever you want so what we're here I'm going to click this down button click on bootstrap in CSS and I'm going to copy this and then we're going to go to our code editor let me bring this up on the other monitor open folder this is a different project and select folder all right so now what we want to do is open up source and go to index.html and paste right here that link and then we'll specify link rel equals style sheet and href equals that URL there alright then save it and then we want to add a header real quick so I'm going to go back to this page I'm going to click on preview right click and view source and right now based on my recording software I can't just select something here so I'm going to hit ctrl a and then ctrl C to select all because really all we want is the header and then I'll come back here we're going to go to our app app component HTML take that hit ctrl V and now I have to get rid of a bunch of this HTML because we only want the header portion so I'm going to take from body all the way up and remove that and then we only want what's beneath this point right here so we want to get rid of container and everything down ordinarily we wouldn't have to do this because I you're not doing what I'm doing with this recording stuff wouldn't let me select it in the browser so there we go let's save this real quickly and switch over here to our routes project and there we go so we have this nice header let's go ahead and make some quick adjustments to it though so it'll work as we want it to so really what's this name first the name we'll rename this to our routes and then also get rid of this nav bar fixed top that can make things confusing when we're dealing with the page content later on in this lesson and then I want to look at our first UL here we just wants a few basic allies so I'm going to get rid of this one we're going to keep this Li help and everything beneath it just delete right there so we have the opening ul and then two closing and then right here I'm going to copy/paste this one we'll call this about and then this one will just say services now the href I'm not going to worry about these just yet we're not going to use them though then I'm just going to get rid of this ul right there all right so we'll go ahead and save this and will revert back to here and just an update there we go about and services as you can see nothing works correctly okay so what we want to do now is create the components for about and services now of course in a regular project or a website you would have many more but I'm just going to show you two so you can get the hang of it so let's go ahead over to our command line I'm gonna hit ctrl C to get out of there and then we're going to type in ng generate component and we'll call this one about and okay take just a couple seconds and then ng generate component services so we're creating two different components here okay now let's go back over to our code editor and now what we want to do is create a new route module so what we'll do is inside of this app directory we'll go ahead and create a new file and this will be named app dot router TS okay so inside of here we have to import a member called module with providers from angular core let me close this out real quick and then also