Angular 10 Tutorial #10 - Angular CLI Tutorial | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in today's episode we are going to learn about angular cli angular cli stands for angular command line interface tool which provides us lot of schematics and commands through which it makes it easy to work and generate components modules services or i would say everything that we require to build our angular application let's learn all about it in today's episode this is part 10 of the angular 10 complete tutorial playlist i have planned around 100 tutorials for you in this series so make sure you subscribe to the channel and follow the series also in the description box i will update the notes code and the and the documentation that we will create in this particular series alright so far we have covered nine episodes make sure that you check out each of the episode because i have covered all the topics that you need to master angular in detail and please don't forget to ask me your doubts in comment section i will be happy to help you today we are learning about angular cli let i'll give you an overview of the angular cli first and then we will go over the angular cli commands that makes our lives easy let's get started all right so let's open new one this is episode number 10 we are learning about angular cli all right so angular cli stands for command line interface right command line interface now what it does is it provides lot of schematics and commands right that helps us generate build and do lot of things faster right so any angular application we will need lot of i would say building blocks all right some of the things i will list down here again don't worry too much about them because we're starting next episode we are going to learn them so services pipes directives right so all of this are provided and much much more right i don't want to list here because it's too small just understand that schematics and commands are provided by angular cli right now what is schematics now schematics means you can just run ng serve right you can also do ng build we can do ng test right we can do ng um build serve test lint right ng e2e so these are all schematics which means they they are configured to do a certain thing right if you are following our series in the previous episode and the before i have explained you in details where to find them so that's your homework to know where to find them i'll give you a hint check out angular dot json and package.json you'll get your details there if not please refer to the previous video so these are the schematics that angular cli provides also you will need a lot of building blocks in angular application like components modules services pipes directives all that so angular provides with a command which says and ng g or generate followed by what you want to generate it can be a component right it can be a component it can be a module right load by module name here it will be followed by component name and then it will we have so many options to generate we have pipe we have directive if in fact if you see the command that we generated we used to generate an application itself was ng right which was ng new right remember that we said ng new and then we said project name right so this is also a ng command so whenever you see ng commands that means it is angular cli commands right and that is provided as part of angular cli right so all of these are readily available like build test e2e lint and we have commands to generate the building components of angular which is ng generate component module directive etc now to get more details first what we you need to do is check out angular.json file now here you will see all of those details so under architect you will see that you have build command which is what will use all of this and build your application right and when you do ng serve this is what it does right and so far similarly like ng lent test extract etc right so it's very easy and it becomes very um i would say easy so that you have all the linting and the schematics readily available so your time is saved i'm going to demo some of the commands for you today one by one and let's get started so first command i want to do for you is ng build right or let's say ng serve that's the most basic one right so when you do ng serve your application is compiled and it is ready to launch right similarly we have i'll show you one by one so let's hold on to this let's hit compile so you see it has compiled the application now when you open localhost 4200 you will see your application up and running right now we have seen this in last two episodes so i'm not going there instead let me show you something interesting today we have ng test to test our application now when we do ng test it will run all our it will test and run all our unit test scripts okay so when you do ng ng test it will run it will test and run all our test scripts right similarly we have a command ng e2e okay so what this will do is it will test and run all our end-to-end scripts where are they located what how do they what do they where do you find them all of it i have covered in episode number eight uh where we have covered in detail so make sure you check out that tutorial all our end to end tests so you see here i ran ng test and it failed so this is how the report will be uh it will show you that how many failed how many passed etc etcetera now ng e2e which will run end to end tests ng lint right ng lint will do all the linting right so run ng lint and it will tell you all your coding standard mistakes that you have done but you have it in your tslint.json right so for example if you have a maximum length of 140 characters if you do some mistake it would catch it here right so it says all files pass linting now let's screw this screw it up right so what you have can do is just put abc i'm trying to put more than 140 characters and it should be soon done right so now you see in one line i am adding so much detail so now save it and run if it's more than 140 it should give us error so it says it's still passing oh in html it's fine let's do it here it will become usually yellow if it's done let's see it here it will come underline if it's has broken it but looks like it has not yet but you get it you will see yellow line and then you will know that um where it has washed up okay so you will will get it once we because once we start our live application you will bound to see that linting issues anyway we'll resolve them there all right so the next command that you can see is ng build now what it does is it will build your application and make it ready for prod deployment ready for production environment deployment right so you don't want the regular um code to go into your prod you want it to be minimized you want it to be optimized you want the size to be less and the where it will be so whenever you do a ng build again go to angular json file expanded the build expanded and you see that the output it will tell you that it is going to consider all of this right and go to your tsconfig.json it says out dist which is your file name basically right so let's run that command and i'll show you where the output will be all writing here so let's do ng build and you will see that here it will generate a build folder for you that is dist right so it will generate a dist folder right inside that it would have all the minimized output of vendor.js main.js style dot so you see all these files are generated main polyfills runtime styles vendor all these files are generated and they are placed into a folder called dist here you see the dist folder by default the name will be the same name as the project name we can change that we can change the folder name we can change um everything here like um what should be the base url what should be the deploy url etc and you see it has generated again our index dot html has only one directive app root what it is why is there only one all of that i've covered in previous episodes make sure you check them out all right so once you do ng build so this is your folder which will be getting deployed in your prod environment right and then you also have some command called ng generate now this is the most powerful i would say most used one after ng serve of course so we can use this to generate we can generate the building blocks of angular like components modules services pipes directives etc let me show you that so we can generate components pipes modules services directives and applications we can use this for everything like you know you know um as and when we progress will i show you all of that all right so the the way to write it is we'll write the command ng generate followed by what you want to generate so if you want to generate component you will say component and then give followed by the name of it so here i am saying login so see now i have said generate me a new component so it has generated login and you see it has created all the files that are needed also it has updated the required app.module.ts if it was not for this we will have to do all of this files that we have to create we have to update it manually into module and that's where things go wrong because there is wrong input wrong you import them wrongly or you know you are not importing it correct or you are not you know creating syntax correctly and such issues right so you are bound to see such issues but here it has generated for us and that's why it makes our life easy right similarly you can generate now the shortcut is you can also write ngg right you can also write ngg you don't have to write generate every time now you will say module followed by module name i will say auth right which is for authentication so see it generated a module called auth now i will go inside it now inside simple crm source then you can locate it here you can see there is app inside that i have login auth right so i will go into auth source app right now if you don't want it at that level you can go to cd source and you can go here and say ng generate auth here so now you see the okay it says uh it's already found right so ignore that and what we will do is we'll use this module we can create all our components inside this so we can say auth app auth right and once we have done it then you can create your components inside this module and say login right so now it has generated the auth com login component inside the auth module right so we can delete this login here and similarly we'll go around creating multiple components and everything that was about creating the uh comp using and ng generate so going forward we will use all of this and go ahead try this out ng generate because that's something that we'll be using a very lot often the details of that can be found in the angular dot io slash cli you can see all the commands that you want to see ng ad ng analytics you know build and and much much more right so there is so many things that you can configure use and we can also extend them right i hope this is starting point for your learning right in terms of learning angular cli we will be using these commands in our every episode that going forward that's why it's important that we should learn understand about angular cli i'll cover that in going forward in other things but for next episode we will cover about angular app architecture blueprint right a lot of you have been asking me what's the what what's the angular application structure like um and what's the ideal structure of an angular application how should we design it what are the things that we should consider how should we design our application structure etc so i'm going to cover a blueprint for you that way you can use that in your applications going forward and i'm sure that will really help you in becoming a better architect thank you so much for joining in today's episode i will see you in the next episode where we'll talk about the blueprint but please do like share comment and subscribe to my channel if you really like my work and tutorials please consider buying me a coffee at buy me a coffee dot com slash ark tutorials thank you so much i'll see you in the next episode

Channel: ARC Tutorials

Views: 7,658

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for freshers, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, Angular CLI tutorial

Id: AuBfy1sGkuo

Length: 16min 19sec (979 seconds)

Published: Thu Oct 29 2020