Angular CRUD with Web API Tutorial Part #2 - Install Angular CLI in Visual Studio Code

hi friends welcome to art tutorials we are continuing with our angular grad tutorial series this is the part 2 of that where we are building a feature module for our ecommerce website today we will learn how to set up an angular application from scratch welcome back friends my name is sridhar i bring over 10 years of experience as a full stack developer and i'm here to share my knowledge with you all i'm also here to learn from you all i know a lot of you will be building along with me in this series so i'm you know i cannot wait enough to see what you guys build but during the course of this tutorial series if you have any doubts any queries just ask me in the comment section below i'll be happy to help you i can give you a personal assurance that at the end of the series you will be able to write angular cut functionality for features in your application the entire playlist is in the description box so make sure you check out the link and also make sure that you follow all the tutorials all the steps correctly in order to get your feature module working in your application we are building a feature module for our ecommerce shopping cart application all right so today is the part two where in the previous episode we learned about the project and the crud basics today we will learn how to set up a brand new application from scratch if you're working in a real-time project chances are you will work in a existing repo right so this setup will give you an idea that what to do if you already have an application how to go about it so it's important that you should learn from scratch and this is your opportunity to learn that so let's get started so um so first thing we'll do is we have to check our npm and node versions right which which we'll check what is the versions of the node and the npm running in our system that's the first step the second step is to install the angular cli the third is to actually create an application and fourth we will run the application to make sure our setup is complete all right so these are the four steps we will do in today's um episode so let's get started so i have a brand new application i don't have anything here you see it's blank right so let's open the terminal and type node hyphen v right so the first command that you will run is run command node hyphen v right so this will give you the node version note it down though you won't do anything with it so don't worry so it's just to make sure that you have all the required setup in your system right so check if you don't have it right if you don't have these please install node.js on your machine okay so that's the prerequisite i'm trying to get rid of things that we which make us causes the problem right so the third step is to install angular cli and how do we do that we will say npm install hyphen g that means installed globally and we will say at the rate angular slash slayer line right so that's the command you will run to install the angular cli globally hyphen g at the right angular slash c line all right so that's the third step to install angular cli now remember when we are doing it first time right it will take some time not this one the actual application creation time all right so it says uh it installed the package angular cli 10.0.4 right then next we will have to create our application so we will say since now we have installed angular cli we can run ng commands right if you try and run ng commands before installing angular cli you will see errors okay see errors right so a good friend who is dropping in comments uh srinivas if you can hear if you if you're watching this hi you made this mistake you did not install the node and you were trying no ng right so that that's why you were seeing errors so make sure you have all the things um installed and then you go about business with ng so to install to create new application we will run the command ng new and application name now this can be any name that you want to give right so since we are building a shopping cart application i'll say shop for less will be my name of the application that i will use right you feel free to use your creativity use your anything that you want to use do you want to add routing yes add this is an option you can choose which kind of css to work with i'll stick to simple css for now all right so now this will generate us the application all right uh so once this has done it it will take first time it will take some a couple of minutes to create the application and to compile since the it's the first time afterwards it would be pretty simple all right so hang in there grab your coffee while it's installing packages and also if you're liking the video give a thumbs up to this video if you are enjoying the series drop in your comments show your excitement encourage me motivate me your comments are really really encouraging thank you thank you to all of you all right so while it's installing packages you can see here that it has created the project structure it is now installing all the modules it is creating all the required component files test files everything if you are new on the series if you are new to angular i would suggest please check out angular 9 full tutorial series on folder structure where i have covered every file in detail right each and every file i've covered file in detail to explain you what it does what why it is used etc so make sure you don't miss out that so please check out that tutorial series all right so it should be done anytime now okay so one good way to see how many projects it's creating is your angular.json file it has all the details about your project that you are creating and the dependencies so if you go to angular.json you can see everything here that it has created a new project called shop for less and these are all the settings it is using right so that's one quick way to check verify your settings uh every time we want to check or see any details you can always find them here all right let's give couple of more i think seconds now it should be done anytime i would like to use this opportunity to also request you if you have any feedback anything that you feel needs to be improved needs to be covered please drop them in the comment section all right so now we see that uh the project is successfully created and the git is also initialized it's beautiful so our app is ready right and it has created our app now let's to run it we'll say ng serve right now went to it okay so you need to be inside the project folder so you have to go into the folder and then run the command ng server so select the project folder and then run the command ng serve okay so remember few things here um the default port that the application runs is 4200 okay and to see the output you have to go to http localhost 4200 that is where our application will compile and we'll show you the output okay so that's where we will see the output so just give us couple of more seconds and we will see it right away now so and like i said the first time it takes some time to compile uh let's give it some time and this is only the first time since it compiles the entire framework package you see here that's why the first time it takes time but going forward it's hot reload which means the moment you change anything or save anything the output will be visible so you can see here this line says it's now listening on localhost 4200 open your browser and type localhost 4200 you should see a blue screen with this message which says shop for less app is up and running right this is a first step towards getting your application done all right so if you see that blue screen that means your step number two which is today's task right tutorial number two is complete that you have got your application you have got angular app up and running all right so try this out set it up be ready for the next tutorial where we will set up the mock apis and the endpoints using the json server if you have any feedback queries doubts drop them in the comments section i'll be happy to help you thank you so much see you in the next episode

Channel: ARC Tutorials

Views: 16,226

Keywords: angular crud with web api, angular crud tutorial, angular crud operations, angular crud project, angular crud example, angular crud with json server, angular crud application tutorial, angular crud table, angular crud mysql, crud angular 9, crud angular 8, angular bootstrap crud example, angular bootstrap crud, Install Angular CLI in Visual Studio Code, install angular in visual studio code, install angular 9, install angular on windows 10, setup angular in visual studio code

Id: PWYwXYhoVZQ

Length: 10min 31sec (631 seconds)

Published: Mon Jul 27 2020