Angular Tutorial

Angular is a popular open-source web application framework developed by Google. It is designed to simplify the development of dynamic web applications. This tutorial will guide you through the basics of Angular, including setting up your development environment, creating a new Angular project, and writing your first Angular component.

Getting Started

Before you start, make sure you have Node.js and npm installed on your machine. You can download and install them from here.

Once you have Node.js and npm installed, you can install the Angular CLI globally using npm:

npm install -g @angular/cli

Creating a New Angular Project

To create a new Angular project, run the following command in your terminal:

ng new my-angular-project

This will create a new directory called my-angular-project with all the necessary files and configurations for an Angular project.

Writing Your First Angular Component

Navigate to your new project directory:

cd my-angular-project

Now, let's create a new component. Run the following command:

ng generate component my-first-component

This will generate a new component called my-first-component in the src/app directory.

Editing the Component

Open the my-first-component.ts file in your favorite code editor. Replace the existing code with the following:

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

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.css']
})
export class MyFirstComponent {
  title = 'Welcome to Angular!';

  constructor() {
    console.log('MyFirstComponent has been initialized!');
  }
}

Next, open the my-first-component.component.html file and replace the existing code with the following:

<h1>{{ title }}</h1>

Now, open the app.component.html file and add the following code to include your new component:

<app-my-first-component></app-my-first-component>

Running the Angular Application

To run your Angular application, execute the following command in your terminal:

ng serve

This will start a development server and open your application in your default web browser. You should see a page with the title "Welcome to Angular!".

For more information on Angular, visit the official Angular documentation.

---

If you want to dive deeper into Angular, check out our Angular Advanced Tutorial for more advanced concepts and techniques.