Angular JS Program Execution: 21CSL581 | Program-01: Displaying First and Last Name

AngularJS is a powerful and widely used JavaScript framework that is commonly used for building dynamic web applications. In this tutorial, we will walk you through the process of running an AngularJS program that takes a user’s first name and last name as input and displays them on the screen.

Step 1: Set Up Your Environment

Before you can run an AngularJS program, you need to make sure that you have the necessary tools and dependencies installed on your machine. To get started, you will need:

• Node.js and npm (Node Package Manager): AngularJS projects are typically managed using npm, so make sure you have Node.js installed on your machine. You can download Node.js from the official website: https://nodejs.org

• Angular CLI: Angular CLI is a command-line tool that helps you create, build, and run Angular projects. You can install Angular CLI globally on your machine using the following command:

npm install -g @angular/cli

Once you have installed Node.js, npm, and Angular CLI, you are ready to create your AngularJS project.

Step 2: Create a New Angular Project

To create a new Angular project, open your terminal or command prompt and run the following command:

ng new angular-program

This will create a new Angular project with the name angular-program in the current directory. Once the project has been created, navigate to the project directory using the following command:

cd angular-program

Step 3: Create a New Component

In Angular, components are the building blocks of an application. To create a new component for our program, run the following command:

ng generate component name-input

This command will generate a new component called name-input in the src/app directory of your project. You can find the new component files in the src/app/name-input directory.

Step 4: Define the Component

Open the src/app/name-input/name-input.component.ts file and define the component as follows:

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

@Component({
  selector: 'app-name-input',
  templateUrl: './name-input.component.html',
  styleUrls: ['./name-input.component.css']
})
export class NameInputComponent {
  firstName: string;
  lastName: string;
}

In this component, we have defined two variables firstName and lastName to store the user’s input.

Step 5: Create the Template

Next, open the src/app/name-input/name-input.component.html file and create the HTML template for the component:

<input type="text" [(ngModel)]="firstName" placeholder="Enter your first name">
<input type="text" [(ngModel)]="lastName" placeholder="Enter your last name">

<p>Your full name is: {{ firstName }} {{ lastName }}</p>

This template includes input fields for the user to enter their first name and last name, as well as a paragraph element to display the full name.

Step 6: Import the Component

To display the name-input component in your Angular app, you need to import and declare it in the src/app/app.module.ts file as follows:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { NameInputComponent } from './name-input/name-input.component';

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

Step 7: Run the Application

To run your AngularJS program, start the Angular development server by running the following command:

ng serve

This will start the development server and compile your Angular project. Open your web browser and navigate to http://localhost:4200 to see your Angular program in action. You should see input fields for the user’s first name and last name, as well as their full name displayed on the screen.

Congratulations! You have successfully run an AngularJS program that takes a user’s first name and last name as input and displays them on the screen. Feel free to customize the program further to suit your needs and explore more features of AngularJS. Have fun coding!