Join Alexander Zanfir for an in-depth discussion in this video Refine the Layout, part of Building Angular and ASP.NET Core Apps with Authentication.
- [Instructor] We have our data displaying but it's just raw text at this point. There isn't much of a user interface. Let's start developing a nicer looking UI using Angular Material. If you are used to working with bootstrap, you might wonder why it isn't being used instead. I prefer material since it's made by the Angular team to specifically work with the latest version of Angular. It's also fast and not too verbose. Let's begin by heading over to the Angular Material website.
That's located at material.angular.io. Over the past year, Angular Material has been getting many updates. Some of which have introduced breaking changes. And so I suggest as you follow along with this course and installing and setting up Angular Material, you head over to the Angular Material website to follow the more updated instructions. So, on your end, please go over to the getting started section. I'll begin by installing Angular Material with NPM.
Please follow along, but as mentioned before, if there's any changes in the installation or setup instructions, please make those modifications to the instructions I'll be giving you in this course. So, I'll copy over the NPM install command. Back in our editor, let's open up a new terminal by hitting the plus sign, then I'll paste that in. Now that it's finished installing with NPM, let's continue with the instructions.
Next we'll need to install the Angular Animations package. So, I'll copy that NPM install command and paste that into our new terminal. And let's carry on. Then let's go ahead and import browser animations module inside our main app module. I'll copy the following line and inside our app module.ts, I'll paste that at the top.
And then as we can see, we'll need to add it to our imports list. So, I'll add that on line 14 beside browser module. And let's carry on. For step three we will need to import each of the components from Angular Material that we would like to use. So I'll copy this line then back in our app module, go below line three and paste that in and I'll take out the Md checkbox module since we'll only be using the button module for now.
Then let's go ahead and add the md button module to the imports list, and we can do that on line 15. Let's go down to step four. Next we'll need to include a theme. So let's copy this line and go over to our styles.css and paste that in. Back in our editor, inside our source folder, we'll see a style.scc. Let's open that and paste that line in.
Step five includes gesture support. And we'll need to have that for a couple components but fortunately we won't be using them for this course so we can skip past step five. Step six is optional and that should be it. Let's go ahead and test out Angular Materials. The first thing we'll do is go to our app to make sure we're getting no errors after saving our changes. I'll also close the terminal so that we get more screen space.
One important note is that the server which is hosting our web app is still running even though the integrated terminal is not being shown. That means the changes or updates we make in our code will continue to be reflected inside the browser. Next I'll close up the app module and go back to our messages component. First let's look at line five and convert our string literal into a template literal so that we can have multiline strings to format our HTML better.
So, I'll get rid of the single quote and put in a back tick, then I'll do the same with the last single quote. Now let's format our HTML on multiple lines. Save that and make sure it still works. Next let's test it out by adding the button. So under line eight I'll add button, with style md for materials dash button, and I'll call it test and then I'll close it.
Let's save that and give it a try. As we can see we'll see a test button there. If we hover over it, we can see we're getting the material styles. For now let's get rid of the button on line nine. Next we'll add some better formatting for our message text and message owner using an MD card. And just like MD buttons, we'll have to add that to our app module, so let's open that up. So on line four beside MdButtonModule we'll add MDCardModule, and let's add that to the imports list on line 15.
Next, we need to cover a breaking change in Angular Materials. AS mentioned earlier, this course has updated Angular and Angular Material, in previous versions of Angular Material, we did not have to specify which component modules we needed to use, it just imported all of them with one single import. With this version, a breaking change was introduced where we have to import every module. To make this compatible with the rest of the course, we will import all of the materials modules we will use in the rest of this course now.
Since there are quite a few modules that we'll be using, I've stacked them vertically. Next let's add them to the imports list. And I've stacked the imports list vertically as well. And that should be it. And we can wrap line seven with an MdCard. And then we'll close it. Let's save this and give it a try.
Now we can see that our messages are being shown inside cards. Let's add some nice formatting by putting the owner inside the card title and the message text inside the card content. So, we'll format this on a new line. Then we'll take out the message text for now. And we'll add md card title and we'll close it.
Then we'll add the md card content below it. And I'll paste in the message text we had removed earlier. Let's save that and give it a try. We can see the formatting looks a lot better but the contrast is a bit off and the foreground in the cards somewhat bleeds into the background, so let's add a bit more contrast. Let's go back and open up our styles.css.
Then let's add a body style and we'll add a property background and we'll set that to hash followed by six E's, which will give us a light gray. Let's save that, close out styles, then back inside our messages component, we'll add one more custom style. Let's go to our md card on line seven and add a style property. We'll use a margin and we'll add eight pixels.
Let's save that and give it a try. Now we can see there's a lot more contrast in our layout and we have some spacing in between each message. Now that we're happy with the way our frontend looks, let's take a look at developing our backend.
- Setting up the app infrastructure
- Creating and configuring the Angular 2 project
- Displaying data in Angular
- Refining the layout
- Creating the ASP.NET Core project
- Creating a controller with ASP.NET Core
- Creating a nav bar
- Registering users
- Authorizing resources
Skill Level Intermediate
Q: This course was updated on 10/18/2017. What changed?
A: The following topics were updated: setting up the app infrastructure, displaying data in Angular 2, getting data from ASP.NET Core, creating a controller with ASP.NET Core, and authorizing resources.