Angular چیست؟ آموزش کامل و جامع Angular

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ title }}</h1>
    <p>به Angular خوش آمدید!</p>
  `
})
export class AppComponent {
  title = 'برنامه من';
}

my-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │   └── app.module.ts
│   ├── assets/
│   ├── index.html
│   ├── main.ts
│   └── styles.css
├── package.json
└── angular.json

import { Meta, Title } from '@angular/platform-browser';

@Component({...})
export class SEOComponent {
  constructor(
    private meta: Meta,
    private title: Title
  ) {
    this.title.setTitle('عنوان صفحه | نام برنامه');
    this.meta.addTags([
      { name: 'description', content: 'توضیحات صفحه برای موتورهای جستجو' },
      { name: 'keywords', content: 'Angular, فریم‌ورک, جاوااسکریپت, وب' }
    ]);
  }
}

// user-profile.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  template: `
    <div class="profile-card">
      <h2>{{ user.name }}</h2>
      <p>{{ user.email }}</p>
      <button (click)="updateProfile()">به‌روزرسانی پروفایل</button>
    </div>
  `,
  styles: [`
    .profile-card {
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
  `]
})
export class UserProfileComponent implements OnInit {
  user = {
    name: 'علی محمدی',
    email: '[email protected]'
  };

  ngOnInit() {
    // کدهای مربوط به مقداردهی اولیه
  }

  updateProfile() {
    // منطق به‌روزرسانی پروفایل
  }
}

// user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://api.example.com/users';

  constructor(private http: HttpClient) {}

  getUsers(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl);
  }
}

// user-list.component.ts
@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class UserListComponent implements OnInit {
  users: any[] = [];

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers()
      .subscribe(users => this.users = users);
  }
}

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'users', component: UserListComponent },
  { path: 'users/:id', component: UserDetailComponent },
  { path: '**', component: NotFoundComponent }
];

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

// app.component.html
<nav>
  <a routerLink="/home">خانه</a>
  <a routerLink="/users">کاربران</a>
</nav>

<router-outlet></router-outlet>

// registration.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-registration',
  template: `
    <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
      <div>
        <label for="name">نام:</label>
        <input id="name" formControlName="name">
        <div *ngIf="registrationForm.get('name')?.errors?.['required']">
          نام الزامی است
        </div>
      </div>

      <div>
        <label for="email">ایمیل:</label>
        <input id="email" formControlName="email" type="email">
        <div *ngIf="registrationForm.get('email')?.errors?.['email']">
          ایمیل معتبر نیست
        </div>
      </div>

      <button type="submit" [disabled]="!registrationForm.valid">
        ثبت‌نام
      </button>
    </form>
  `
})
export class RegistrationComponent {
  registrationForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.registrationForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.registrationForm.valid) {
      console.log(this.registrationForm.value);
    }
  }
}

// feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';
import { FeatureService } from './feature.service';
import { FeatureRoutingModule } from './feature-routing.module';

@NgModule({
  declarations: [
    FeatureComponent,
    // سایر کامپوننت‌های مرتبط
  ],
  imports: [
    CommonModule,
    FeatureRoutingModule
  ],
  providers: [
    FeatureService
  ],
  exports: [
    FeatureComponent
  ]
})
export class FeatureModule { }

<div *ngIf="isLoggedIn">
  <h2>خوش آمدید {{ username }}</h2>
  
  <ul>
    <li *ngFor="let item of items; let i = index">
      {{ i + 1 }}. {{ item.name }}
    </li>
  </ul>

  <div [ngClass]="{'active': isActive, 'disabled': !isEnabled}">
    محتوای پویا
  </div>

  <select [(ngModel)]="selectedOption">
    <option *ngFor="let option of options" [value]="option.id">
      {{ option.name }}
    </option>
  </select>
</div>