Getting Started With Angular

To start working with Angular we need to first set up the development environment.

A development environment is one that has everything installed and provides comprehensive facilities to developers for application development.

Good tools make application development quicker and easier to maintain than if you did everything by hand.

This article will guide you through the installation process of Angular-CLI with which you can quickly set stage for a basic Angular Application.

All we need is just a NPM(Node Package Manager) and Angular-cli.

Angular-CLI is hosted as a node_module and to install and use it you will need NodeJS and it’s package manager named npm(Node Package Manager). The Angular-CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

So let's get started and go through the installation process.

Step 1. Set up the Development Environment 

You need to set up your development environment before you can start to do anything with Angular. For this you need to install node.js and npm.

To install NodeJS, navigate to the Downloads Section of the NodeJS’ website, download and install the Installer, best supported by your OS. NodeJs comes with a pre-installed npm.

You can check the version of your NodeJs and npm by opening your command prompt, and typing : node -v and npm -v.

Now we have NodeJS and npm installed on our machines. It’s time to install Angular-CLI. And we can install it using npm and typing: npm install -g @angular/cli 

This will install the latest version of Angular-CLI, globally on your machine. It will take some time to install as it has to download all the node_modules it has a dependency on.

Once it is installed, you can verify if it was properly installed by typing: ng -v. And if it is properly installed, it should print a message like this on your command prompt.

Now we have tools like NodeJS, npm, and Angular-CLI, so we can go ahead and make an Angular Application.

Step 2. Create a new project 

To create a new angular project open a terminal window and generate a new project and default app by running the following command: ng new my-app

The Angular CLI installs the necessary npm packages, creates the project files, and populates the project with a simple default app. This can take some time.

Step 3: Serve the application 

To run the project on a local server in browser go to the project directory and launch the server.

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

Using the --open (or just -o) option will automatically open your browser on https://localhost:4200/.

The browser opens with the application:

Now that you have the basic boilerplate code for an Angular App, you can build your application on top of it. 

Note: To make your workings easier with Angular you can install an IDE like Visual Studio Code, Atom, WebStorm etc.

This brings us to the end of this article. I hope this article has enabled you to successfully install NodeJS and Angular-CLI. Now you are all ready to start working on your Angular Application.