Angular 17 Tutorial #4 - Installation | Angular 17 Tutorial For Beginners

hi friends welcome back to Arc tutorials this is angular 17 full tutorial series for absolute beginners this is part four of the series today we are going to learn how to install angular application from scratch if you are someone who has already an experience of having an built an angular application and want to learn about angular 17 specifics please refer to the first three episodes where we talked about the list of new features we also spoke little bit about the angular framework itself and its main core features in the last episode I showed you how to upgrade an existing angular application to angular 17 today we will learn how to start fresh installation of angular 17 and if you are a beginner trying to learn angular this would be your starting point there are some dependencies that you need to check off your system and get those things ready so I'm let's jump right into it and I'll show you the details all right so first and foremost you will need an editor of your choice if you ask me I'll recommend this tool which is Visual Studio code which is available free of cost okay you can just download it Visual Studio code it has got nothing to do with net okay that is Visual Studio but this is Visual Studio code which is an editor that you can download for free it supports typescript JavaScript python um mongodb connections much much more it has lot of extensions g p Gulp and much more okay so I'm not going into that details so download visual studio code editor once you download you can see the folder structure that you have and you can create a new folder and I'm going to call it angular 17 all right and if you are interested in learning about the crud operations I also have angular 16 crud tutorial mongod DB bootstrap angular material and much more on my channel make sure that you check them out as well all right so next we created a folder right then you can open the terminal uh navigate to and this is a command line tool in that you can always um get it on your Windows system or uni system wherever you are so right now I'm in angular 17 it's an empty folder as you can see the next check you will do is to check the node version and the n PM version so type node hyphen V and you will see the node version you are on make sure you are somewhere close to nearest one right now it's 20 that's the latest one but you can be around 16 or so that also should work same way check the npm version right now I'm on 96.7 make sure again you are closest to somewhere around 5 or six uh in order to work it completely so these three are the most essential uh steps to do before you start creating any angular project now the next thing is to type npm install hyphen globally at theate angular CLI this is the command you will run to install the latest version of angular I'm not giving a version here but you can mention it at the rate 17 or if you want 16 you can write 16 15 and so on if you don't give anything it will fetch the latest version for you all right so let's go ahead and do that so I'm going to type npm install hyphen g means globally and at theate angular SL CLI and it will take few seconds uh to build to get the dependencies to install so let's wait for that in the meanwhile please do show me some love hit that like button and don't forget to subscribe to my channel and yeah all right so you can see here npm it says U warnings are there but npm has installed so that is good now you would not see anything in your thing yet we just have installed the angular CLI that's all we have done but to create now I'm going to switch back to my bash uh because that way all right so I'm here in angular 17 there is still nothing so now I'm going to say NG new right now that's the command NG since we installed angular CLI if you want to see whether it is installed or not so it says you need to specify a command before moving on so view the commands so you can do hyen Hy help and it means it is showing everything now to get the version we can type NG version and it says angular 17 you can see here the dev toolkit is all running on 17 okay all right so now that means our angular CLI is is version 17 here okay now let's go ahead and create the project so you'll run NG space new don't worry about the schematics I'm going to cover that in the next episode when we are reaching there but for now the only command you will need is NG space new space the project name and what we are going to build as part of this particular um learning series I want to build something that probably you can put it in your portfolio or you know something like um a proper project that you can put it in your resume all right so I'm going to build a crew management system okay now crew is nothing but your Airlines um which is what uses crew right crew is nothing but the inflight people they use so um I have some experience with working with Airlines in my past project so I'm going to use that build crew management system that means we'll pair people and build a schedule of the airlines that's the project we are building so what are we going to use um we can use we can choose anything CSS scss s or less I'm going to use scss as we move ahead I'll tell you that uh you want to enable server side rendering right now I don't think it's too early for us so I'm going to say no but as we move along I will show you server side rendering also that's a little late in the tutorial but for now you don't need that okay so the next command I ran was crew management that's the name of the project it will take few minutes to completely build your project so hold tight and like I said hit that like button and subscribe button to show me some love all right also do let me know uh if you want some help if you're unable to run pass through things hit me up in my email address I'll try and answer as many queries as possible all right so now you see it has created everything the project has been packages installed it has created the project and it's successfully initiated get okay now you can see here under angular 17 you have the crew management uh code base so now when you expand you would see crew management under that you have source code and all of that so next step you will do is navigate into that folder into the project which is Chrome management and type the command NG hyph NG space serve now what this will do is it will compile the source code typescript source code into JavaScript code which is what this JS files are and corresponding CSS and it will enable and watching for changes in Local Host 4200 now you can safely go back to your browser and type Local Host 4200 and if you see this screen that means your angular 17 application is up and running all right congratulations your app is running all right so that's the this is the message this is the screen you want to see all right so make sure that you get to this point that is all we are covering in today's episode if you get stuck anywhere in any of the steps that I've shown you feel free to reach out to me at this email address I'll will be more than happy to help you just follow this steps that I have shown you step by step pause the video if you want and go through it and get make sure that you are reaching till this level once you are here the next step is to add a UI library and angular applications 90% of the times you will find them you are using angular material because they have native support so next episode we are going to learn how to install angular material and then we will Deep dive into the angular project folder and then we will do the angular CLI okay step by-step guide so we'll go there so thank you so much for joining in this episode like I said in the next episode we'll learn how to install angular material thank you so much for joining in this episode see you the next episode

Channel: ARCTutorials

Views: 11,636

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: d-uEjoYyrA8

Length: 9min 22sec (562 seconds)

Published: Mon Jan 08 2024