Step-by-step tutorial to get you started with Angular

Welcome to this comprehensive Angular tutorial, where we will guide you through the process of building web applications using the Angular framework. Angular is a powerful JavaScript framework developed by Google, designed to simplify the development of dynamic, single-page applications. Whether you are a beginner or an experienced developer, this tutorial will provide you with a solid foundation in Angular and its core concepts.

Step 1: Installation and Setup

• Install Node.js: Angular requires Node.js and npm to be installed on your system. Visit the Node.js website (https://nodejs.org) and download the appropriate installer for your operating system. Follow the installation instructions.
• Install Angular CLI: Open your terminal or command prompt and run the following command to install the Angular CLI globally:

  
npm install -g @angular/cli

Step 2: Creating a New Angular Project

Open your terminal or command prompt and navigate to the desired directory where you want to create your Angular project.
Run the following command to create a new Angular project:

  
ng new my-angular-app

After the project is created, navigate into the project directory:

  
cd my-angular-app

Step 3: Running the Application

Start the development server by running the following command:

  
ng serve

Open your web browser and navigate to http://localhost:4200. You should see the default Angular application running.

Step 4: Creating a Component

In your terminal or command prompt, run the following command to generate a new component:

  
ng generate component my-component

Open the src/app directory and you will find a new directory named my-component. Inside this directory, you'll see the generated files for the component.
Open src/app/app.component.html and add the following code:

  
<h1>Welcome to My Angular App</h1>
<app-my-component></app-my-component>

Open src/app/my-component/my-component.component.ts and replace the generated code with the following:

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

@Component({
  selector: 'app-my-component',
  template: `
    <p>This is my custom component!</p>
  `,
})
export class MyComponentComponent {}

Step 5: Creating a Service

In your terminal or command prompt, run the following command to generate a new service:

  
ng generate service my-service

Open the src/app directory and you will find a new file named my-service.service.ts. Open it and replace the generated code with the following:

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

@Injectable({
  providedIn: 'root'
})
export class MyServiceService {
  getData(): string {
    return 'This is the data from the service.';
  }
}

Step 6: Using the Service in the Component

Open src/app/my-component/my-component.component.ts and modify the code as follows:

  +
import { Component } from '@angular/core';
import { MyServiceService } from '../my-service.service';

@Component({
  selector: 'app-my-component',
  template: `
    
{{ data }}
  `,
})
export class MyComponentComponent {
  data: string;

  constructor(private myService: MyServiceService) {}

  ngOnInit() {
    this.data = this.myService.getData();
  }
}

Step 7: Implementing Routing

Open src/app/app-routing.module.ts and modify the code as follows:

  
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyComponentComponent } from './my-component/my-component.component';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: MyComponentComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Open src/app/app.component.html and modify the code as follows:

  
<h1>Welcome to My Angular App</h1>
<nav>
  <a routerLink="/home" routerLinkActive="active">Home
</nav>
<router-outlet></router-outlet>

Step 8: Creating a Form

Open src/app/my-component/my-component.component.html and modify the code as follows:

  
<form (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input type="text" id="name" [(ngModel)]="name" name="name">
  <button type="submit">Submit</button>
</form>

Open src/app/my-component/my-component.component.ts and modify the code as follows:

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

@Component({
  selector: 'app-my-component',
  template: `
    <form (ngSubmit)="onSubmit()">
      <label for="name">Name:</label>
      <input type="text" id="name" [(ngModel)]="name" name="name">
      <button type="submit">Submit</button>
    </form>
  `,
})
export class MyComponentComponent {
  name: string;

  onSubmit() {
    console.log('Submitted: ' + this.name);
  }
}

Step 9: Making an HTTP Request

Open src/app/my-service.service.ts and modify the code as follows:

  
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class MyServiceService {
  constructor(private http: HttpClient) {}

  getDataFromAPI() {
    return this.http.get('https://api.example.com/data');
  }
}

Open src/app/my-component/my-component.component.ts and modify the code as follows:

  
import { Component } from '@angular/core';
import { MyServiceService } from '../my-service.service';

@Component({
  selector: 'app-my-component',
  template: `
    Get Data from API
    
{{ data }}
  `,
})
export class MyComponentComponent {
  data: string;

  constructor(private myService: MyServiceService) {}

  getData() {
    this.myService.getDataFromAPI().subscribe(
      response => {
        this.data = response;
      },
      error => {
        console.log('Error occurred:', error);
      }
    );
  }
}

Congratulation