LEC28| First Angular JS Application by Dr. N. Shirisha in Web Technologies I

Welcome to LEC28 on Web Technologies I, where we will be learning how to create our first Angular JS application with Dr. N. Shirisha. Angular JS is a powerful open-source JavaScript framework that is used for building dynamic web applications. In this tutorial, we will go through the steps of setting up an Angular JS project, creating components, and binding data to the UI.

To get started, make sure you have Node.js and npm (Node Package Manager) installed on your computer. You can download Node.js from the official website (https://nodejs.org/) and npm will be installed automatically with Node.js. Once you have Node.js installed, you can check the version of Node.js and npm by running the following commands in your terminal:

node -v
npm -v

Now let’s create a new Angular project using the Angular CLI (Command Line Interface). Open your terminal and run the following command to install the Angular CLI globally on your computer:

npm install -g @angular/cli

After installing the Angular CLI, you can create a new Angular project by running the following command:

ng new my-first-angular-app

This will create a new Angular project with the name "my-first-angular-app" in the current directory. Once the project is created, navigate to the project folder by running the following command:

cd my-first-angular-app

Next, run the following command to serve the Angular application locally:

ng serve

This will start a development server at http://localhost:4200 where you can view your Angular application. Open your web browser and navigate to http://localhost:4200 to see your Angular application running.

Now, let’s create our first component in the Angular application. Components are the building blocks of an Angular application and are used to define the UI and behavior of different parts of the application. To create a new component, run the following command:

ng generate component hello-world

This will create a new component named "hello-world" inside the src/app folder of your project. Open the hello-world.component.ts file in the src/app folder and add the following code to define the component:

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

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {

  message = 'Hello, World!';

  constructor() { }

  ngOnInit(): void {
  }

}

In this code, we have created a new component called HelloWorldComponent and defined a message property with the value ‘Hello, World!’. We will bind this message property to the UI in the next step.

Next, open the hello-world.component.html file in the src/app folder and add the following code to display the message in the UI:

<h1>{{ message }}</h1>

This code uses Angular’s interpolation syntax to bind the message property to the UI. Now, if you navigate to http://localhost:4200/hello-world in your web browser, you should see the message "Hello, World!" displayed on the screen.

That’s it! You have just created your first Angular JS application with Dr. N. Shirisha. This is just the beginning, and there is a lot more to learn about Angular JS and web development. I hope this tutorial was helpful, and I encourage you to explore more about Angular JS and its features. Thank you for joining us in LEC28 on Web Technologies I.