All language subtitles for 17. Deployment and Review

Our card's application is now all complete.

So in this video we're going to deploy our app and we're going to go over a couple of high level notes

of important things we covered inside this project.

Remember to deploy our application very easily.

We'll go back over to our terminal.

We will open up a second terminal window and then change back into our card's project directory.

And then once we are inside there we can run the now command number that now is a command line tool

that we installed on the last application when you first deploy or run.

Now it's going to take a minute or two to deploy the thing.

Me I deployed this application right before this video so you'll see that for me it finishes up in like

three seconds.

I had just deployed it and I haven't made any changes since then for you make sure you run that command.

And while that thing is running let's talk about some of the really important things we covered inside

this application.

The first important thing we discussed was component creation remember any time that you feel like you're

about to have to duplicate some HMO that is generally a sign that you might want to create a new component.

Whenever we create a component we're going to use that energy generate Component Command at our command

line.

We're going to execute that inside of our project directory when we create a angular component.

We generally try to reuse it as many times as possible in the same application all angular apps in general

are made of different components.

And finally last important thing that I really want you to be aware of is that Einstein we want to display

a component on the screen.

You have two nested inside of another.

In our case when we first generated our project the app was already visible on the screen.

So in order to show the card component we had to nest the card inside the app the next big thing we

discussed was CSX scoping the remember inside of our project.

We always get that Stiles dot CSX file.

We put global styling inside there if we ever want to style elements that are created by one particular

element or one particular component.

And we're gonna place that styling inside of the accompanying component Nazi SS file.

We really ran into that right away with our app component and the card component.

Remember our application first looked like this right here.

We had placed everything inside of the app component template file.

We then extracted a lot of that each team fell into the card template file and as soon as we did so

the SS we had written out inside of the app CSF file did not work anymore.

And that's because the CSC CSX we place inside of here is not going to reach across and affect that

other component.

This right here does not happen.

We had to move our CSX over to the card components the CSX file okay.

So now the next big thing we discussed was input binding.

This is where we communicate from a parent element to a child component.

So when we make use of input binding we went through these five steps right here.

Most important step to keep in mind and this is the one that you're probably going to miss as you start

to work on your own applications is to make sure that you go through step number four.

That is where you open up the child components class file and add in the input property decorator that

was inside of our card component but the s file.

This right here remember we refer to this as a decorator the special little bit syntax we're going to

discuss in the next section.

Yes we're finally there we're going to start to talk about typescript so when we make use of the input

decorator that tells angular that this property is going to be set by the parent component it is showing

the card component nonetheless a really big thing that we discussed after input binding was the energy

or directive that we saw that inside of our app component template right here.

Remember we have energy for that is another structural directive that is built into angular and we use

it ain't how we want to iterate over some array of properties some object strings numbers whatever else

we make use of energy for this element right here that energy is placed on is going to be duplicated

once for every element inside of that post array you then get access to the post variable which we can

refer to inside of the app Card element directly we can pull properties off their or do whatever else

we want to do right now at this point if you go back over to your terminal hopefully you will see that

your application is deployed you can take that link right there open it up inside your browser and that

is our deployed application we can share that link with our friends and have them check out what we've

built so far okay.

Now we've got this put together quick pause and let's get started on our next application in the next

video.