Before we move forward with the rest of the exercises and the assignments in this course,
I thought this would be a good time for me to
give my angular application a nice structure.
So, this is where I'm going to add in the header and footer
for my angular application so that the way
the UI is rendered is lot more attractive than what it has been so far.
So, let's see how we can build up multiple components to
occupy different parts of the screen within our angular application.
So, here, you will see that my angular application now is going to consist of a header,
which is a separate component, the footer,
which is another component,
and then in-between the two,
I will have the part of my angular application that is going to
be controlled later on by using the angular router.
So, you see, I'm setting up the stage for what is going to come later on in this course.
So, along the way,
we'll also make use of Font Awesome Icons within our angular application.
I'm just fond of the Font Awesome Icons,
so I thought this would be a good place to
introduce these icons into my angular application.
To proceed forward, let's install font awesome into our angular application.
So, to do that, I'll use NPM to go,
and fetch font-awesome for me,
so NPM install font-awesome 4.7.0, and save.
Then, let font-awesome be installed.
So, once font-awesome gets into our angular application,
and then becomes part of the node modules
that are included within our angular application,
the next step is to make it available for our angular application.
We need to integrate font-awesome into our angular application.
So, to do that,
go to the source folder,
and then create a file named _variables.SCSS in the source folder.
In the variables.SCSS file,
add in $fa-font-path: and
then within quotes, put../node_modules/font-awesome/fonts.
So, we're specifying the font path for our font awesome files here.
Then, open the styles.SCSS file,
and then in the styles.SCSS file,
we're going to add in a couple of lines there.
First, we will import the variables that we have just declared by saying @import,
and within quotes variables,
then we will import the font-awesome files there,
then we'll say
@import../node_modules/font-awesome/SCSS/font-awesome. We are importing the
SCSS version of it because we are using SCSS in our angular application.
Once we have modified the styles for the CSS file,
let's save the changes.
At this point, we may need to restart
our server that was serving up our angular application.
So, where you typed the NG serve,
you may wish to stop the server that is serving up your angular application and
restart it so that it will include this new changes that were made.
So, going to my terminal,
I'm going to stop my server,
and then restart the server so that it'll take into account the change that I have made.
You would see the current state of
our angular application by looking at it in the browser.
So, this is what we have in our angular application.
I want to be able to add a header and footer to
this view so that I can use both the header and footer,
and then the actual content between the header
and the footer in the way I construct my angular application.
So, to do that,
I'm going to create two new components called header and footer,
and let them manage their part of the screen that is allocated for them.
Going to the prompt, let me generate a new header component.
I can even say ng g,
that is sufficient enough for angular CLI to
recognize that it wants to generate a component.
So, I say ng g component header,
and also ng g component footer.
So, now, I have two components that are available for me
to make use of within my angular application.
How am I going to make use of these two components?
Let's go to the App component.html file,
and then make use of these two components in the way we
compose the entire screen for our angular application.
Going back to our application,
we see that the app module.ts file
already includes the header and the footer component
and they have already been included in the declarations here.
So this is the advantage of using the angular CLI,
it takes care of all this groundwork for
you so that you can concentrate on just building your angular application.
So, that's the reason why I love the angular CLI
as an approach for building my angular application.
So now, let's go to the app components HTML file.
So, here, you see that we have included the app menu down there.
I'm going to remove this tool bar from my app components HTML file.
That toolbar will become part of the header template for my header component.
So, instead my app components template
file will only contain the header and the footer at the bottom.
So, you see that now,
we have the views of the three components.
The header, the menu,
and the footer occupying the entire screen.
So, these three components get those part of the screen for themselves.
Let's save the changes and take a quick look at our application in the browser.
Going to the application in the browser,
you now see that the header has already occupied it's
part of the screen up there, and obviously,
since we have just prepared the component,
it just says header works,
and then down below here,
the footer has also taken its place in the screen page.
Now, we will now go ahead and update the templates for both the header and the footer
so that we can nicely define our UI for our angular application.
Let's begin the work on our footer.
So, to get started on the footer,
let's go to the footer's template file,
and then we're going to replace this with the footer's newly designed template.
Now, for your convenience,
I have provided the code for you in the instructions.
It will be wise to copy the entire code from there,
and then paste it in here.
Then, examine what this footer does.
So here, you see that I have pasted in the code for my footer template.
Now, I'm going to come back to this code a little bit later.
If you have done the previous course on Bootstrap,
you would see that this is the angular material way of implementing
the same kind of structure for the footer that we have done in the Bootstrap course.
Some of these things will be recognizable for you already,
but let me complete the update to the footer template,
and then also we will add in a few SCSS code into my footer component.SCSS file,
and then take a look at how the footer now shapes up.
So here, I have again pasted in the code
from the exercise instructions that follow this video,
to show the different SCSS classes that I've added into my footer.
So, I have a few classes that I've defined here,
I'm going to make use of them to define a part of my footer,
and then similarly footer class here,
and I have a SCSS mixing here,
and some variables here which
define various colors that I'm going to use in my angular application.
So, let's save the changes that we have made.
Let's take a look at the footer in its current incarnation,
and then we'll come back and pay a quick visit to the code that I have included both
in the footer components template file and the SCSS code here.
Going to our angular application in the browser, wallah,
there you have the new footer for our angular application.
So, you can see that I have a few things here.
These on the left edge are the various links
to various pages that are going to form part of my Angular application.
We're going to see how we do that as part of the next few exercises.
Now, here I'm making use of the button component that
is part of Angular material to define these links here,
then I have the address here,
and then I also use again buttons to define this sequence
of buttons for the various social media links for my restaurant here.
So, you can see that I have all these.
For creating these, I use
the Angular material support for small floating action buttons here,
and that gives a nice structure for this.
If you have seen the Bootstrap version of this,
I like this much better than the Bootstrap version that I created in the previous course.
So, our footer is now well in place.
Let's quickly look at some of the code in the footer.
Now, I won't explain that in a whole lot of detail because that is to
deal with more with the Angular material than Angular itself,
but along the way by just looking at the structure of the code,
you'll begin to see how
this Angular Material components can be used to define something like this.
Going to the footer component,
you see that I have a outer div here for which I have specified some angular layout,
flex layout attributes here,
so I say that fxLayout row,
and then fxLayout sm and xs to be column.
So, for small and extra small screen sizes is
going to position all the content as columns,
but for the larger screen sizes,
it's going to position them as row.
So, this is what gives me the nice structure for my footer.
As you see in the UI div,
I'm positioning all the content center-center here,
and down below here,
I define the first one.
So, this math twist here that I'm using defines my links here.
So, in this I'm using mat as to Angular material component,
and inside there I am using the a with
the mat button component attribute assigned to a to create these buttons here.
Later on, I'm going to come back and add
the actual code for this links in the subsequent exercises here.
This is what helps me to create the list of links on the left side.
This is the address that you see,
this is fairly straightforward to look at.
So, this is a div for which I am using fxFlex with 50,
and the other one with fxFlex with 40.
So, 40 means 40 percent and 50 means 50 percent,
and here I'm using fxFlex offset 20 pixels.
So, it moves this content right by 20 pixels.
So, I have a 20 pixel space left on the left side for
this particular div containing these links here.
Then finally below here,
I have this set of links that I am making use to
create the bar with all the social media links there.
So, I am using a with the mat icon button here.
So, that is what creates the rounded buttons that you see in the footer there.
Now, for each of these,
I am applying the corresponding class here.
So, you can notice that button Google Plus, button Facebook,
all these classes are defined in my SCSS file there,
where I have specified the colors for the background and so on for this,
so that it matches the typical color scheme that these social media sites use.
So, spend a little bit of time looking at this code here,
and then you'll quickly get a sense of how the footer has been designed.
Similarly, going to the footer components Sass code here,
so you can see that I have defined various colors here.
I'm using a mixing with the margin set up here,
and then for my footer,
I define the background color appropriately,
and notice the various classes that I'm defining here
a button Facebook for which the color and
the background color I've defined for each one of them.
So, that the corresponding color of
that social media site is being used as the background color for each one of these.
Now, in the Bootstrap course earlier,
I had used the Bootstrap Social for achieving the same thing.
That doesn't work very well with the Angular material,
so that's why I just created my own set of Sass glasses here,
and then add in the code that I need to create those buttons there.
If you need to add more buttons,
then just create more classes like these is corresponding to
the buttons that you want to add into your application.
So, that builds up our footer.
Now, the header is the next part that we're going to target.
Going to the header, will open the header
components template file and you see what it contains.
We're going to replace this with
the template that I have given for you in the instructions that follow here.
So, just go ahead and cut and paste that code in here,
because this has nothing to do specifically with angular.
So, that's why I'm just allowing you to cut and paste the code directly from there,
saves some time for us.
You can see that I have now replaced the headers template with some code here.
Similarly, while we're at it,
we will also add in some SCSS code for my header.components.SCSS file here,
just go and copy the code from the instructions.
Similarly, while we're at it,
we will add in a few more SCSS classes to my main styles.SCSS file.
So, into this main styles.SCSS file,
I will add in sub colors and a couple of more classes into this.
So, let's paste in the code from the instructions that I have given you.
So, the update to the styles.SCSS file is now complete,
so I have added in some colors here and mix in there,
and then at the bottom I have added in a few more classes here which
help me when I am designing my templates for my angular application.
So, all these changes,
let's save the changes,
take a quick look at how my header looks like now in the application,
and then we'll come back and quickly revisit the code that we have just included here.
Going back to my Angular application in the browser,
you now see the toolbar reappears in the header here,
along with a few links in
there and then an image representing the logo for my restaurant,
and then here, you have something that we use the jumbotron file in the previous course.
I'm going to just use a class called jumbotron to create this
in the Angular application also,
so here on the left side I have my restaurant's information and
the restaurant's logo and left myself some space here for adding something in the future.
So, here you see my application now taking shape with a header,
with some links in there.
Now, we're going to make use of this links in
the next few exercises to setup my Angular application,
and then the menu sitting in between and then down below here my footer.
Going to my header components template file,
you can now see how I have created the toolbar with the additional buttons here.
So, you recall that we had the toolbar
already in use in the app components template file,
I have cut it from there and instead use the toolbar into the headers template here.
Now, inside this toolbar,
I've included some links with the button class applied to it and this is what
allows me to create those links in the toolbar as a menu for my web application.
Below there, I have created a div with the class container and jumbotron.
That's the reason why I added the container and jumbotron classes into my SCSS file,
so that I can make use of them within my templates here.
So, for which again,
I apply and some flex layout attributes here to help me design the screen there.
Then you can see how I have used a couple of divs here with
the fxFlex attribute applied accordingly to create the UI,
for my application here.
So, spend a little bit of time here to take a quick look at this code here to
understand quickly how my layout for my header template has been created.
It's not that complicated,
once you have completed the Bootstrap course,
this is not that difficult to understand.
Along the way, you're also learning the angular flex layout and then
also the angular material components here.
Going to the SCSS file for the header component,
you can see that I have added in some colors here and then a mix
in and then also added in a jumbotron class here.
Now, the container class is not here,
the container class is in the main styles file.
Because the container class is something that I'm going to
use for many of the templates there.
So, that's why, I added in the container class to the styles.SCSS file
which is the common file for my entire angular application.
So, there I've added in some additional colors here,
and also I have created a mix in here,
and then added in the container,
the background primary, and the background accent colors,
and then I'm also using another class called flexes spacer,
which I'm going to make use of in one of the later exercises.
All these steps are in preparation for what is going to
come in the next several exercises.
My Angular application has now taken a good shape in terms of the way the UI is laid out,
so that I can now start introducing a lot more new features for angular.
Paying one more visits to my Angular application in the browser,
let me see how this application looks like in different screen sizes.
So, this is the standard desktop screen size,
so let's move to a smaller screen size and then see how the application looks like.
So, this is a iPhone 6 Plus screen size,
so you can see how the layout is different for the smaller screen size.
So, my header is right up there and my menu at the bottom and the footer here,
notice how the footer's different parts have been
laid out differently for the extra small screen size.
This is the same application in the landscape mode or an iPhone 6 Plus,
so you can see that my header is laid out like that and the menu there and the footer.
So, that shows you that I have leveraged the angular flex layout
to be able to create different layouts for different screen sizes.
So, again, if you have taken the Bootstrap course earlier,
you'll begin to see how the responsive design with
the angular flex layout can also be used to achieve similar results.
So, with this, we complete this exercise.
In this exercise, we have prepared our Angular application and made
it ready for the rest of the exercises in this course.
This is also a good time for you to do a git commit with the message header and footers.