[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

layout components that we can make use of in designing our Angular

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.

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.

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.

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.

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.

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.

That's the purpose of including this here.

We will now go on to install some of the other Angular relation

modules which will enable us to design templates.

And then we'll come back to this app.component.html file and

then redesign this template a little bit later in this exercise.

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.

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

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.

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.

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

animations that we are using in this course.

You see that we are using Angular animations,

4.0.2 and this depends on Angular core 4.0.1.

Now it's okay, you can ignore that part for the moment, it'll work just fine.

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

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,

Called hammerjs.

The hammerjs module is used by Angular for

supporting some gestures within your Angular application.

So that's the reason why we install hammerjs also within our application.

And the current version of hammerjs that we are using is 2.0.8.

And that should work just fine, don't worry about the unmet peer dependency.

Now, we have now installed whatever we need for

the Angular Material module to be used within our Angular application.

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

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.

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+

Icons and this is

a stylesheet.

So with this I can now make use of the Angular material icons within

my Angular application wherever I choose to do so within that template.

The next step is to go to the app module.ts and

then import the three modules that we have just installed.

So the first one that I'm going to import

is called as the BrowserAnimationsModule.

Which I will import from angular

/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.

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.

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

'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.

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.

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,

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]

Exercise (Video): Configuring your Angular Application

Front-End JavaScript Frameworks: Angular

Conoce a los instructores