చూపుట మాత్రమే
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.

ఈ అపోహింగ్‌ను (స్వయంలేని పద గుర్తింపు) సంప్రదాయం (ఆఫ్యుటికల్ ప్రసంగ గుర్తింపు) రూపొందించారు. దోషములు వుండు. ఫార్మేట్‌ను సంక్లిష్టమైన ఆడియోకు వ్యతిరేకంగా నిర్ధారించండి. AI విధానము

❤️ ప్రేమ STT.ai? మీ స్నేహితులకు చెప్పండి!
సారాంశం
ఈ పిక్సెస్ యొక్క యాక్సెస్‌బిలిటి సంగ్రహం ఉద్భవించుటకు కాంక్వెరర్‌ను నొక్కుము.
పరిగణనలోకి...
ఈ రిపోర్టు గురించి AI ను అడుగుము
ఈ అస్థికల పేటిక గురించి ఏమైనా అడగండి —⁠ ఏ.