Create your first Angular app using vs code

 

web development divided in to 2 sides: 

server side - C#, java, PHP, Python

client side - HTML,CSS, JavaScript, typescript

Frontend technologies are very important for a software engineer. Everyone knows html, CSS along with that we have client side frameworks. It is mandate to learn any one of client side framework.

what are client side frameworks?

client side frameworks  are JavaScript libraries runs in web browser 

example: Angular, React 

In this blog we are going to create our first angular app using vs code.

1. Installing node.js

2. Installing typescript and angular cli

3. Using commands will create our project.

  

1. Installing Node.js:

Go to Node.js official website and download as per your system requirements.

https://nodejs.org/en/download/

installation is easy. Click okay next and complete the installation.

after installation completes crosscheck the installation done properly or not by opening command prompt and run below command.

node -v

npm -v

you will get version number. example: v12.13.0

npm represents node package manager.

2. Installing typescript and angular cli

go to command prompt and run below command to install typescript.

npm install -g typescript

Go to angular official website and run commands one by one to create angular project.

https://cli.angular.io/

Open command prompt and run the below command to install angular cli

npm install -g @angular/cli

3. Using commands will create our project

open command prompt and run below command to create angular application.

ng new my-firstAngular-app

after running above command it will ask for stricter y/N select N

after that add angular routing ? y/N - select y

Please select the stylesheet format it will ask for now I will select CSS and continue

we will get installed successfully after sometime.

change directory : go to specific folder

cd project name

then run below command to open visual studio code.

code .

it will open your project in visual studio code as below.

Open command prompt and go to the project folder:

and run ng serve

once project compiled successfully.

Open http://localhost:4200/

The Open src->app->app.component.ts

Title in the angular project is coming from here. we will change the text to see the changes.

save the file and open the browser we opened previously make sure you are running app.

In angular everything is component. every component will have one typescript file and one html and CSS file and spec file for testing.

app-component file is default created and this is the root folder.

styles.css - is main css file for full angular project.

Thanks for reading.

follow my Facebook page to get new posts update.

https://www.facebook.com/WDKpage/