Angular Project Setup in Visual Studio Code

hi welcome back so in this video I will show you how to install Visual Studio code one of the popular code editor software available in the market so you can also install any other editors but this is from Microsoft and it is free to download then I will show you how to install node and NPM and PM stands for node package manager so angular framework is built on node.js and we need NPM to install different packages during our development so I'll show you how to install and configure node in a newer computer next I will be showing how to install angular CLI in the node terminal using node terminal inside Visual Studio code so then we will create a first angular app which is a basic app then finally it's important always to create a backup and if it is a huge project we need version controlling and source code management software's one of the popular of among it is github nowadays and I will show you how to create a basic repository in this video and further moving on I will show you in-depth concepts of github so in this video I will show you how to create a basic repository in github using git techstop let's see how to install Visual Studio code so go to this link this link will be in the description below inside this link you can find different version of software according to your computer for Windows download 64 or 32-bit accordingly once you download and install the Visual Studio code you can open and see something like this so moving on we will install a node and NPM to download node.js simply follow the link in the description so in this page you can see there are two versions of node.js one is NTS which is long-term supported version and one is current release version so it is recommended for most users to download LTS because it is a stable version of node.js so by clicking it install the download you know Jas and I have already done it so during installation you can see the node.js is installed in this no J's folder in Program Files so in the next step you can see the NPM package manager is also a part of this installation so simply install by clicking next so I have already downloaded and installed node.js in my machine so I will simply cancel this installation and one more thing you need to make sure after the download so go to the environment variables in your system and there will be a variable path so it will be automatically done by the Installer but to make sure you have to check it otherwise no terminal will not work so you can see here there is a path specified for the NPM that is C administrate uses administrator app data roaming and then nvm there there should be one more path in the system variables there you must see the path for nodejs specified so these two should be there in the environment variables and make sure it is there so after this you can run node.js in the terminal of Visual Studio code and install angular CLI to install angular CLI open the visuals to your court and you can see the terminal here and click new terminal so in the terminal type NPM install - G this G represents that angular CLI will be installed globally then type that angular CLI at latest I am writing this latest so that the latest version of the angular CLI will get installed hit enter and wait for the terminal to install angular CLI in your system so once the CLI is installed in the computer you can see here that it has added 84 packages and few other information so angular CLI CLI basically means comma command line interface which gives various commands to manipulate angular code in the in your system so now you can use various angular commands to create projects and create and manipulate it so now I am going to create an angular project using angular CLI so for that type this command in the angular CLI terminal ng new and the project name so I'll give the name to the project as first app when you hit Enter typing this command the terminal will ask you few questions so the first question will be like would you like to add angular routing it is always yes here I will explain what is routing later later in the end of course so the next question will be with style sheet format would you like to use so I'll be using CSS you can select with various stylesheet formats so now you can see that angular is creating its first project so once the project is created and initialized you can just open it so here you can see the project is installed in C uses administrator by the name first app so to open it simply go to file then open folder here you can go to see and users demonstrator then you can here see there is a folder called first app simply open the folder so here you can see the first angular app created by angular CLI so you can just ignore this e to e folder this is for end-to-end testing and these are the node modules we installed using angular CLI so only thing we have to care about is the source folder inside there is a folder called app and there is a component or TS file by the name a p-- so we can just compile this again using the terminal here you can just type ng sir so this project will be compiled so initially we have only one component angular is made up of components I will be explaining in later courses so this compound has an HTML file where you can see there is a h1 tag which says welcome to title and this title is string interpolated I will explain this term also string interpolation and the same component app component have a variable name title so this is initial ID initialized with first app string so when we serve this when we compile this we can open and we can in real real time see the compiled a compiled code in most for 2 0 0 port so I'll be showing you the first compiled project in Chrome now so once the angular serves this project you can see here that it is saying that you can open the browser at localhost for 200 where you can see this project in real time so I'll just open the Chrome browser and paste this link and hit enter so here you can see this is the code which is already written in the project this comes by default so this is what it was written in HTML file you can see here that if I change this title variable and save it once you save it it it recompiles again automatically and serves it on the browser now it has been compiled successfully now if you go and see here that it is showing our string now we have created our first app so let's put this project in github github is a cloud-based version control and source code management website so to put your project in github you need an account I have already created an account and I have logged in so here you can see I have all these repositories already so there are two ways to put your project into github cloud so one is git bash it is a way where you you type commands from the terminal and you put the code it is not that convenient at this point of time so there is another way get Dex github desktop so you can download the software in this link so this is in the description below so after downloading just open the github desktop you can see this screen so first thing you have to do is go to file click options here you can see there is a sign-in option so sign in with the same account which you created with github calm so I will let just log in now so now if we if we want to add our project into the new repository you can select add local repository and choose the path here our app is in first app folder select the folder and add repository once you select add repository locally your repository is created and you can see here changes so it is changing it is saying that you have changed a line of code here it is also showing that you have changed title is equal to first app into another string that we have done so what we have to do now is we every time when you want to push the changes to online cloud you need to give a comment here so I will give adding first code change then I can commit to the master so so now the code has been committed to the master master branch but it is still not in the online or cloud you can see I will if i refresh here there is no new repository is listed here so what have to do now is I have to publish repository to github so there is a logic behind why we do this why there is a two-step process what is committing to master I will put all these things in in a separate video soon so now what we have to do is publish repository with the name a first app the same name okay we can we cannot add this privately because you need to upgrade your data boxes so this repository all the repositories initially we will be public so you can also go into my repository and see my codes I will also put the github repositories link in the description you can little little small small projects on angular in my github account so they should not be private at this point of time you can click publish repository you can see the progress here now it is done so if I now go and refresh the online website you can see here there is a repository added if I go inside you can see the code whatever we had written here is stored here so it is a good practice every time when you finalize your code you push it to the github repository so that it is kind of backup and in a huge project there are there will be creating versions of software's they will test the first version then move it to the master there are different branches here I can create different branches so I will teach all this in upcoming videos so thank you for watching and if you get any doubts please put it in the comments so I'll be helping you as soon as possible thank you for watching and please subscribe for upcoming tutorial videos on angular we will start with all the basics and we'll create as a separate project tutorial project in this series of tutorials thank you once again

Channel: DHub

Views: 255,153

Keywords: angular cli setup, angular 7, angular, how to setup angular cli, how to setup angular, node js, npm, vs code, visual studio code, first application in angular, github, github repo, github repository, github desktop, angular setup, angular project

Id: ZJejjL1Iev0

Length: 17min 14sec (1034 seconds)

Published: Mon Dec 31 2018