How to build a basic Angular Application

Let’s get started with building applications now. As we all know that different web frameworks operate in different ways. So before diving into how to build Angular applications, one should know what Angular is. 

Angular is an open-source TypeScript-based Web Framework while AngularJS is an open-source JavaScript based Web Framework. Angular was rewritten by the same team of AngularJS. So Angular is new and AngularJS is old.

Differences:

In this post I show guide you through on how to build an Angular application as 

This tutorial will be explaining the following parts at the beginner level:

Part 1: Install NodeJS

Part 2: Creating a new Angular application

Part 3: Running Angular application locally

Prerequisites:

1. Install Node.Js (will be explained here)

2. Angular requires Node.Js 8.x or 10.x

Part 1: Install NodeJS:

Install Node.Js in your system by going to the following link below.

Nodejs.org

Install the latest recommended version of Nodejs from the website.

Once the installation is complete, you will now be able to use Nodejs commands and packages by installing them with “npm” command.

(Angular, angular cli and angular apps depend on the libraries that are available as npm packages. So installation of npm package manager is mandatory).

On your terminal, 

Install the npm packages by entering the command: 

npm install

Install Angular command line interface by entering the command:

npm install -g @angular/cli

Create a folder of your app name on your desired location on your system.

For example, let’s create a folder on the desktop naming “myangularproject” and go to the directory.

Part 2: Creating a new Angular application:

Initializing the project:

Now create your project by entering the command with the project name: (in this case let us name the project name as “my-angular-project”).

ng new my-angular-project

The Angular CLI installs the necessary packages and dependencies.

This creates the basic welcome page for your angular application.

Part 3: Running Angular application locally:

Now let us run the server locally and view the angular web application. 

Go to the application directory and run the application: (enter below commands)

cd my-angular-project

ng serve --open

Your Welcome Angular application page will be opened on your browser on your localhost.

Go to your localhost on your browser.

http://localhost:4200/

You have now successfully built your basic first angular application. 

We will see more examples on how to dockerize, deploy your applications in the upcoming blog posts. Please checkout the Knowledge Define blog for more updates on web, deployment, cloud, DevOps, and more.

You can find Dockerizing and angular application in the next post.