Angular Console - A Visual UI for Creating & Managing Angular Projects

Key Takeaways

today you're gonna learn how to use the new angular console hey everyone Gary Simon of course natural calm so today we're gonna do a real quick video I'm gonna show you about a new tool that just released 21.0 I believe called the angular console and it's just a visual way of creating and managing your angular projects and so they're the same thing exists for view there's a visual CLI with that I covered several months ago and it's really cool it's a great visual way of being able to like I said install and manage projects as opposed to like simply working within a contour command line all right so it's at angular console comm this is what we're going to I'm gonna show you how to use it and all that stuff and we'll do a quick run-through and for today's question do you like using console commands or do you like the visual you eyes like something like this or the view alternative for managing and creating projects let me know I'll let you know in my personal answer in the first comment make sure you subscribe here and let's get started alright so head on over to angular console comm and to download it you come down here and depending on your OS just click one of these links right here alright it looks like it's these are wrapped in an electron these are made with electron after you install it you'll see here it is right here ready to go and so alright so first your if you already had a project that's created it's going to show up here in the recent project section so you can just click it and hop into that project to begin managing it the obvious place that we're gonna start first is to create a workspace workspace is just another term for an actual angular project alright so the next thing you have to do is select a parent directory alright so I remember a parent directory this would be like your code folder or wherever you store all of your projects so I'm gonna do that real quick alright so I'm going to choose that and then a name for this new project I'll just do a and GCL I demo alright and then choose which schematics you would like to use just going to choose the default angular CLI workspace and then create so this is what it I generated the the command that it's going to run based on the options that you chose and that's kind of how these tools work same thing with view of the view CLI as well the visual cocl I'd that it uses alright and so now it is ready to run so we have some quick options up here you can see we have served test build generate a component all pretty standard stuff so if I just hit serve the way this works is you at the top of course you can choose whether or not you want to do in default dev mode or production mode you can also choose four important fields we can see we have two collapsible areas the important fields are you know whether or not you want to rebuild on file changes the default is true thus it's turned on and then I building using ahead of time compilation you can make that true or false as well and then optional fields these are all the other flags that you would possibly normal normally pass in for instance if you want the browser to open up we'll just toggle this on that's the same thing it just it has been in using the regular CLI in the command line of your console and just specifying - - open so it's just a visual way of course of consenting up your configuration options for the various tasks that you run a run with the angular CLI so if I hit run I'm gonna see this is just a command that it's gonna you know specify based on what we chose in this visual user interface and because we chose I the open flag it should automatically open up our default browser and here we are alright so let's check out some other areas of this I'm gonna hit cancel here get out of here and we can see right here we have our the projects here again you can run neezy and by generate real quick component you could also come down here where it says generate code alright so if you want to generate you know these are all the different types of eye things that you can generate based on the ng generate command I you know if you want to add a service worker you know a pipe a service all this stuff area and of course the way these works very simple most of these I these generate options allow you to specify a name for them be that service name or a pipe or whatever you choose the project and then you have your optional fields down here alright and then next we have run tasks alright so it will I know you can do filter up here I didn't see that before but if you wanted to build out the project you want to build for production for instance again you have all of your typical options here and then finally you can also add the CLI extension so if you wanted to I make your your app a PWA you simply click on this or you wanted to add you know material or any one of these and you simply hit add and there you go so as you can see I created the I the ng serviceworker config file the the manifest jason everything it normally would if you were to run this solely in a console and that's basically it i you know some people prefer to use maybe a more visual sort of interface so they don't have to remember all the different commands and i think that's where the potential benefit comes in i want to concerns a tool like this alright so hopefully you enjoyed that if you did make sure you subscribe and also answer today's question which is do you prefer things like this when it comes to visual user interfaces for managing projects or do you like to stick with console commands let me know in the comments and I'll see you guys real soon goodbye [Music] [Music]