Up next in 10
How to Create an Angular Project with Vite: Step-by-Step Guide for 2024
810 views
Nov 29, 2024
How to Create an Angular Project with Vite: Step-by-Step Guide for 2024 #Angular #Vite #AngularWithVite #FrontendDevelopment #WebDevelopment #AngularProject #ViteJS #JavaScript #CodingTutorial
View Video Transcript
0:00
hi friends welcome to T funny Channel
0:02
today I'm going to teach how to install
0:05
the angular using WID so first what
0:09
you're going to do is I'm going to go to
0:11
the Wi official
0:18
website okay I forgot to connect my
0:21
internet okay so official
0:24
website so get
0:27
started here this is the get start here
0:30
you can go
0:31
below so here there are many options are
0:34
there you install the WID so this is the
0:37
WID installation you click on this okay
0:40
so here go over here I'm going to make
0:43
the
0:45
file angular
0:49
project inside this here I'm going to
0:52
type
0:53
CMD open up the new command front paste
0:57
paste it command what is the what is the
0:59
command copy on the WID okay the WID you
1:03
copy PR key you write uh the project
1:08
name I'm going the first app first app
1:11
press ENT key project package name leave
1:14
as it is you have to press T key it
1:16
applied the default one press enter key
1:19
it ask the framework which you going to
1:22
select I'm going to select here from the
1:25
list you have to get the help from the
1:28
up and down k key key of your keyboard
1:31
you have to go below select the angular
1:34
select enter select angular that's
1:40
it so yes why you press yes it ask the
1:46
angular 19 CLA available so you press
1:51
yes so it is installing here you can you
1:55
can see the the pack all the packages
1:57
get installed
2:16
it is installed fast my internet
2:18
connection is little bit slow that's why
2:20
it take uh some time it is getting fast
2:24
if your internet connection is
2:28
fast now again it ask you're going along
2:31
with the CSS or SS SS CSS now I'm going
2:35
to select second option this one okay so
2:39
second option you have to select up and
2:42
down arrow second option this is advance
2:46
so here do you want to save rendering
2:49
I'm
2:57
no got to wait until the
3:01
in installation
3:06
complet now now you can see the all the
3:09
pack packages are installations
3:11
completed now let's go here here it's
3:13
completed so here I'm open up here this
3:16
all the your angular projects now I'm
3:19
going to go to go here I'm going to go
3:21
inside this folder you type c CD
3:26
first
3:28
app now here I'm going to type the
3:31
command uh I'm going to open up the app
3:34
for space. to open my project into VOD
3:39
editor okay this is our
3:46
project here is all the project s
3:48
angular
3:50
project this my this is your index file
3:53
single Ang a single application so the
3:56
no modules you'll be able to see the no
3:59
modules
4:00
all things are there the apps this is
4:03
the app component when the component
4:06
first loaded it loading in the app
4:08
component the main.
4:10
TSS the
4:11
file okay so it will be calling the
4:14
approv here okay so the appro which will
4:20
be building okay this is a first step
4:23
I'll give the name it will be the app
4:25
component this app component here this
4:27
app component okay this this app comp
4:29
component will
4:31
be applied here so this you go to the
4:33
package JSM this this are the required
4:36
dependen it will be uh installing you'll
4:38
be able to see you have to run the
4:40
command here in
4:42
Ser okay run the command so you have to
4:45
see the command which you be running so
4:47
here uh you type open up the new
4:51
terminal window you type in
5:09
yes yeah it's
5:12
simple it not it not take that much of
5:15
Comm time it will simply it will be
5:18
execute that it's building and execute
5:21
that rather than we are executing this
5:24
command over here you have executed this
5:27
command from it will be uh running very
5:30
fast so here it very fast copy
5:34
this paste on it
5:40
here the angular application is working
5:43
perfectly very well using the white
5:47
framewor okay so you have to do the
5:49
project using white it's very simple we
5:51
have installing our angular project
5:53
within the minute we are doing the
5:55
project here okay so is very simple we
5:58
have using the white
6:00
okay so if you want to I want to make up
6:03
this one HTML so I'm going to all the
6:06
codes are the codes okay so this a codes
6:09
now I'm going to go the appr you keep
6:12
only app outlet and you type HTML I'm
6:17
going to H1 tag
6:20
hello my first step my first step First
6:26
Step contr s to save re build app or you
6:31
can open up here it's working it's
6:33
simple it's working okay I hope you guys
6:36
you understood the things well uh if you
6:39
have any doubt you can ask my time uh if
6:42
you ask uh anytime love my Channel
6:44
Please Subscribe me like me thank you
6:47
for