All language subtitles for 7. Angular vs JavaScript Design Patterns6

Now seeing three different ways of handling data inside of angular templates.

Now we're gonna start to take those ideas and apply them to our application and finish it up.

In this video I want to give you a quick overview of some of the design patterns so we're going to use

inside this application using those three different techniques.

Okay so quick diagram the first one.

Think about how we would tackle this application if we were using a traditional javascript only approach.

So in other words if we were just working with vanilla javascript if that was the case you would probably

have a user enter a password length the user would then select from checkbox like maybe in this case

include letters and then they would click on the Generate button and then in the javascript only approach

we would probably then run some code to take a look at that password length input and pull the value

out of it and pull the value of the three checkboxes generate random password and then throw the password

into the output input.

I know that's a confusing phrase right there.

I'm really just talking about this text and put down here at the very bottom.

Again this is the kind of approach you would take if you were writing normal javascript code.

Let's now compare that to how we're going to approach this with angular using those three different

pieces of syntax.

So here's the kind of angular approach so singular we're going to have a user entered a password link

as soon as they type something inside that text input.

We're going to run an event handler.

We're gonna set up an event handler on that text input.

Once that event handlers triggered we're going to take the value from that input and stored as a property

on our component class instance we're then going to repeat that same idea.

Those three different checkboxes and then eventually the user is going to click on the Generate button

when they click on that generic button that is once again going to trigger an event handler.

So inside that event handler we're going to generate our password using all the properties we had collected

earlier like up here when we got the different checkboxes and the password like that that point time.

We're then going to take the generated password assign it to a password property again on the component

class instance and that is going to cause an update of the output input.

This last step down here is very similar to the behavior we have right now where we click on the button

and then we see a value up here inside there their let's do a compare and contrast of this kind of JavaScript

style approach and the angular style approach and really understand what is different about them.

OK.

So in this diagram I know it's kind of small text and probably hard to read but we're only going to

look at it for a moment to the really important thing that I want to point out about angular that is

very different than traditional javascript.

Is that in a javascript world.

We wait for a user to undertake some action like say clicking on that generate button and then immediately

after it we go ahead and try to pull some data out of the Dom to do our actual calculation.

So it's then in other words kind of like user action then we spring into action and collect some data.

But in the end of the world we have a very different style.

As soon as the user starts entering data we start to read all that information right away and store

it on a component class instance.

Then whenever a user clicks on the Generate button we've already got all the data in hand that we need

that we'll do some final computation and then stick a final value back into the Dom.

That's a big difference between the traditional javascript approach and the angular approach.

Now that we understand the big difference between these two let's really focus on what we have to do

right now.

They're essentially saying that for all these different form inputs we're going to have to put together

an event handler to detect a change of say that password length input.

And we're also going to have to have a property on our component class instance that we can save whatever

the user entered and make use of it later on when the user clicks the Generate button thing for the

checkbox as well.

We need to make sure that we've got an event handler on the checkbox we need to make sure that we've

got a property on our component class instance that we can store that property value and then use it

later on when the user clicks on generates.

All right.

So that's the general idea here and we're going to be repeating the same pattern over and over and over

again for all of our angular applications that we've got a good idea of what's going on.

Well let's start to implement this in the next video.