Fullstack > Tools > 🅰️ Angular

Angular

Angular is a popular framework for building web applications using TypeScript. This guide will help you install Angular and set up a new project.

Step 1: Install Node.js

Angular requires Node.js to manage dependencies.

Download and install Node.js from Node.js official website.
Verify installation by running the following commands:
```
node -v
npm -v
```

Step 2: Install Angular CLI

Angular CLI (Command Line Interface) is used to create and manage Angular projects.

Open a terminal or command prompt and run:
```
npm install -g @angular/cli
```
Verify installation:
```
ng version
```

Step 3: Create a New Angular Project

Navigate to the directory where you want to create your project.
Run the following command to create a new project:
```
ng new my-angular-app
```
Navigate to the project folder:
```
cd my-angular-app
```

Step 4: Serve the Application

Start the development server by running:
```
ng serve
```
Open a browser and go to http://localhost:4200/ to see the running Angular application.

Step 5: Run an Example Angular Component

Generate a new component:
```
ng generate component hello-world
```

Open src/app/hello-world/hello-world.component.ts and modify it:

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

@Component({
  selector: 'app-hello-world',
  template: '<h1>Hello, Angular!</h1>',
  styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent {}

Open src/app/app.component.html and add:
```
<app-hello-world></app-hello-world>
```
Save and restart the server if needed.
You should see “Hello, Angular!” displayed in blue.

Conclusion

You have successfully installed Angular and created your first component! You can now start building powerful web applications with Angular.

← Fullstack Tools

References