Angular 12 tutorial #6 Angular CLI & important Commands

hi everyone welcome back to code step by step my name is anil in this angular part we will talk about angular cli and we will learn some important commands of angular cli so cli stands for command line interface so this is a tool of angular and it help us to make our angular work easier how it can make easier so see it provides lots of command like with the help of cli we can create our application we can run our application even we can deploy and build our application also and it have lots of other features let's say you want to create new class new interface new services even routes and all everything can be done with the angular cli right we can do all these things we can create our classes interface components module without angular cli also but it will take lots of time so i just want to show you an example so here you can see that we have a component with the name of app so here you can see that it have around four files for component and one is a module file so if we want to create these all files manually then it definitely take 15 to 20 minutes at least right but this thing can be created within a 20 second with the help of command line and we don't don't need to write any kind of code so and one more thing and which is uh really interesting when you create your files manually then there is a chance uh it there can be some errors and some bugs also maybe there is some spell mistake and all but whenever you are creating components modules classes with the help of command lines so there is a very very low chance of errors and bugs that's why we always prefer angular cli so uh let's jump on the official documentation and then we will learn that how many types of command we will we will have in our angular cli and which are the important for interviews and for beginners so let's write here angular cli in google and just jump on directly first link and this is the overview and reference page for command line so here you can see that this is the first command that help us to install our angular cli right and i already told you what is the meaning of minus g that simply means we are installing angular cli globally in our operating system so that you can install it in any folder like you can install it in inside the dashboard download document wherever you want and you can use it in the any other directories any other folders also because our angular cli is installed on our global level of operating system right so now let's talk about some basic flow so let's say you just want to get a list of all commands that how you how how you can get that list for that let's open the terminal even you can use any kind of terminal like uh windows terminal you can use you can use your uh code editor tool or any other also right so just simply write here ng and put here help and it will give you a list of commands that is available with the cli so first is for add and this command will help us whenever we want to install any external libraries after that there is a one more command for configuration of analytics we can build our application we can deploy configure we can open our docs even we can uh this is help command is also present then and it's just telling that list of available commands and their short description and we are just uh just going through with it after that uh as you know we already use the new command engine new and with our project name we can run it we can test and serve it with the all for the all and every feature we have commands right so which are the most important commands here see these are the actually overviews these are not actually all commands so if you just want to go with the old commands here you can see that uh this these are the basically you can see that categories of command like add category analytics build and also here you can see that these are the old commands like ng add whenever you will open it ng add then you will find that there is a lots of option lots of option with the ng analytics like this and lots of other options with the ng build configuration deploy and all right but the most important categories which is ng generate whenever we are working with the angular project we definitely need the energy generate command right because whenever we are creating any component any class any module any service we need this command so let's see how we can create a component with the help of this command so if you are not familiar with the components modules and services then don't worry in the upcoming video we will learn these things right and this is the actually you can see that see that components are the base of any angular application right so we will learn about uh components in detail in the upcoming video but again i just want to give you a brief uh description so let's say you just want to create a small functionality like login that what you need for that login we need a css file for style we need html file for just make the button and text boxes and all we need the ts file to collect the data and connect with the api spec for test all the functions html and all so we need four files and these are uh the part of component right so now let's see how we can generate first one ng generate after that component if you want to generate a component and if you want to generate a module then you can simply put your module like this right so let's put here component and component name so let's say my component name is login whenever you will create a login component it will automatically include inside app because app is our base or you can say that the root component here you can see that we got here login component and it again have the four files right so similar way we can create one more let's say register just write here ng generate component register all right and here we go with the register so how we can create does do you know that there is a shortcut command also for these components and generate the things let's say ng and after actually i just misspelled the resistor sorry for that ng g4 generate c4 component and you can put your component name let's say profile and hit it and now if this command is similar to that one right so here you can see that we got a profile component also so let's say you want to create a module so for that you can just simply put here ng generate module and your module name let's say i want to make um module for user auth and here we it is taking time yeah so here we go with the module so whenever you will create a module there is only one file but inside a module you can create multiple components also let me clear this whole stuff and let's see how we can create a component inside this module so just put here ng g for generate i am using the shortcut command c4 component and use here your module name which is user auth after that slash and you can put here anything let's say sign in and hit enter whenever you will hit it you will find that you are getting a component inside component auth so this is the way that how we can create component module and we can create component inside module and also there is a lots of other command also so let me just want to show you these are the all options with the engine generate so you can create a class also how you can create class this is again a simple ng g4 generate class and your class name let's say my class name is dummy just hit enter and you will find that you are getting a file inside src folder and sorry inside the src app folder so it will create two files one for our actually class and second one for testing file of this class here you can see that right even you can see that whenever we will create these two files it will take around two to three minutes right but with the command line it just take five seconds okay we can also create the libraries pipes resolver services also so let's see that how we can create a service ng g4 generate service and your service name let's say i just want to make a file name this api service and just hit the enter again it will generate two files one for testing the service and another one for uh actual service file right so with that way we can create file so in interviews it can be asked that how you can create a component inside a module how you can create a service this kind of question can be asked even you can create a service inside the uh you can say inside the module so let me show you that how we can create ngg service and here you can put your user auth and then you can just put your service name let's say test service and whenever you will hit it and within a moment you will find that let's open your uh user auth and here we have two test services also right so with that way we can create our test service inside the module and all and uh last and which is very important in interviews many time interviewer asked that how you will create a build with the angular so for that we have a very single simple command but it can have a multiple configurations but let's see with the very basic module ng build whenever you will run this command it will take some time depend on your project size if you have a big project it might take 10 minutes also but for a moment we have a very small so it will uh just take a 30 to 40 seconds so it will create a new folder here with the dist and our project name right so and inside it we have some files for js and one file for html and one file for style and we will just get this file and we can deploy on our server so it's done here and you can see that we have a dist folder now and again it has some ht one html file some css files and all so what actually do it will just compress your old project in just some files right and if you want to read that code this is uh nearly impossible to read here you can see that so all right uh these are some important files and some discussion about the you can see that angular cli if you have any confusion if you want to get to know about any configurational command or any command then you can ask me in the comment box and please subscribe our channel thank you thank you so much

Channel: Code Step By Step

Views: 4,764

Rating: 5 out of 5

Keywords: Angular 12 tutorial, angular 12 tutorial for beginners, angular 12 cli, angular cli commands, angular command line interface, anil sidhu, angular 12

Id: kvJYjvoncak

Length: 12min 17sec (737 seconds)

Published: Sun May 23 2021