How to set up the development environment for Angular

When you mention app building, you can not help but think of Angular. It is a javascript framework for creating modular single-page apps. Since it is so widely used, Angular deserves a series of articles so let this be the first one in it. In this article, I am going to show you how to set up your first Angular application. So let's begin!

Angular is best used for building moderate to complex applications using HTML and TypeScript.  Since it has a modular structure, it is easier to maintain the codebase. Modularity comes from the framework's approach to how the apps have to be structured. Every app must have at least one NgModule which contains a set of angular Components. 

Components can act as a view or as a service which in the end are simple classes with appropriate decorators in place which define their purpose. Views contain elements that are shown to the user and services can be used for specific functionality that is not directly related to views. 

For you to be able to create and run Angular apps you need to install a couple of things.

The first thing you need to do is install node.js. Visit https://nodejs.org/ and choose the recommended stable version.

Node.js comes with an npm (Node Package Manager) which will be used to install Angular CLI and other third-party libraries in the future.

To install Angular CLI, open your command prompt as administrator and run:

npm install -g @angular/cli

This command will install Angular CLI globally on your machine. You can use it from multiple projects without installing it again. Angular CLI is a great tool for angular projects.

Let's take a look at some other commands:

• ng new creates a new workspace and an initial Angular application
• ng generate component generates angular files for your components, services, etc.
• ng test or ng e2e runs your app locally, your unit and end-to-end tests
• ng build builds your production-ready application

To download and install Git CLI, visit https://git-scm.com/downloads. This one is not really a must-have for Angular, but every project should be covered with source control so that is the reason why I decided to add it to this list after all.

To create a new angular project you can use previously installed Angular CLI. Open up your command prompt and navigate to the folder where you want your app to be generated, then run this command: 

ng new hello-zendev

This command will install all the necessary Angular npm packages. It will also create a simple Welcome app that is ready to run out of the box.

To run the newly created app you need to type in these commands into your command prompt:

cd hello-zendev

ng serve

The browser will open up displaying the angular starter project.

The next thing you need to do is to open up your project in your favorite IDE or text editor.
My personal choice is Visual Studio Code by Microsoft. You can get VS Code on their website https://code.visualstudio.com.

VS Code has a debugging option where you can set up breakpoints in your code, out of the box git integration, and a built-in terminal so you don’t need to navigate away from your screen for quick commands in the terminal. It also has a great typescript support and a lot of extensions which we will cover in another article.

We hope you could get a clear idea of what the required libraries for angular development are. This article served only as an introduction to what they do in the angular ecosystem. Its purpose was also to show you how to create a new angular application and what a good choice for your code editor could be.