Angular: Creating a new project

Nowadays, the development of frontend technologies is impressively fast. Every now and then new JS frameworks and libraries appear, which offer a range of possibilities for creating advanced web applications. Even though Angular is not the newest thing, it is still a great choice to start your adventure with web development. The use of the TypeScript language, architecture focused on modules and components, the ability to use the RxJS library and the dependency injection mechanism are its undoubted advantages, which you will certainly notice while working in this framework. However, to discover all its advantages (and disadvantages 😛) you have to start by creating a project, so … let’s start!

IDE

The first step to do is download the IDE (Integrated Development Environment). It is an integrated development environment for creating, modifying and testing software — you will simply write code in it :) There are many IDEs on the market, but some of the most popular are: Visual Studio Code, WebStorm, Sublime Text. I personally work in Visual Studio Code and it will be used in this tutorial. Without further ado, let’s move on.

Node.js

The next step is to install Node.js. It is an open and cross-platform JavaScript runtime for building scalable web applications. It allows you to create applications using the same language on both the browser and server side, which makes it extremely liked by programmers working as Frontend developers. You can download Node.js from this page and then install it. After successful installation, open a terminal and enter command below:

After entering this command, the information about the installed version should be displayed in the next line.

Creating project

After successfully installing Node.js, create a folder and open it in your IDE. I created “angular” folder on my desktop. The next step is to install Angular CLI. It allows you to create projects, generate applications easily, using special, short commands.

After successful installing, we should receive the following message:

Finally, enter the following command in the console:

It will ask if you want to add routing to your project and you will be able to choose a stylesheet. In my case, I decided to use the SCSS preprocessor and Angular routing.

After successful creating the project, go to the folder with the project and enter the command below:

Next, open a browser and type in the search address: ‘localhost: 4200’. The browser should redirect you to the view of your application:

And voilà! Congratulations, you have just created your first Angular project :)