Build an App From Scratch With JavaScript and the MEAN Stack

5.4 Setting Up the User Interface

So we've been doing a lot of implementation right now. And we've gotten to the point where we've done a lot of updates, but we haven't really looked to see what we actually have to begin with from a UI perspective. So we've made a lot of changes. So let's kinda pause a little bit. Let's take a look at where we're at and talk a little bit about where we're going. And then make a couple little changes so we can prepare ourselves for creating our UI components in Angular. So it's been a little while since we've looked at where we were when it came to our API with express. So if we were to go back and do a little local host on 3000 and take a look at lawns again, you're gonna see that it's changed. We used to get a response back. It used to put something on the screen, but it doesn't do that anymore. Right now it just shows this kind of open and close square brackets. And why is that? Well if you recall, in express when we are asking for the root, we're doing a get all operation on our lawns. And it's gonna return back a list of lawn objects, but we haven't created any lawn objects yet. We're getting there but we haven't quite gotten that far yet. So what you see here is truly what we have within the database right now, an empty collection of lawns. They don't exist yet. So we're gonna start to work on that in some of the upcoming lessons when we start to build out the UI. Secondarily like I just said, building out the UI. So what does that look like right now? Well if I were to go to localhost 4200, and you may say, why am I going to 4200? Well as we're running our application and it compiles every time, it's gone a little bit further this time then you probably be able to see. But if you scroll up far or enough or restart your application, you're gonna see that it's starting a development server and listening on localhost 4200. So this is where your application is running right now. It's running on localhost but on a different port than your backend application, which is good. So if you wanna take a look and see what your app looks like currently, this is what it looks like. And you may say, why the heck does it look that way? Well, the reason it looks that way is when you use the Angular CLI to create a new application, it gives you some boilerplate code, some boilerplate UI. And this is what it gives you. So it gives you some links to learn a little bit more about Angular and how to start building it, some tutorials. And there's some really good information in there. So if you haven't done much with Angular yet, then I would highly recommend you go through some of this, especially the Tour of Heroes demo app is pretty cool, and it covers a lot of information. It's covering everything that we're covering in this course and more. So if you want to learn a little bit more about Angular and how to build self-standing single page apps, then I would highly recommend you going through that Tour of Heroes demo. It's pretty cool. But this is really not what we want our application to look like. Now I'm not a designer and I've said that many, many times before, so in order to kind of make some changes and facilitate what it is we want to do ultimately in our app, we're gonna have to make a couple of changes. So before we make changes, it would kind of benefit us to know where all of this is coming from. Where is this markup coming from? So let's go back into our code, and let's kind of poke around a little bit. So the first place that you're gonna wanna take a look is going to be in your app, in source this index.HTML file. So this is gonna be your root kind of like your master page if you wanna call it that where everything kind of have its initial home. This is where the initial markup for your application is going to live. We have some HTML5 markup here, pretty basic stuff. This is what comes out of the box. And none of this may seem too strange, except for one thing if you have never done Angular before. Like I said, hopefully you have, but if you haven't, this app route right here is gonna look a little strange. And you may wonder, I'm not familiar with the app route html element. What exactly is that? Well, out of the box it's not an HTML element. It's actually an element defined within Angular that is going to actually inject more markup in there. So where does that get defined at? Well, so index.html is gonna contain your basic structure of your page. But if we were to go back into app, and we were messing around a little bit earlier in app.module, and the fourth thing, that I really didn't mention very much that was important in here, is this bootstrap at the bottom. So if you see, in bootstrap, we're defining appComponent as our bootstrap. And it just so happens that we have app.component above app.module. So if you take a look in here, you're gonna see we're defining a component. And hopefully you've seen this before, if not you gonna get some work creating these over the next couple of lessons. But in this component we're defining a selector and that selector is app-root. So what's gonna happen here is every time Angular sees an HTML element of app-root, it is going to take this component and inject it into that spot. So where you saw in our index.html app-root, it's going to inject this component. Well, what does that mean? Well, when you use the Angular CLI to create components, every time you use it to generate components just like we were generating a service earlier, you're gonna get four files out of the box. You're gonna get a CSS file, an HTML file, a spec file, and you're gonna get the actual TS file. So CSS is gonna contain any sort of styles. So you can define styles for your component in here, if you would like. This is the HTML that's actually going to be injected into that spot where it finds that element that is the selector of this component. So that's where all of this is coming from on our HTML page, where you saw the links for Tour of Heroes, CLI documentation, Angular blog, all that sorta good stuff. The spec file, once again, it's gonna create some tests for you, some out of the box. They're not really doing anything necessarily, other than checking that you can create the app or can create your component or what not. And then the actual code behind your component, and that's where this is going to live. So basically what we're gonna do for the remainder of the course is we're gonna be creating components. And then I'm gonna kinda split each one of those lessons up into two pieces. The first one is going to be, I'm gonna show you the markup that we're gonna be using because let's face that it's not very exciting to watch me type markup. So I'm just going to paste that in there, and we're gonna talk a little bit about it. And then in the lesson after that, we are actually going to do the implementation behind the scenes in the actual component.ts file, that's going to allow it to actually give it some functionality. And so I think that's gonna make this a little bit more interesting for you. And then, obviously, as far as the markup goes, you can do some research, and I'll point you to some documentation where you can find what I did for that. So for the remainder of this lesson, for just a few moments, I wanna make a couple of changes. So I wanna change what we're doing in here in the index.html, because we're gonna be using Bootstrap. We're gonna be use Bootstrap 4. In order to do that, we're going to need to take some CSS and some JavaScript here. So all you really need to do is head over to getbootstrap.com. Go to the latest version, which happens to be 4.1 at the time of this recording. It might be newer when you watch this video. So take whatever the latest and greatest or whatever version is that you want. And you're gonna need two pieces. So let's go ahead and copy the CSS line right here. We'll head back over to our code and we'll simply drop that in the bottom of our heads or in a link element. And then we'll go back over, and we'll grab these three JavaScript lines that we need to copy here as well. And we'll drop those in the bottom of our body below the app root here. And then, let's go ahead and save this. And odds are, if you save that right now, and you head back and take a look at Lawncare, it might change a little bit. You'll see that the text is a little bit different. The links look a little bit different, and that's okay. Like I said, we're gonna be augmenting and changing this over the duration of this course for the last few lessons, when we start to create these components. So what we're going to do now actually is we are going to stop right here. And over the next couple of lessons, we're gonna start to create components and create some linkages and some routing between those components, and put some functionality behind them. And then ultimately, we'll wind up making a few changes here and there to app component, because this is not what it's gonna look like. And actually because of that, we can actually get rid of everything in here, and just go ahead and save that. So now because I made a change to Angular, if you recall ng serve that's running in the background, if I were to go back over to my page you're gonna see it updated automatically and is now blank, which is fine, cuz we're gonna wind up making changes that file as well. So now we have introduced Bootstrap into our Index.html file and we kinda have app component cleaned out, we have an open sandbox. So over the next several lessons, we're gonna start creating some components, creating some markup, and then creating some functionality behind them to finish off our application.