7_editing_first_app

0:01

S… Speaker 2 (7_editing_first_app)

In the last lecture,

0:03

S… Speaker 1 (7_editing_first_app)

we created our first Angular app,

0:05

S… Speaker 1 (7_editing_first_app)

but we haven't changed anything there.

0:06

S… Speaker 1 (7_editing_first_app)

So time to do that.

0:08

S… Speaker 1 (7_editing_first_app)

And for that,

0:09

S… Speaker 1 (7_editing_first_app)

you need an IDE or editor where you can write and edit your code.

0:13

S… Speaker 1 (7_editing_first_app)

Now I'm using WebStorm here.

0:15

S… Speaker 1 (7_editing_first_app)

WebStorm is a great IDE,

0:17

S… Speaker 1 (7_editing_first_app)

great for Angular development,

0:19

S… Speaker 1 (7_editing_first_app)

but it's not free.

0:20

S… Speaker 1 (7_editing_first_app)

A great free alternative would be Visual Studio Code,

0:24

S… Speaker 1 (7_editing_first_app)

which you can find on code .visualstudio .com.

0:27

S… Speaker 1 (7_editing_first_app)

This is a great IDE and it is free.

0:29

S… Speaker 1 (7_editing_first_app)

You can simply download and install it,

0:31

S… Speaker 1 (7_editing_first_app)

both for Mac and Windows.

0:32

S… Speaker 1 (7_editing_first_app)

And then you can start developing Angular with that.

0:36

S… Speaker 1 (7_editing_first_app)

Whichever IDE or editor you install,

0:39

S… Speaker 1 (7_editing_first_app)

you'll always have to open a new folder.

0:42

S… Speaker 1 (7_editing_first_app)

In WebStrom case,

0:44

S… Speaker 1 (7_editing_first_app)

it's just called Open.

0:46

S… Speaker 1 (7_editing_first_app)

And then simply navigate to the folder you created.

0:49

S… Speaker 1 (7_editing_first_app)

So in my case here,

0:51

S… Speaker 1 (7_editing_first_app)

it's my first app.

0:52

S… Speaker 1 (7_editing_first_app)

Select that folder and open it.

0:54

S… Speaker 1 (7_editing_first_app)

And now it will load that folder and all the files into the IDE on

0:58

S… Speaker 1 (7_editing_first_app)

your system.

0:59

S… Speaker 1 (7_editing_first_app)

So in my case,

1:00

S… Speaker 1 (7_editing_first_app)

it now looks like that.

1:02

S… Speaker 1 (7_editing_first_app)

Now this is the project loaded into the IDE.

1:05

S… Speaker 1 (7_editing_first_app)

Now it's still indexing it here,

1:07

S… Speaker 1 (7_editing_first_app)

but it'll be done in a second.

1:09

S… Speaker 1 (7_editing_first_app)

And these are all the folders and files the Angular CLI

1:13

S… Speaker 1 (7_editing_first_app)

created for you.

1:13

S… Speaker 1 (7_editing_first_app)

This is your entire Angular project.

1:15

S… Speaker 1 (7_editing_first_app)

Now,

1:16

S… Speaker 1 (7_editing_first_app)

as I said, this might look intimidating because you got so many files

1:20

S… Speaker 1 (7_editing_first_app)

in there.

1:21

S… Speaker 1 (7_editing_first_app)

Most of these files are just doing some configuration work and you don't really need to touch

1:25

S… Speaker 1 (7_editing_first_app)

them. One interesting file is the package .json file.

1:28

S… Speaker 1 (7_editing_first_app)

Here you can see all the dependencies of your project like Angular 6.

1:32

S… Speaker 1 (7_editing_first_app)

And these are these third party packages your project

1:36

S… Speaker 1 (7_editing_first_app)

needs to run correctly.

1:37

S… Speaker 1 (7_editing_first_app)

All dev dependencies are only required for development for this build

1:41

S… Speaker 1 (7_editing_first_app)

workflow I was talking about.

1:43

S… Speaker 1 (7_editing_first_app)

but we're here to edit our code right so let's jump into the source

1:47

S… Speaker 1 (7_editing_first_app)

folder because that is where our code is e2e is for end -to -end testing we'll

1:51

S… Speaker 1 (7_editing_first_app)

ignore this and node modules is where all these dependencies you see in the package .json

1:56

S… Speaker 1 (7_editing_first_app)

file actually were installed but we're interested in the source code so let's

2:00

S… Speaker 1 (7_editing_first_app)

go to source then we got a bunch of other configuration files and

2:04

S… Speaker 1 (7_editing_first_app)

then here we got this app folder and in this app folder we

2:08

S… Speaker 2 (7_editing_first_app)

see some other files

2:10

S… Speaker 1 (7_editing_first_app)

of course i'll dive into what they all do in detail in this course and

2:14

S… Speaker 1 (7_editing_first_app)

for now let's open the app component html file and here we

2:18

S… Speaker 1 (7_editing_first_app)

indeed see something which looks deceivingly like what we saw in the browser

2:23

S… Speaker 1 (7_editing_first_app)

do you remember it's welcome to app and so on we

2:27

S… Speaker 1 (7_editing_first_app)

see that here too

2:28

S… Speaker 2 (7_editing_first_app)

By the way,

2:29

S… Speaker 1 (7_editing_first_app)

make sure you keep that localhost 4002 process running.

2:33

S… Speaker 1 (7_editing_first_app)

So that ng -surf process you started here in the terminal.

2:37

S… Speaker 1 (7_editing_first_app)

Make sure to keep that running.

2:38

S… Speaker 1 (7_editing_first_app)

If you're done with development for the day,

2:40

S… Speaker 1 (7_editing_first_app)

you can quit it with control C and you'll get out of there.

2:43

S… Speaker 1 (7_editing_first_app)

But as long as you are developing,

2:45

S… Speaker 1 (7_editing_first_app)

you should keep it running because it will automatically watch your files and

2:49

S… Speaker 1 (7_editing_first_app)

rebuild your project whenever you change and save something.

2:52

S… Speaker 1 (7_editing_first_app)

Now, since I quit it,

2:54

S… Speaker 1 (7_editing_first_app)

I'll need to restart it.

2:55

S… Speaker 1 (7_editing_first_app)

And I will actually restart it here.

2:57

S… Speaker 1 (7_editing_first_app)

In my IDE,

2:58

S… Speaker 1 (7_editing_first_app)

there's a built -in terminal,

2:59

S… Speaker 1 (7_editing_first_app)

but it's the normal system terminal.

3:01

S… Speaker 1 (7_editing_first_app)

So here I can also run ng -surf to bring that back up.

3:04

S… Speaker 1 (7_editing_first_app)

But back to the app component HTML file,

3:06

S… Speaker 1 (7_editing_first_app)

we're outputting something here.

3:08

S… Speaker 1 (7_editing_first_app)

And if we change anything here like,

3:10

S… Speaker 2 (7_editing_first_app)

hi,

3:12

S… Speaker 1 (7_editing_first_app)

this is instead of welcome to,

3:15

S… Speaker 1 (7_editing_first_app)

and we save that with ng -surf running,

3:18

S… Speaker 1 (7_editing_first_app)

if you go back,

3:19

S… Speaker 1 (7_editing_first_app)

you see it automatically updated,

3:21

S… Speaker 1 (7_editing_first_app)

hi,

3:22

S… Speaker 1 (7_editing_first_app)

this app.

3:23

S… Speaker 1 (7_editing_first_app)

Now, one strange thing we see is that this app here,

3:27

S… Speaker 1 (7_editing_first_app)

well,

3:28

S… Speaker 1 (7_editing_first_app)

we actually only see these curly braces and title in the app

3:32

S… Speaker 1 (7_editing_first_app)

component HTML file.

3:34

S… Speaker 1 (7_editing_first_app)

And therefore,

3:35

S… Speaker 1 (7_editing_first_app)

we can already see some of the work Angular does here.

3:38

S… Speaker 1 (7_editing_first_app)

Angular is,

3:39

S… Speaker 1 (7_editing_first_app)

of course, not a tool to allow us to write static HTML files.

3:43

S… Speaker 1 (7_editing_first_app)

We would need no framework for that.

3:45

S… Speaker 1 (7_editing_first_app)

It allows us to mix static HTML code and

3:50

S… Speaker 1 (7_editing_first_app)

dynamic things we want to output in that code.

3:52

S… Speaker 1 (7_editing_first_app)

And actually,

3:53

S… Speaker 1 (7_editing_first_app)

what we have here is one of these components Angular works with,

3:56

S… Speaker 1 (7_editing_first_app)

the app component.

3:58

S… Speaker 1 (7_editing_first_app)

A component always has a template,

4:01

S… Speaker 1 (7_editing_first_app)

the HTML code.

4:02

S… Speaker 1 (7_editing_first_app)

possibly has some stylings in the CSS file,

4:05

S… Speaker 1 (7_editing_first_app)

though it's empty here,

4:06

S… Speaker 1 (7_editing_first_app)

as you can see.

4:06

S… Speaker 1 (7_editing_first_app)

And importantly,

4:08

S… Speaker 2 (7_editing_first_app)

it has a TypeScript file.

4:09

S… Speaker 1 (7_editing_first_app)

If we enter this,

4:11

S… Speaker 1 (7_editing_first_app)

this is TypeScript.

4:12

S… Speaker 1 (7_editing_first_app)

And this is now the definition of the component.

4:15

S… Speaker 1 (7_editing_first_app)

This is what will be converted to normal JavaScript by the build workflow.

4:19

S… Speaker 1 (7_editing_first_app)

And in this file,

4:21

S… Speaker 1 (7_editing_first_app)

we see a couple of interesting things like add component.

4:23

S… Speaker 1 (7_editing_first_app)

I'll come back to that and what in detail is happening here in the next module.

4:27

S… Speaker 2 (7_editing_first_app)

We also see title equals app.

4:30

S… Speaker 2 (7_editing_first_app)

Now,

4:30

S… Speaker 2 (7_editing_first_app)

what's that?

4:32

S… Speaker 1 (7_editing_first_app)

If we go back to the app component HTML file,

4:35

S… Speaker 2 (7_editing_first_app)

we also saw a title here,

4:37

S… Speaker 1 (7_editing_first_app)

right? Between the curly braces.

4:38

S… Speaker 1 (7_editing_first_app)

So an assumption would be that the title

4:42

S… Speaker 1 (7_editing_first_app)

in the TypeScript file is related to that.

4:44

S… Speaker 2 (7_editing_first_app)

So let's maybe change this to my app.

4:48

S… Speaker 1 (7_editing_first_app)

And now if we save this,

4:49

S… Speaker 1 (7_editing_first_app)

it recompiles.

4:51

S… Speaker 1 (7_editing_first_app)

And if we go back,

4:51

S… Speaker 2 (7_editing_first_app)

we see, hi,

4:52

S… Speaker 2 (7_editing_first_app)

this my app.

4:54

S… Speaker 2 (7_editing_first_app)

Now this might not be perfect English,

4:56

S… Speaker 1 (7_editing_first_app)

but we can definitely see that something changed.

5:00

S… Speaker 1 (7_editing_first_app)

The so -called data binding in action.

5:02

S… Speaker 1 (7_editing_first_app)

Of course,

5:02

S… Speaker 1 (7_editing_first_app)

all the concepts will dive in deeply in this course.

5:05

S… Speaker 1 (7_editing_first_app)

And this is how we can output dynamic content.

5:09

S… Speaker 1 (7_editing_first_app)

And this could,

5:10

S… Speaker 1 (7_editing_first_app)

of course, be content that is calculated dynamically or retrieved from a server in

5:14

S… Speaker 1 (7_editing_first_app)

our HTML code.

5:15

S… Speaker 2 (7_editing_first_app)

Now,

5:16

S… Speaker 1 (7_editing_first_app)

interesting, if we right click on the loaded page and inspect the

5:20

S… Speaker 1 (7_editing_first_app)

page source.

5:22

S… Speaker 1 (7_editing_first_app)

We don't actually see that code there.

5:24

S… Speaker 1 (7_editing_first_app)

We just see a bunch of script imports at the bottom.

5:27

S… Speaker 1 (7_editing_first_app)

That is our build code and the Angular framework code.

5:30

S… Speaker 1 (7_editing_first_app)

The head tag here.

5:33

S… Speaker 1 (7_editing_first_app)

And then this strange app root part.

5:36

S… Speaker 1 (7_editing_first_app)

Now app root is also something we see

5:40

S… Speaker 1 (7_editing_first_app)

in the app component TypeScript file.

5:42

S… Speaker 1 (7_editing_first_app)

Here,

5:43

S… Speaker 1 (7_editing_first_app)

the selector.

5:44

S… Speaker 1 (7_editing_first_app)

So it looks like this is basically like our own HTML tag

5:48

S… Speaker 1 (7_editing_first_app)

we're creating.

5:49

S… Speaker 1 (7_editing_first_app)

And that's indeed what's happening here.

5:51

S… Speaker 1 (7_editing_first_app)

The page we're viewing here to which the source belongs actually

5:55

S… Speaker 1 (7_editing_first_app)

is this index .html file in the source folder.

5:58

S… Speaker 1 (7_editing_first_app)

Here we also see app root.

6:00

S… Speaker 1 (7_editing_first_app)

The script imports are missing because they are injected dynamically.

6:04

S… Speaker 1 (7_editing_first_app)

Now, what Angular does in the end is we always load this page,

6:08

S… Speaker 1 (7_editing_first_app)

then we have these dynamically injected script imports and these script

6:12

S… Speaker 1 (7_editing_first_app)

imports will dynamically replace app root with our own component.

6:16

S… Speaker 1 (7_editing_first_app)

And of course,

6:17

S… Speaker 1 (7_editing_first_app)

we can have more than one component in Angular apps.

6:19

S… Speaker 1 (7_editing_first_app)

Again, these are all things we'll dive into in this course.

6:22

S… Speaker 1 (7_editing_first_app)

Now that's all nice.

6:23

S… Speaker 1 (7_editing_first_app)

Let's do something more fancy.

6:25

S… Speaker 1 (7_editing_first_app)

Let's change title dynamically.

6:26

S… Speaker 1 (7_editing_first_app)

So back in the app component,

6:28

S… Speaker 1 (7_editing_first_app)

I'll actually get rid of the entire code in here and I'll add an input instead,

6:32

S… Speaker 1 (7_editing_first_app)

a normal HTML input,

6:34

S… Speaker 1 (7_editing_first_app)

type text.

6:34

S… Speaker 1 (7_editing_first_app)

Below that,

6:36

S… Speaker 1 (7_editing_first_app)

I'll add a paragraph where I want to output,

6:38

S… Speaker 1 (7_editing_first_app)

let's say a name.

6:39

S… Speaker 1 (7_editing_first_app)

Now name is not something we defined yet.

6:42

S… Speaker 1 (7_editing_first_app)

We'll do so in a second.

6:43

S… Speaker 1 (7_editing_first_app)

Let's go to app component and let's change title to name and

6:47

S… Speaker 1 (7_editing_first_app)

I'll say max here because that is my name.

6:49

S… Speaker 1 (7_editing_first_app)

And if I save that,

6:50

S… Speaker 1 (7_editing_first_app)

I go back.

6:52

S… Speaker 1 (7_editing_first_app)

We see the input and we see the name.

6:54

S… Speaker 1 (7_editing_first_app)

Now I want to be able to enter something in the input and automatically change the

6:58

S… Speaker 1 (7_editing_first_app)

name. We can do this with a tool provided by Angular,

7:02

S… Speaker 1 (7_editing_first_app)

a so -called directive,

7:03

S… Speaker 1 (7_editing_first_app)

which is called ng -model.

7:05

S… Speaker 1 (7_editing_first_app)

Now you'll learn the exact syntax throughout the course.

7:07

S… Speaker 1 (7_editing_first_app)

For now, let's simply add square brackets,

7:10

S… Speaker 1 (7_editing_first_app)

parentheses,

7:10

S… Speaker 1 (7_editing_first_app)

ng -model,

7:12

S… Speaker 1 (7_editing_first_app)

written like that.

7:13

S… Speaker 1 (7_editing_first_app)

Make sure to get the casing correct.

7:15

S… Speaker 1 (7_editing_first_app)

There is no dash in between or anything like that.

7:17

S… Speaker 1 (7_editing_first_app)

So ng -model in square brackets and parentheses,

7:21

S… Speaker 1 (7_editing_first_app)

on the input and set it equal to name.

7:24

S… Speaker 1 (7_editing_first_app)

So to the same name you're outputting here.

7:26

S… Speaker 1 (7_editing_first_app)

Now this is so -called directive and what it does is it basically

7:30

S… Speaker 1 (7_editing_first_app)

tells Angular to listen to anything you enter here

7:35

S… Speaker 1 (7_editing_first_app)

and store it in this name property,

7:38

S… Speaker 1 (7_editing_first_app)

in this name model,

7:39

S… Speaker 1 (7_editing_first_app)

but also on the other hand,

7:41

S… Speaker 1 (7_editing_first_app)

output the value of the name model in this input.

7:44

S… Speaker 1 (7_editing_first_app)

This is what we're doing here.

7:46

S… Speaker 2 (7_editing_first_app)

Now,

7:47

S… Speaker 1 (7_editing_first_app)

if we save this,

7:51

S… Speaker 1 (7_editing_first_app)

we don't see anything on the page and if we open the developer tools

7:56

S… Speaker 1 (7_editing_first_app)

which you can simply do from the menu or with the shortcut.

7:59

S… Speaker 1 (7_editing_first_app)

You reach it under view,

8:01

S… Speaker 1 (7_editing_first_app)

developer,

8:02

S… Speaker 1 (7_editing_first_app)

developer tools in Chrome.

8:04

S… Speaker 1 (7_editing_first_app)

And I strongly recommend using Chrome for this course since it has the best developer

8:08

S… Speaker 1 (7_editing_first_app)

tools.

8:08

S… Speaker 1 (7_editing_first_app)

So then we see here in the console part,

8:11

S… Speaker 1 (7_editing_first_app)

there's an error.

8:12

S… Speaker 1 (7_editing_first_app)

Can't bind to ng -model since it isn't a known property of input.

8:16

S… Speaker 1 (7_editing_first_app)

So somehow Angular doesn't understand ng -model.

8:19

S… Speaker 1 (7_editing_first_app)

Now that's strange because I said it's built in,

8:21

S… Speaker 1 (7_editing_first_app)

right? Angular is actually split up into multiple modules.

8:25

S… Speaker 1 (7_editing_first_app)

sub packages,

8:26

S… Speaker 1 (7_editing_first_app)

you could say.

8:27

S… Speaker 1 (7_editing_first_app)

And we need to add them if you want to use a certain feature from

8:31

S… Speaker 1 (7_editing_first_app)

them. And in this course,

8:32

S… Speaker 1 (7_editing_first_app)

you will learn about the different packages and which features they contain.

8:35

S… Speaker 1 (7_editing_first_app)

To add such a feature,

8:37

S… Speaker 1 (7_editing_first_app)

we go to that other file we haven't had a look at yet,

8:39

S… Speaker 1 (7_editing_first_app)

the app module.

8:40

S… Speaker 1 (7_editing_first_app)

This is basically where we tell Angular which pieces belong

8:44

S… Speaker 1 (7_editing_first_app)

to our app.

8:45

S… Speaker 1 (7_editing_first_app)

And there we have to add something to imports to import another package

8:50

S… Speaker 1 (7_editing_first_app)

from Angular.

8:51

S… Speaker 1 (7_editing_first_app)

So we need to import it at the top of the file first because TypeScript always

8:55

S… Speaker 1 (7_editing_first_app)

needs to know where things are.

8:56

S… Speaker 1 (7_editing_first_app)

So we import something from,

8:59

S… Speaker 1 (7_editing_first_app)

and then it's at angular slash forms.

9:02

S… Speaker 1 (7_editing_first_app)

This is one other package from the Angular framework.

9:05

S… Speaker 1 (7_editing_first_app)

And from that package,

9:07

S… Speaker 1 (7_editing_first_app)

we can import the forms module written like this.

9:10

S… Speaker 1 (7_editing_first_app)

So make sure to add this import.

9:12

S… Speaker 1 (7_editing_first_app)

This is not an Angular feature,

9:14

S… Speaker 1 (7_editing_first_app)

but a TypeScript feature.

9:15

S… Speaker 1 (7_editing_first_app)

As I said,

9:16

S… Speaker 1 (7_editing_first_app)

TypeScript needs to know where the things are.

9:19

S… Speaker 1 (7_editing_first_app)

But now with that imported,

9:20

S… Speaker 1 (7_editing_first_app)

we can add it to this imports array down here,

9:23

S… Speaker 1 (7_editing_first_app)

which is not related to the imports up there.

9:25

S… Speaker 1 (7_editing_first_app)

This is simply a feature understood by Angular,

9:28

S… Speaker 1 (7_editing_first_app)

since it's part of an Angular module.

9:30

S… Speaker 1 (7_editing_first_app)

And now it tells Angular that we want to import some forms features.

9:35

S… Speaker 1 (7_editing_first_app)

And this directive we're using is such a form feature.

9:38

S… Speaker 1 (7_editing_first_app)

So now if we save that,

9:40

S… Speaker 1 (7_editing_first_app)

our app will rebuild.

9:43

S… Speaker 1 (7_editing_first_app)

And once it is done,

9:44

S… Speaker 1 (7_editing_first_app)

we can go back and now we see our input and there's max inside of it.

9:48

S… Speaker 1 (7_editing_first_app)

And if I start typing there,

9:49

S… Speaker 1 (7_editing_first_app)

you see that the text below it automatically also updates.

9:54

S… Speaker 1 (7_editing_first_app)

This is some magic done by ng -model.

9:56

S… Speaker 1 (7_editing_first_app)

We'll dive much deeper into everything we learned here,

9:59

S… Speaker 1 (7_editing_first_app)

but this is now our first app with some changes.

7_editing_first_app

_Zvinyorwa

Ask AI About This Transcript