How to create an Angular application from scratch with simple steps.

AngularApplication from scratch

In this article we are going to discuss about creating an angular application from scratch with simple steps.

Install node

Check you have installed node already else install node. To check which node version is installed, run below command in cmd(command prompt).

node –version

OR

node –v

Now we are ready to start our angular application.

Install angular/cli globally

Now install angular/cli globally. Create a folder and give any name, open cmd from same path. Run below command.

npm install -g @angular/cli 

Above command will install angular latest version. If you want any specific version, please use like below.

npm install -g @angular/cli@8.0.0

In above case it will install angular 8.0.0

We are done with angular cli, now let us create our angular project.

Create new angular project

Now we are ready with all prerequisites. Run below command to create angular project.

ng new angular-makeiteasy

While running above command, you will get below questions with respect to routing and style sheet.

Would like to add angular routing ?

If yes type "Y"

Which stylesheet format do you like to use ?

You can use down arrow and select the type of stylesheet format. In this example I selected SCSS.

Now check your folder which is created by running above command. Angular has taken care all of the files which you need to build an angular application. Check below image to see what are the file which got added automatically.

Do npm install, so that all package versions are installed properly. Now run ng serve and check your application in the path http://localhost:4200.

ng serve

If you don’t want to reload your application in browser on each code change, then use below command instead of above.

ng serve --live-reload=false

Below is the folder structure of our simple angular application.

Now create your first component by running below code.

ng g c example-component

Our first component is ready now. Do experiment yourself by adding more components, services etc. To create service file use below command.

ng g service example-service

In this article we have discussed about creating an angular application from scratch with simple example steps.

Related Info

1. File/image upload and send data to backend - Angular

2. Show preview image while uploading - Angular

3. Date filtering and formatting using pipe in Angular

4. Conditionally add class to an element on click - Angular

5. Conditionally add class using Angular - 5 methods