Angular 17 Tutorial #8 - Angular CLI Tutorial | Angular 17 Tutorial For Beginners

hi friends welcome back to Arc tutorials this is angular 17 full tutorial series for beginners as well as expert developers from previous versions there are lot of changes that have been introduced in angular 17 and hence this particular tutorial series in order to get you up to date in today's episode I'm going to show you the tutorial EAS on angular CLI we'll show and learn all the variations that you can use with angular CLI all right if you have missed out on the first seven episodes make sure that you go through them especially if you're a beginner in order to learn n Master angular 17 with me end to end today we are learning about angular 17 angular CLI so CLI stands for command line interface which means it's a it's a collection of uh commands or tool set which helps us in developing angular applications much more efficiently and smoother these commands will help us with project creation configuration development testing and deployments some of the key features I can talk about is you can quickly generate an angular project which we have seen in the previous episodes using NG Command right and we were able to generate a project using NG new similarly code generation a lot of angular application components modules pipes directives Etc Services all of that can be easily generated right from the command online which means you don't have to really sit down and type file by file using CLI we can build the application we can serve the application which means to run and either for deployment for production or or developing it local similarly for testing when we run NG test we will be able to integrate testing Frameworks like Jasmine just uh mocha and run them using Karma or any of your choice you can even integrate um bdd Frameworks like cucumber Etc talking about the angular CLI so I we have already seen this NG new project name which is what we have done in the previous episode that's how you run it in the command line so let me show you how you exactly do that so once you are in the project folder make sure that you are opening a command tool you can hit command til and that's when you can see the command terminal directly opening it here alternatively you can go from here and open a new terminal as well which is what this will open all right so one of the first things you should do is type NG hyphen hyphen version now this okay so so okay NG hyphen hyphen help okay let's do that so NG version is the direct command my bad I'm sorry so you can see here when you type NG version it would give you all the the details of the angular CLI version all the packages that are installed all right so once you have that in place uh the next command that we saw first one is NG version okay you don't need hyphen like how I did sorry about that so you don't need to put hyphen or anything just the NG that is for angular followed by the command that you want to run so we have seen NG word let me open the notes for you angular CLI commands so we have seen NG version we have also seen NG new it goes with project name we created a project crew management just uh this way so if you have missed out like I said you are following the series make sure that you follow watch the previous episodes in order to have continuity to your learning so the next um there are a lot of uh options that you can use with NG okay now some of of them are NG generate one of which is NG generate now NG generate helps us in generating the common pieces that are required for the project now you can use this command with component module uh Services you can use it with pipe you can use it with directive routing and much much more okay anything that you want to do like say interface model right all of class so all of this can be generated using NG generate okay I will show you some options now but again if you don't understand what is a component module service pipe today it's all right because I am I have plan the episodes where I'm going to cover them in detail but this is today's tutorial is on angular CLI so I'm just covering that NG generate component followed by component name let's say component name is header so you will see it will generate the piece code for you inside the source you can see inside app a new header component is generated with all these files which are listed here okay so this is a component that I generated same way you can generate a module again like I said don't worry too much about what is a module today and say layout it's generating a layout module right so see it generated a module by the name layout module that's what we wanted so what you need to understand is that there is a command called NG space generate through which we will generate all the required pieces of angular application okay we will use them one by one as we move in the series I will show and make sure that you understand all of this as we move for today let's move on let's do see the next one NG test so let me quickly make it here generate the required project components modules Services etc etc all right NG new will create a new project for you NG version gives you details of project configuration that is your packages version name Etc all right okay so the next one which is NG test now this is used for running the unit tests so I told you in the last episode the files will end with spec dots so anything that is ending with dopc dots when you run this command it will be executed we generated a new component just now which is header it has a spec. TS this is the unit test file for it so when you run NG test it will run all the tests that are available as part of this particular project and it will give you a report of what passed in green what failed okay so important thing to learn is that NG test is the command you will run to run your unit tests similarly when you're building and developing you will do NG serve serve is nothing but build and launch application locally okay so NG so when you want to start the application you will type the command NG space serve now if you see here it's watch mode enabled and when you open Local Host 4200 your application is up and running okay every time you make changes that will be hot reloaded automatically so to run the angular application you will use the command NG serve to test to run your tests unit tests you will write NG space test to generate a new piece of your project it can be anything component directive module service routing interface model class you will use NG generate to generate a new project for beginners you will write NG new project name to check the version NG version all right moving on to the next NG build now NG build is when you want to deploy your project into a say cloud or in your repository in a pipeline that's where when it's production ready when it's production ready we will run NG build it will give us the disc folder which will have index.html styles.css polyils now these are all for backward compatibility poly fills. JS and main.js which has all the compiled code from typescript to JavaScript scpt all right that is what NG build will do let me show you a quick example of it NG build when you do that it will generate a new folder for you it's called disc folder you can see here it generated it here and it has all the details that you have index main poly fills and styles that's what I listed here again you can configure all of this where you want the disc folder all of it that you can change it if you want you can see here you can see here output path you can configure that and change that if you want okay if you want with a different name Etc you can change it in angular.js all right let me make that note for you make changes to settings in angular.js if needed if needed or what they call it as add salt according to your t P right something like that all right that tells us do let me know what is your favorite recipe all right so moving on to the next so now if you see I covered NG new I showed you some of the things of NG generate again like I said don't worry too much about it today we are going to cover and use them on a daily basis as we move NG build compiles the application into an output directory NG serve is used for starting a Dev server and running the application locally we saw NG test which is what is used to execute the tests via karmma there is no NGE anymore okay it used to be there earlier now there is no ng2 okay so that's why I'm not Leed now when you're running the project what happens is you will need to test and make sure all of these commands you can go into here you can see NG serve build test inside your package.json you can see all of it all right so now this is the commands you can extend it also by writing custom scripts that we will do as we move along okay so these are the things that you should know okay now one of the other things of this capability is if you want to add any angular package like say we saw how to add angular material so you will use NG add for adding packages and modules of angular okay you typically do that with npm install but NG ad can also support that finally if when you want to update your application update any angular application to other versions using NG update command Okay so these are all the things that you you should know now there were other things like lint etc for that you need to add additional schematics okay so that's why I've not listed it it here because it's not there by default but you can add that command as part of your configuration which is NG lint what it does is linting is nothing but making sure everything above making sure that your typescript code is proper it's following proper coding convention coding syntax or some patterns that are set Etc now these are custom that companies and Enterprises will use it's not builtin okay now buil-in wise you need to know only these commands one is NG version two is NG new three is NG generate four is NG test five is NG serve six is NG build and NG add is the seventh one eth is NG update this are peripherals that can be added as an extension okay but if you should know you should know what is linting so I added it here as Point number nine all right so these are the nine CLI commands that you need to know with while working with angular applications you will use most of this let's say NG version NG new you might use it on you might not use it on a daily basis but NG generate NG test NG serve n build these are something you will use on a daily basis when you work on a realtime project okay so that's all uh angular CLI angular 17 CLI commands that you should be aware of all right I hope I've covered all the things there are few CLI commands which we like I said we will progressively learn as we move in the series for today this is all you should know practice these go over this list that I have shared make sure that you type them see what happens and NG deploy NG generate we saw all of this right class command run Etc we'll we'll go through them we'll write custom uh also as we move but today you should know only these nine commands to in order to move to the next episode all right so make sure that you practice them and make sure that you are getting familiar comfortable with it I am always approachable through email through comments so make sure you let me know if you are stuck if you have any questions queries it's very very important to get your fundamentals right when you're learning angular all right so this is angular 17 angular CLI commands in the next episode we will learn about angular 17 modular architecture a lot of this I have not covered previously in any of the series but I will cover here because now a lot of you are confused about why modules are organized why do we use them Etc a quick touch base on uh modular architecture in the next episode and then we'll progressively go to components app module and much more that being said thank you so much for joining in this episode please do show me some love by liking my tutorials subscribing to my channel and maybe leave a nice comment to keep encouraging me thank you so much see you in the next episode

Channel: ARCTutorials

Views: 7,292

Keywords: angular 17 tutorial, angular 17 tutorial for beginners, angular 17 crud, angular 17 features, angular 17 full tutorial, angular 17 complete tutorial, angular 17 live project, angular 17 project, angular 17 crud tutorial, angular 17 best tutorial, angular 17, angular 17 signals, angular 17 defer, angular 17 components, angular 17 templates, angular 17 course, angular 17 full project, angular 17 routing, angular 17 crash course, angular 17 ssr

Id: BnmRZ5t8uEU

Length: 15min 31sec (931 seconds)

Published: Thu Jan 25 2024