31e81947-5646-4259-9bc5-25bf7dc92e1b

0:01

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So we'll do a quick recap here.

0:03

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

This is the third day of Angular training.

0:06

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So we'll do a quick recap.

0:08

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Last week,

0:10

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

we talked about ECMAScript.

0:12

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

What are ECMAScript?

0:13

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Rules and guidelines for scripting language.

0:15

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Then we talked about Node .js.

0:18

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

What is the importance of Node .js?

0:20

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Node .js is basically used for JavaScript.

0:22

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It's basically a JavaScript runtime environment.

0:24

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It's a cross -platform environment.

0:26

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

You can run a JavaScript file without even the...

0:31

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

browser.

0:31

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Then what is NPM?

0:34

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

NPM is nothing but it's basically used to download the packages from the

0:38

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

repository and it also resource the interdependencies.

0:41

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Then we learned something about the TypeScript,

0:44

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

right?

0:44

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

How do we install TypeScript?

0:45

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

How do we run TypeScript and some concepts of TypeScript.

0:48

S… Speaker 2 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Okay.

0:48

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

How can we create classes and everything?

0:51

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And how can we set up these configurations in the TypeScript?

0:55

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Clear?

0:56

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Fine.

1:02

S… Speaker 4 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now,

1:03

S… Speaker 5 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

today,

1:05

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

What I'm going to do is we are going to talk about creating an

1:09

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Angular project.

1:10

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Let's understand a little bit about Angular

1:14

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

first of all.

1:15

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Last time,

1:17

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

we also talked about what is the importance of these frameworks.

1:20

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Why these frameworks are important today?

1:22

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Because we wanted to build enterprise -level applications.

1:27

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So for enterprise applications,

1:28

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

you cannot write a JavaScript code by yourself.

1:31

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It's not going to be maintainable.

1:33

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I mean, you cannot maintain that.

1:34

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So you need to have a kind of a framework which can do a lot of job,

1:37

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

which can take a lot of pain off from developer end,

1:41

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

and it can do that by itself.

1:43

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So that's where the Angular framework comes into picture.

1:47

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So it is majorly used for creating a single -page application,

1:50

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

and it believes in writing the declarative statements than the imperative statements.

1:53

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I'll show you what does that mean.

1:57

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So now what I'm going to do here is I'm going to create

2:01

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

a new project here.

2:02

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So I'll just create

2:07

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

a Angular app.

2:09

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I think it's that we have it.

2:11

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Yeah.

2:12

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Okay.

2:12

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I'll be creating an Angular app here itself in this one.

2:15

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So

2:20

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

let me just open the folder and here

2:26

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I'll be creating a Angular folder.

2:27

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Okay.

2:37

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So now we are going to.

2:40

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

First of all,

2:41

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

understand what is required for creating any Angular application.

2:45

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

The first requirement for creating an Angular application is you

2:49

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

need to have Angular CLI installed.

2:51

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Angular CLI.

2:53

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now, what is Angular CLI?

2:55

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

The full form of CLI is command line interface.

2:59

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Correct?

3:01

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So,

3:02

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

the major job of this CLI is to create,

3:07

S… Speaker 5 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

build,

3:09

S… Speaker 5 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

compile,

3:10

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

and

3:15

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

build.

3:16

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Run.

3:16

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

For run,

3:17

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

we use a term called as a serve.

3:18

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

The Angular app.

3:22

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So what it provides is it provides some commands

3:26

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

through which I can create an application which creates a scaffolding for us.

3:29

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Scaffording in the sense it will create a structure,

3:32

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

a template, basic template for your project.

3:34

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Building your applications,

3:36

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

it will compile as well and it will serve.

3:37

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It will run the application as well.

3:39

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So that all thing it can be done through this Angular CLI.

3:43

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And another important is I can create.

3:47

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

any files required.

3:50

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

When I say any files,

3:51

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I'm talking about creating components.

3:55

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

We'll talk about these terms,

3:57

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

directives,

3:58

S… Speaker 5 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

pipes,

3:59

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

services,

4:02

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

classes,

4:03

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

everything.

4:04

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I can do it with this command.

4:05

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I don't have to write myself everything.

4:08

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I'll just write one command and it will create that files for me.

4:11

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

That's majorly a purpose of CLI.

4:16

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Earlier in olden days,

4:18

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

we used to do that manually,

4:19

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

creating all that structure of project and everything.

4:22

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

But now, CLI does that all the job for us.

4:26

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now,

4:28

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

what I need is I need to install the CLI.

4:30

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

For installing the CLI,

4:31

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

there's a command,

4:33

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

npm install.

4:35

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

at the rate angular slash CLI.

4:37

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And now here I'm going to provide a version.

4:39

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So how can you check the versions,

4:42

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

guys?

4:42

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So whenever you want to install anything,

4:45

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

always keep in mind,

4:46

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

you just have to search for NPM

4:50

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

and then CLI,

4:51

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

let's say Angular CLI I'm searching.

4:52

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And here you can see all the versions of it.

4:55

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Correct?

4:57

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So always look for the LTS version.

4:58

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So I'm going to say,

5:00

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

17 .3 .8.

5:01

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

17 .3 .8.

5:03

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I want to install Angular CLI 17 .3 .8.

5:07

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Okay.

5:08

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So let's run this command.

5:09

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So I can open a terminal here.

5:13

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Everyone is aware,

5:15

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

right?

5:15

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

The terminal.

5:16

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

We have a terminal here.

5:17

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And here we are going to run that command.

5:20

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Oops,

5:22

S… Speaker 6 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

sorry. Slap.

5:24

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Okay.

5:26

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And you can run it globally as well or you can learn locally.

5:29

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So I'll just run it globally.

5:30

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Hyphen G.

5:31

S… Speaker 2 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Enter.

5:36

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So, it will take a little time to get an install.

5:38

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now, we are actually installing what?

5:40

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

We are installing CLI.

5:42

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

We are not creating yet the Angular project.

5:46

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So,

5:47

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

once the CLI is installed,

5:48

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

we are going to create the project.

5:50

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Again,

5:51

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

this is one -time job.

5:52

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

We don't have to do it every time,

5:54

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

the CLI.

5:55

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Done,

5:58

S… Speaker 6 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I think.

5:59

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So,

6:05

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

it should create a folder,

6:06

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

node models folder here.

6:08

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Not here.

6:11

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I mean, definitely in the users folder because this is hyphen G,

6:15

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

right, globally.

6:16

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Okay, so this is done.

6:17

S… Speaker 4 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now,

6:18

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

once you install the CLI,

6:19

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

guys, you will be able to run the command called as a ng.

6:22

S… Speaker 7 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It should work.

6:23

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I

6:27

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

think it's working.

6:28

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So it's taking time to show us some messages.

6:31

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Come

6:35

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

on. What's

6:39

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

wrong? ng.

6:43

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Yeah.

6:47

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Okay,

6:48

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

it's working.

6:49

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Okay,

6:50

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

so we have a CLI installed.

6:51

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I just checked the version.

6:52

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It's working for me.

6:54

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Clear?

6:54

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So the CLA is there.

6:56

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now we are going to create a project.

6:57

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So I'm going to say ng new and I'll give my project name as

7:01

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

let's say myproj.

7:02

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Okay.

7:03

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Myproj.

7:04

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And here I'm going to say hyphen hyphen skip

7:09

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

hyphen install.

7:10

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now what is this command used for?

7:13

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I'll tell you.

7:13

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So once I do this,

7:15

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

you will see there is a project which is getting created automatically inside this Angular

7:19

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

folder.

7:22

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now it is asking me some questions.

7:24

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It is asking me which CSS pattern you want to use it.

7:28

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So we can use a CSS.

7:30

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

We can use a LLS.

7:32

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And second question is it is asking me whether you want to use a rendering.

7:36

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I'll say no for now.

7:37

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

This is server side rendering.

7:39

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

That's it.

7:40

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Done.

7:47

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now the project which got

7:52

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

created here,

7:53

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

that project,

7:54

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

you can see the

7:59

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

project is over here.

8:00

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

This is my project folder where I'm having the project.

8:03

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Clear?

8:07

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Any questions here till now?

8:08

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

What

8:17

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

is server -side rendering?

8:18

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Server -side rendering is nothing but you can create your project

8:23

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

rendering from the server as well in Angular.

8:25

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I mean,

8:27

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

the rendering part can be done at the server level.

8:29

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

We'll not touch base on that right now.

8:31

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

We'll not focus on that right now.

8:33

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

We'll come to that later.

8:36

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Okay, so we have created the project.

8:38

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

The project structure is there.

8:39

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now, what is that importance of hyphen,

8:41

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

hyphen, skip, hyphen,

8:42

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

install?

8:42

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So when you say hyphen,

8:44

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

skip, hyphen, install,

8:45

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

what happens here is it is not going to install anything for

8:49

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

this project.

8:50

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I mean, it is going to just create the files,

8:52

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

but the actual packages required to run the project

8:56

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

is in this package .json,

8:58

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

and this is not yet installed.

8:59

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

This is not yet installed for me.

9:05

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Is it clear?

9:06

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So I have not installed that packages.

9:08

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So now how can I install that packages?

9:10

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

For installing that packages,

9:11

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

what I need to do is I need to just go here and say,

9:15

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I'll

9:19

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

just say cd myproj,

9:21

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

okay?

9:22

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And here I'll say npm install.

9:25

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now it will start installing the packages.

9:28

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Which packages it is going to install?

9:30

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

The packages which are mentioned in this file,

9:33

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

okay?

9:35

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

What is the use of package .json,

9:37

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

guys? The package .json is something NPM can understand.

9:40

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

NPM can read this file.

9:41

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I came into the root folder and I just ran this command.

9:45

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

What it will do is it will start installing all the packages which are available here.

9:48

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

There are two sections here.

9:51

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

If you observe dependencies and dev dependencies.

9:54

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

What is the difference between both of them?

9:57

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Dependencies are those.

10:00

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

which are required for your project to run on

10:05

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

the server.

10:06

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

For example,

10:07

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

when I want this application to be hosted on the server,

10:10

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

right, so in the build server where I want to build my application,

10:14

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

these all packages are required.

10:16

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Without that, my application will not work.

10:17

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

A very common example would be if I want to use a bootstrap in

10:22

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

my project, I will make sure that the bootstrap package is getting added here,

10:26

S… Speaker 5 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

comma,

10:26

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

and I'll add the bootstrap version.

10:29

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And the below version what you see here is are basically the dev dependencies.

10:33

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

What is dev dependencies?

10:35

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Dev dependencies are those which you need it only for your local

10:39

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

system.

10:39

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

These are not required for your application to run on

10:45

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

the server.

10:45

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It's basically like you want to just run it,

10:47

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

you want this in your local system.

10:49

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

For example,

10:50

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

if you observe, there is a TypeScript here.

10:52

S… Speaker 7 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

There is a CLI here.

10:54

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

There is something called Jasmine.

10:55

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Jasmine is nothing but your unit test framework.

10:57

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Karma is nothing but your unit test runner for running the Jasmine

11:02

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

code.

11:02

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

These are all you are required only for running in your local system.

11:07

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

For example,

11:09

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

this project, if I give it to someone else,

11:11

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

let's say I want to share it with someone else through the Git or something.

11:15

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

In that case,

11:18

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Maybe he's not having anything in his system.

11:20

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It's a blank system.

11:21

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Let's assume that there is nothing.

11:23

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

He's just having the node installed in the system.

11:25

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

There is no CLI,

11:26

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

nothing. In that case,

11:27

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

everything will get installed for him.

11:29

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

The typescript will get installed.

11:31

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

The CLI will get installed.

11:32

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

When he or she say npm install.

11:36

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Clear?

11:37

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So npm install is going to install all these

11:41

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

packages.

11:42

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

But when you're building the application,

11:43

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

the major packages which is required for your application to run are going to be in these

11:47

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

dependencies.

11:50

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Clear?

11:50

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So I'm just writing the steps here.

11:52

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So what is the next step we did here?

11:53

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

NG new project name.

11:57

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And then I said

12:01

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

hyphen skip.

12:02

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Again, if you don't use hyphen skip,

12:03

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

it is still fine.

12:04

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Okay.

12:06

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

If you want to use it,

12:07

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

you can use it.

12:07

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

But if you don't use it,

12:08

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

it's still okay.

12:08

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Then you will say CD my project

12:13

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

name.

12:14

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And then I'll

12:18

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

say NPM install.

12:20

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So all the installation will happen.

12:29

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now, let's understand.

12:30

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

This is clear everyone,

12:32

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

the package .json.

12:33

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now, let's understand the other files here.

12:34

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

The other files what you observe here is tsconfig .json.

12:39

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

This is definitely the configuration for running the TypeScript

12:44

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

code, to compile the TypeScript file.

12:46

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

If you observe here,

12:47

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

there are some settings like a target,

12:49

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

which is set as ES2022,

12:51

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

which is approximate ES12.

12:54

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

ES2022 is nothing but ES12.

12:59

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

They have set the target here,

13:00

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

rest all setting has already been done.

13:02

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

They have enabled strict mode and they have also said that

13:06

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

output should be go in this folder.

13:08

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Rest all are not important for me

13:12

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

right now, but these are something which you should be aware of.

13:15

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

At the same time,

13:18

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

you will also observe there are two more files,

13:20

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

tsconfig .app .json and tsconfig .spec

13:24

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

.json.

13:25

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

What is this?

13:26

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It is just an extended version of tsconfig.

13:29

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It's like inherited from tsconfig and it says that whenever you compile

13:33

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

the file, please compile main .ts.

13:35

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Please compile main .ts,

13:38

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

which is in my source folder.

13:40

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And when it comes to tsconfig,

13:43

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

it says that please compile everything which is having an extension called

13:47

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

as spec .ts.

13:49

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So whenever you see any file with the extension called as spec

13:53

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

.ts,

13:54

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

that those files are unit test files.

13:59

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Those are Jasmine unit test files.

14:01

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

When you write the unit test code,

14:04

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

you have to have these files created for unit testing.

14:07

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Rest all configuration is picked up from the main

14:12

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

config.

14:12

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Clear?

14:14

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Then comes another file,

14:18

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

package .log .json.

14:20

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now, what is the importance of package .log .json?

14:22

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now,

14:23

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

this file automatically gets created when you say npm

14:27

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

install.

14:29

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

This file gets created when you say NPM install.

14:31

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And what is there in this file?

14:33

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

This file consists of all the dependencies.

14:36

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So, for example,

14:37

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

if you say this package,

14:38

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

right? This package is not only a single package.

14:41

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It's a combination of 100,

14:43

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

200 different packages.

14:44

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

In fact,

14:45

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

you can see here.

14:46

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Here,

14:47

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

the list is like 15,

14:49

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

20 packages,

14:49

S… Speaker 8 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

correct?

14:50

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

But if you go and see the node modules,

14:52

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

this is approximately around 250 MB of folder.

14:57

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

If I check the size of the folder it is 250 MB and the file

15:00

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

could be around 30 ,000 maybe approximate.

15:04

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I'm just giving you approximate value,

15:06

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

30 ,000 plus files because these are actually the interdependencies of

15:10

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

packages which are getting downloaded.

15:12

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

The information about those packages are available in this

15:16

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

one, package .lock.

15:19

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Okay, so obviously you can see here,

15:21

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

it says that,

15:22

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

okay, I wanted to download,

15:24

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

let's take one of them.

15:25

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It is trying to download something called as a remapping.

15:28

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Maybe someone is using that,

15:30

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

but that remapping is having a dependency of some two more packages.

15:34

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So it will download that as well.

15:36

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So information about this package is also there somewhere.

15:38

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Correct?

15:39

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So that's why the file is very huge.

15:41

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And from where it is downloading,

15:44

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

that also is been provided here.

15:47

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It is downloading from the repository which is registry .npmjs

15:51

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

.org.

15:52

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

This is the repository from where you get the files.

15:55

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

The

16:02

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

packages are created.

16:03

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

You can see all the files and packages are inside this one.

16:06

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Again,

16:11

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

this file you don't have to touch it.

16:12

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

You can keep it as it is.

16:14

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And the next file you see here is angular .json.

16:17

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

This is very important file for the Angular CLI.

16:19

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Angular CLI can read this file.

16:22

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And what it says in this settings,

16:26

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

you will observe it says that my actual project is available

16:30

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

inside src

16:34

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

.main .ts.

16:36

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

This is my actual file which I want to compile.

16:40

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And which is the page I want to load it on the screen?

16:43

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It's index .html.

16:45

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

This is the file where I need to compile

16:49

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

and this is the index .html I want to run it.

16:51

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And where I have the project created?

16:55

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

SRC folder.

16:56

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So if you want to change the folder name here from SRC to something else,

16:59

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

make sure that you update it here as well.

17:01

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Clear?

17:04

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

So this is a build command for building your application.

17:07

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

These are settings which it will pick up.

17:10

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I'll come to this one.

17:11

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

These are basically when you want to have any external libraries or external JS

17:15

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

or external styles included as a part of your bundle or

17:19

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

the actual build,

17:21

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

you need to provide the path over here.

17:23

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

We'll come to that later.

17:25

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Same way you have a configuration for production as

17:29

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

well. When you build up for production,

17:30

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

please consider this configuration.

17:32

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And same way when you do a ng -serve,

17:35

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

it will pick up the development configuration first and then it will also run it.

17:40

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

You can see the settings.

17:41

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

You can read this information,

17:43

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

guys. It is very straightforward.

17:45

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It says that it can either run production or it can run development.

17:49

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Default is development.

17:50

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

That's why it will create a development version.

17:54

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Then for testing,

17:56

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

you have some testing related thing.

17:57

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

When you say ng -test,

17:59

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

this section will be picked.

18:01

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

When you say ng -serve,

18:02

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

this section will be picked.

18:03

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

When you say ng -build,

18:05

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

this section will be picked.

18:07

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

These are the configuration it will pick

18:11

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

up.

18:12

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

That's it.

18:13

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

This is what we have in the root folder and the actual project is nothing but in this SRC.

18:18

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Okay.

18:21

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Any questions?

18:22

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I'll just wait for any questions here.

18:25

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

No

18:32

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

questions?

18:32

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Cool.

18:35

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now the actual project you see here.

18:39

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now this is Angular 17.

18:42

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Guys, Angular 17 has a little change.

18:46

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Okay.

18:47

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I'll tell you what has been changed in Angular 17.

18:50

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

In Angular 17,

18:51

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

by default,

18:53

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

when you create a project,

18:54

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

the project gets created without module.

18:58

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Here you don't have a module.

19:01

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Let's understand one by one in this folder.

19:03

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

In this folder,

19:04

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

you will see you have an index .html wherein you see nothing,

19:07

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

just a tag called as approot.

19:10

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Just app root tag,

19:12

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

nothing, right?

19:13

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

And then you have something called as a main .ts,

19:15

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

where you see one line called as a bootstrap application.

19:18

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now,

19:20

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

this you will see in Angular 17 onwards.

19:22

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I'll show you another one with a module as well,

19:26

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

with a module how the project gets created.

19:28

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

In that,

19:29

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

you will see it will be a little bit different.

19:33

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

This is called as a module -less.

19:35

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

I'll tell you what you mean by module -less.

19:36

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Right now,

19:38

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

you will see there is index .html and then there you have a main .ts.

19:41

S… Speaker 3 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Now,

19:43

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

how the compilation will happen?

19:44

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

In compilation,

19:45

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

what will happen?

19:46

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It will actually compile this file.

19:48

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

This file is having a dependency of what?

19:50

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

A component called as a app component.

19:54

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

It is also picking some config from app .config.

19:57

S… Speaker 1 (31e81947-5646-4259-9bc5-25bf7dc92e1b)

Let's go where is this file.

31e81947-5646-4259-9bc5-25bf7dc92e1b

Περίληψη

Ρωτήστε τον Αλ γι' αυτό το σενάριο.