Build an App with Angular and Angular CLI

Angular is a powerful front-end framework that allows developers to create robust web applications. Angular is based on the Model-View-Controller (MVC) architecture and allows for the creation of reusable components, efficient state management, and two-way data binding. The Angular CLI (Command Line Interface) simplifies project setup and development tasks. With the Angular CLI, developers can easily create new projects, generate components and services, and run development servers. In this article, we will see the process of building an app with Angular and the Angular CLI by creating a simple application that showcases an example.

Before we proceed to build the application, we need to install the Angular CLI on the local system.

Steps for building App using Angular CLI

The below steps demonstrate the basic installation process:

Step 1: Install Node and NMP

First, we will need to have Node.js and the Node Package Manager(NPM) installed on our computer. Download the Node.js from the official website & then follow the steps given in the Installation of Node.js on Windows/Linux article for a detailed description.

1. Install Node.js: Download Node.js from the official website.
2. Verify Versions: Open your terminal and verify Node.js and NPM versions.

Step 2: Install the Angular CLI

After successful installation of Node.js & NPM, install the Angular CLI by running the below command in your terminal.

npm install -g @angular/cli

Step 3: Setting Up Your Environment

Once we have the Angular CLI installed, we can use the CLI to create a new Angular project. Now, in order to check whether the Angular CLI is properly installed or not, we can check for their version installed by typing the below command:

ng v

Step 4: Creating a New Angular Project

Open the terminal and navigate to the directory where you want to create your project. Run the below command where “my-app” is the name of your project. This will create a new Angular project in a new directory called “my-app”.

ng new my-app

follow along with the asked question required for setting up the project by CLI, it will ask for app routing, and what style you want to use.

Step 5: Navigate to project directory

Next, navigate into the project directory by running the following command:

cd my-app

Understanding the Project Structure

The below image will appear once the application is successfully setup:

Project Structure

Step 6:  Creating Components

Add the following code in the respective file to replace the default message of Angular:

• app.component.html

HTML

<div class="center">
    <h1 style="color: green;">
        GeeksforGeeks!</h1>
    <h3>
        Build an App with Angular 
          and the Angular CLI
    </h3>
</div>

• app.component.ts

Javascript

import { Component, VERSION } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent { }

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Step 7: Run the application

Open the application in the browser using the following command:

ng serve --o

Output: The below is a basic demo webpage that is parceled by default with Angular CLI, that you can change the content of the file “my-app/src/app.component.html to make changes in your app.