All language subtitles for 2. Intro - Our First App

Now that we've gotten some administrative stuff out of the way we can start to discuss angular.

The most common question I get about angular is what is the best way to learn it.

Well the very best way to learn angular is to use it.

In other words to write code and build applications.

That's how we're going to start off this course in this very first video we're going to build an entire

little angular application.

This is going to be a pretty simple and straightforward app.

We're going to build all of it inside of this one single video.

Let's first discuss exactly what we're going to build all right.

Here we go.

Here's a quick little mockup.

We're going to be making a tool that is going to take some English text that these are enters into a

text input right here.

Then whenever the user clicks on this translate button we're going to take that English text translated

into Spanish and then show the results on the screen.

This is going to work with any type of English text so we can put in any English word any sentence any

phrase in our application will take whatever that text is and translate it into Spanish.

Now as you would guess you and I are not going to actually be responsible for the English to Spanish

translation.

We're going to use an outside service for that.

So you and I are really just gonna be focused on creating this form showing a button a text input taking

some text and then handling the actual kind of like handoff of that text to some translation service

and showing the result on the screen for this very first application.

We're going to be using an online I.D. or an online code editor.

I've already put together a little online or a pre created Project.

You can see a link to it right here on the screen.

We're going to use this as our starting point because I've added in a little starter code to it.

This you know this is the only app inside this course where we're going to use an online IDC every other

app that we work on is going to be done on your local machine.

The last thing I want to mention before we start writing some code is that we're going to go through

this application very very quickly.

In other words we're going to write out code as quickly as we possibly can.

And I'm not going to give you a lot of explanation about what is going on.

Instead we're just going to try to finish up our application will then take a quick pause.

We'll come back the next video and I'll give you a really big in-depth talk about all the code that

we just authored okay.

So then mind let's get to it.

I'm going to take this link right here.

Make sure you do the same you're going to take that link and we're going to visit it inside of our browser

and right away we're going to be presented with an open file and on the right hand side you're going

to see a little preview of our application on the left hand side you'll see a bunch of different files

and folders that have already been created these files and folders are a starter angular application

you're going to eventually get really familiar about everything that's going on inside of here.

Well once again right now we're just gonna write out some code pretty much as quickly as we can.

To get started I'm going to find a folder called s RC on the left inside.

Inside there is a folder called app.

I'll open that up and then inside there I'll find a file called app dot component dot t s you should

see something like this right here.

We're gonna first write a little bit of code into this class that you see at the very bottom.

I know that there's probably a lot of syntax inside of here that doesn't look like typical javascript

at all.

Again don't sweat it where it's going to add in some code really quickly and then come back and discuss

what is going on inside here.

All right.

So inside of this class called app component I'm going to give myself a little bit of space at the very

top and I'm going to put in to instance variable declarations mean to say text woollen string then translated

text open string.

Make sure that you've got a colon in between both these little declarations.

You should not have an equal sign anywhere inside there next up.

Right underneath the constructor I can give myself a little bit more space and I'm going to add in a

method called submit then inside the submit method.

We're going to call a translation service that's going to take whatever text got entered by the user

and turn it into Spanish automatically we're going to write out this dot translate service translate

I'm going to pass in this dot text then chain on a little method call you subscribe

into subscribe which is a function as well I'm going to pass in a callback function that callback function.

So notice I've got an arrow function inside of here is going to be called with something that we will

refer to as results and then inside of the callback function we'll say this dot translated text equals

results and this little bit of code right here is kind of complicated so double check your spelling

make sure you've got the same syntax as what I have if you're seeing any air right now I can guarantee

you that the air is coming from something going wrong either in the block of code that we just added

right here or at the block of code to be added right here once you've added that all in let's say this

file can go to File Save going to open up my folder Explorer on the left hand side again this time we're

going to open up the app component that each team will file inside of here.

You're going to see a little div.

And as you would guess the div right here is what we see on the preview window on the far right hand

side we're going to replace this div right here with a little bit of markup that's going to show the

actual form and some content the user gonna highlight that div and delete it.

I'm gonna put together some each team l that's going to essentially show this kind of stuff right here.

So probably a label a text input a button and so on they'll place a label in here that says enter English

a place and input it has a class of input.

Now the only reason I'm adding in that class right there is to just get a little bit of styling and

here's gonna be just a little bit of strange syntax.

Again we're going to discuss all this stuff very shortly so bear with me for just a moment right after

that class.

We're gonna put in a set of parentheses inside of it.

We're gonna put the word input then outside of the parentheses we'll say equals double quotes X equals

dollar sign event target not value and then outside those double quotes are going to close off that

input element like so.

All right just a little bit more right after the button elements or seeing the input element I'm going

to place a button with the class of button and once again we're going to use a little bit of strange

syntax like we just had up there on the input element.

I'll put inside of a set of parentheses the word click equals.

And again with double quotes submit I'm going to put some parentheses after submit as though I were

calling it like a function I'll then close off the button element and put some text inside of it it

says about translate like so and finally underneath all that I'm going to show in each one and this

is where we're going to display the translated Spanish text inside this H1 I'm going to put in two sets

of curly braces.

Notice I've got two opening and two closing in inside of that I'll say translated XT.

All right.

So believe it or not that is it.

That is all the code we have to write to implement this very simple application.

I'm going to say for probably the fourth time inside this video I know a lot of what we just wrote is

pretty crazy but we're going to discuss exactly what we did in just a moment right now.

Let's make sure that our application actually works inside this form.

I can type in our you translate and I get a result right here in Spanish.

I can do any type of English phrase I want like I am going to learn angular translate and there we go.

Now if you don't see a result like this I can guarantee you that you've got a typo either inside of

this app component of each email file or inside the app component dot t s file one of the two a 100

percent guarantee that the app is not working there is a typo in one of the two files if you can't find

that typo that is totally fine.

Hop over to the Q A attached to this lecture so there's a Q A Discussion section and just post your

code out of these two files over there and I'll help you figure out exactly what is going wrong.

All right.

So this is a fun little application.

So as I've mentioned four times now let's take a quick pause we're gonna come back the next video and

discuss all the code that we just put together and get a big overview on angular in general.