0:00
[MUSIC]
In the previous exercise, we scaffolded out our first basic Angular application.
And as I mentioned, we're going to work on that Angular application and
develop it further throughout the rest of this course.
Now, before we get started working on our Angular application.
Let's configure our Angular application to use a few additional modules
which enable us to use the templates for our angular application.
We will make use of the Angular material module for designing the UI layouts.
The Angular material module provides us with a number of interesting
0:52
components templates.
In addition, we will make use of the flex layout which is based upon the CSS flex
layout which enables us to do responsive design within our Angular application.
So, in this exercise, we're going to do these configurations.
Along the way, we'll learn our first brief knowledge of components
even before we go on to examine components in more detail in the next lesson.
1:24
To get started,
let's begin our journey with a quick visit to the app.component.ts file.
This is the file that supports the root component that forms part
of our Angular application.
Now, taking a look at this root component, there are a few things that have become
very clear to you even without much explanation.
The first thing that I would like to draw your attention to
is this import statement.
As you can see,
this is importing the component class from the Angular core library.
And then thereafter, we are preparing our AppComponent class here and
exporting that class.
So, within this AppComponent class that we have declared, we have a variable that we
have declared here called title which is currently assigned to be a string.
Now, taking a quick look at this variable, you immediately begin to wonder.
How is this related to what we have seen in the browser?
When you saw our Angular application being shown in the browser,
the Angular application was displayed exactly these words in the browser.
Indeed, this variable plays an important role in
coming up with the view that you saw in our browser.
2:44
Now in addition, you also see that this component class
is appended with a decorator here.
So again, this is another decorator that you will encounter in Angular.
So, this as we see is a component decorator.
The component decorator internally takes a JavaScript object as a parameter here.
And the first property that you see here called selector: 'app-root'.
Now, if you recall, when we looked at the index.html file,
we saw that we have included a element there called app-root.
Now your beginning to see where the app-root of our structure.
So, this is the selector for the component that we declare here
which is what is used to whether that template class to specify.
Where the view corresponding to this component
should be displayed in the browser.
3:42
The second property that you define here is the template URL.
This points to a file, an HTML file as you can see,
which contains that template corresponding to this particular component.
The template which defines the view for this component.
And the third property that you define here, as you can see, says StyleUrls,
which as you notice here is assigned to the app.component.scss file.
So, this file should contain all the SCSS code that can be used for
CSS tiling for our components template.
So, this is a quick visit to the app.component.ts file.
Now, let's go to the app.component.html file and
take a quick look at the template.
4:37
Going to the app.componet.html file, you see that this app component file,
the HTML code here contains just an h1 tag with something in here with double braces.
Now, obviously this is not something that you are used to from your
knowledge of HTML or CSS or JavaScript where you have seen before.
This is Angular syntax.
This is what we call as interpolation.
This is using the Angular's one-way data binding.
I am throwing a few terms at you at this moment.
Hold on to those terms.
We will come back to look at those terms in more detail
in the remaining lessons of this course.
The first thing as I mentioned is interpolation.
The second one that I mentioned is one-way data binding.
5:34
And also, you immediately see that this is the variable
that you saw in the companion typescript file which defines
the types of code corresponding to the app component.
So, once you specify something like this here, the implication
is that whatever the value for this title will be substituted and placed here.
And will be used as the inner HTML code for this h1 tag here.
6:32
In order to help us design responsive views within our Angular application,
we're going to take the help of a couple of related modules for
Angular called as the Angular Material Module.
The Angular Material Module provides us with a number of components,
at layout components that we can use in designing our view templates for
our Angular components.
The Angular Material Module, if you want it compare,
this is somewhat like what Bootstrap provided us for
designing our vet pages that we examined in the previous course.
7:14
Also, I will use another module called the Angular Flex Layout Module.
The Flex Layout Module provides support for and
using CSS flex layout within Angular templates for
our Angular components.
Now, these two modules need to be explicitly installed and
then input it into our Angular application.
That is what we're going to do in that next step.
But before we go forward, one question that you might be wondering about is,
why not use Bootstrap for doing
7:53
the design of the templates for our Angular replication?
Indeed, you can also use Bootstrap to design the templates for
our Angular replication but You can only use the CSS
component part of Bootstrap within your Angular application.
The jQuery based components,
the JavaScript components, cannot be explicitly used.
There might be some conflicts between the jQuery based components from Bootstrap and
the Angular code itself.
So it is best to avoid using the JavaScript components from Bootstrap in
case you choose to use Bootstrap as the way for designing your Angular templates.
But on the other hand,
I also thought that this would provide us with a good opportunity of learning yet
another UI layout framework that is the Angular Material framework.
So that's the reason why I chose to use the Angular Material framework and
the Angular Flex Layout in this particular course.
9:04
Now, as we go through the rest of this course, I won't explicitly explain
how to use the Angular Material components or how to use the Angular Flex Layout.
Instead, we will learn them by looking at examples.
We will make use of these two, both the Angular Material based components and
the Angular Flex Layout support when we design our templates for
our Angular components in this particular course.
So by the process of making use of these components, you will also,
along the way, learn how to make use of both Angular Material and
Angular Flex Layout within your Angular application.
I thought that by doing the exercises,
you would learn a lot more about Angular Material.
Now, to explain the conceptual aspects of why Angular Material components,
work the way they do or how Grid works, for example, or
how a responsive design works.
We have already examined some of those in the previous course on Bootstrap,
so the same concepts will also come to our aid.
Instead we will look at the mechanics of using both Angular Material and
the Angular Flex Layout within our Angular application in this particular course.
To get started using Angular Material, of course the first thing that you need to do
is to install the Angular Material modules.
So at the prompt type npm install minus,
minus, save @angular material.
So as you can see, we specify all the Angular related modules with the @angular,
so you will see also the same thing for the Flex Layout.
You can also qualify this further by saying latest, so we'll install
the latest version of the Angular Material module within our Angular application.
11:13
So the current version of Angular Material that I'm using is Angular Material
2.0.0 beta 3.
By the time you do this course it might
be in an RC version or even the final version released by the time.
But it doesn't matter.
The basic way that you use the Angular Material module will remain more or
less the same.
In addition, when you are using Angular Material, you also need to import
the Angular animations module into your Angular application.
Starting with the Angular version 4, the Angular animation support
was extracted out of the core modules into its own separate module.
So which means, that if you need to make use of animations within your Angular
application, you need to explicitly install the Angular animations module.
So, let's go ahead and install that too.
So, say npm install save @angular/animations and
then let me qualify that with the latest and we will see the version of the Angular
12:46
When Angular CLI scaffolded out our Angular application,
we probably were using Angular code 4.0.0.
Let's take a quick look at the packaged.json file to examine what
we are using there.
Going to the packaged.json file,
I seen that the angular/core that is being used here is 4.0.0.
If you want, you can update this to 4.0.1.
So as you noticed, we are already into the Angular version 4 in this course and
the rest of the exercises will be based around the Angular version 4.
When you do this course, you might actually be using a higher version
of Angular core, but I would expect that the rest of
the exercises will work just fine with the higher version of Angular 4.
I will keep cross checking whenever Angular releases a new version of
13:48
Angular core or the other modules.
I will cross check all the code with those versions,
just to ensure that the code will work just fine.
In case there are updates then those will be updated in the instructions,
exercise instructions that follow the videos.
For the moment you can ignore this unmet peer dependency,
I think it'll work just fine with the Angular version that we have there.
Also another module that I will install together is,
15:03
Next, I'm going to move on to install the Angular Flex Layout
within my Angular application.
So to do that, let me clear the screen and then type at the prompt
npm install @angular/flex-layout.
And we'll install the latest latest version of that,
and that should be flex-layout version 2.0.0-beta.7.
By the time, as I said,
by the time you use this course that might have already changed but that's fine.
You should be able to
15:43
make your application work just fine with the new version.
I will obviously end shield, but the rest of the exercises will work just fine
at every step whenever a new version of Angular is released.
So now that we have all the pieces that we need for
our Angular application installed, let's go ahead and then
configure our Angular application to make use of these modules that we installed.
Into our Angular application.
16:14
The first thing that we will do is go to index.html file and
then we will configure the index.html file to use the Angular material icons.
So to include the Angular material icons so
that they can be used within the templates of your Angular application.
So let me go right there in
the head of index.html and
then create a new link with
href=https://fonts.googleapis.com/icon?fa- mily=Material+
18:08
/platform-browser /animations.
So this will include BrowserAnimationsModule.
So you see whenever you see a red squiggly line,
you know that you have made a mistake there.
So this is imported from the @angular/platform BrowserAnimationsModule.
Now I'm going to move this up in the file
here to include it right after the BrowserModule.
18:48
There is no reason for
doing that, I just wanted it to be together with the BrowserModule.
Because you see, this is the platform-browser, and
then platform-browser/animations.
So I wanted them to be together, like buddies.
So now, the next one that I'm going to import is MaterialModule.
19:10
So this imports the Angular material module that can
be used within our Angular applications template.
So angular/material.
And also import {
FlexLayoutModule }
from '@angular
flex-layout'.
So once we have all these modules imported,
then one additional change that I need to do is,
let me also import hammerjs while I am right there.
So let me import
20:03
'hammerjs' into my application.
And once I hammered it, the other change that I need to do is to also
include those modules into the imports of the NgModule decorator here.
So I'm going to go there and say BrowserModule,
Browser AnimationsModule there.
And then after the HTTP Module,
I will import the MaterialModule and
also the FlexLayoutModule as part of the imports
inside the NgModule decorator for my app module.
So with this, all my configurations to use the MaterialModule and
the angular/flex-layout module and
together with the AnimationsModule in Angular is completed.
21:01
Now let's step into the components template and
make use of our first Angular material component in designing the layout for
our application's app component.
Going to the app components template file,
I'm going to replace this now with
a Angular
material component called md-toolbar.
So the md-toolbar enables me to design a toolbar that I can
use in my Angular application toolbar typically
displayed at the top of your page, in your application.
So for this toolbar, I will specify the color as primary.
We will see what this means in a short while.
And also they would close off this md-toolbar here.
Now inside of this, I'm going to use
a span with the name of my restaurant for
which I am designing this website, so
Ristorante Con Fusion.
Now you see why I named this folder as Con Fusion.
22:29
So what is the update that we need to do to the app component HTML file?
While we are at it, we will also include a few
SCSS updates to my styles.scss file.
So if you go down into your code here, you will find this styles.scss file here.
So this is where you can include all the global styles in this file and
this will be available for all the components to make use of.
Each component has its own SCSS files where you can
include component level customization or
component level SCSS code to be used within that specific component.
We will use both approaches within this Angular application that
we are developing in this course.
But right now, I'm going to update the main styles.scss file with
some code that will be useful for my whole Angular application.
The first thing that I'm going to do is to import
a pre-built theme that is available through Angular Material.
This pre-built theme in Angular Material provides us with
a way of specifying certain colors and
the way some things are laid out within my Angular Material components.
The colors that will be available through the pre-built theme
are primary color, the accent color and the warning color.
Now the specific theme that I will use is called deep purple So in this case,
the primary color will be deep purple, the accent color will be amber, and
the warning color will be red in this case.
Now, you can build your own Angular
material themes that you can use within your application, but
I will leave that as an exercise for you to explore on your own.
Right now within my Angular application I'm going to use one of the pre-built
themes called deep purple amber.
So to do that, go into that style start ACSS file,
I will import, angular,
24:52
material/prebuilt-themes/deeppurpole-ambe-
r.css.
So this one pre-built theme I will make use of within my Angular application.
You'll pretty soon see how this pre-built theme works in angular
application in the templates that we design for our Angular application.
In addition I'm going to configure some properties for
my body of the index.html page, so
I will specify the padding as 0 margin as 0.
And then the font-family that I will use is Roboto,
or sans-serif, within my application.
You can choose to use whatever you want within your Angular applications.
I selected to use these two within my Angular application.
Let's save the changes, and let's go and
take a quick look at our Angular application in the browser.
Before you do that, make sure that your ng serve is
running in one of the terminal windows in your computer.
The development server should be continuously running so
that it will automatically do the compilation, and then load the updated
version of the Angular application into the browser window.
Going to the browser, you now see the changes that we
have made to that Angular application reflected into the view in my browser.
So you can see that we now have a toolbar at the top with the wordings
that we included in the app components template file up there.
And you can see the color that has been applied to the tool bar.
So the color, primary color, so
this is the deep purple color that is applied to the tool bar.
Now the theming that we have defined would add either deep purple or
amber color, depending on what is used by the specific Angular material
components that we use within our Angular applications templates.
With this, we complete this exercise.
In this exercise we configure our Angular application to make
use of the Angular material and Angular Flex layout.
We also made use of our first Angular material
component in the app components template file, and
we used the built-in theme from Angular material for our Angular application.
Save all the changes and then, this is a good time for
you to do a get comment with the message configuring Angular.
[MUSIC]