Build an App with Angular and Angular CLI

Angular is a front-end framework that is used to create web applications. It is based on the Model-View-Controller (MVC) architecture and allows for the creation of reusable components, efficient management of application state, and two-way data binding. The Angular CLI (Command Line Interface) is a tool that helps developers quickly scaffold and build Angular applications. 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 creating the building App using Angular CLI: The below steps demonstrate the basic installation process:

Step 1: 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.

Step 2: 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: 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:

node -v
npm -v

Step 4: 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: Next, navigate into the project directory by running the following command:

cd my-app

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

Project Structure

Step 3: 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 4: 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.