چارچوب های JS را با من بیاموزید: Angular – سفر یک مبتدی

سلام ، علاقه مندان به کد همکار! به دومین قسمت از آنچه من می گویم سریال “یادگیری JS با من” می نامم. من کاملاً هیجان زده ام که این کار را با شما شروع کردم ، زیرا ، بیایید با آن روبرو شویم ، چارچوب های یادگیری می توانند ارعاب کننده باشند – اما وقتی این کار را با هم انجام می دهیم خیلی بهتر است!

سفر چارچوب آغاز می شود

من باید اعتراف کنم هنگامی که من برای اولین بار با JavaScript شروع به کار کردم ، API DOM بومی را ناامید کننده دیدم. انتخاب عناصر احساس “مشکل ساز” ، رسیدگی به رویداد در مرورگرها متناقض بود ، و انیمیشن ها نیاز به نوشتن ده ها خط کد داشتند. صدا آشنا است؟

در آن زمان ، jQuery با فلسفه “نوشتن کمتر ، بیشتر انجام دهید” به نجات رسید. این انقلابی بود و تغییر کرد که چگونه یک نسل از توسعه دهندگان (خودم شامل) به توسعه جبهه نزدیک شدند.

اما امروز ، ما در حال ورود به قلمرو جدید هستیم: زاویه داربشر این چارچوبی است که مدتی است که وجود دارد ، دارای پشتوانه شرکت از Google است و قول می دهد بسیاری از سردردهایی را که با ساختن برنامه های وب مدرن با آن روبرو هستیم ، حل کند.

چرا در سال 2025 زاویه ای؟

ممکن است تعجب کنید: “با این همه چارچوب های مدرن در آنجا ، چرا باید زاویه ای یاد بگیرم؟”

سوال عالی! به همین دلیل فکر می کنم زاویه ای سزاوار توجه شما است:

1. پذیرش شرکت: Angular به طور گسترده ای در برنامه های در مقیاس بزرگ استفاده می شود. در طول کار مشاوره من ، با مشاغل متعددی روبرو شده ام که سیستم های مهم را در مورد Angular اداره می کنند.

2. راه حل کامل: در حالی که برخی از چارچوب ها بر روی لایه مشاهده تمرکز می کنند ، Angular یک بستر کامل با همه چیز از مسیریابی گرفته تا اعتبار سنجی پخته شده در آن فراهم می کند.

3. ادغام تیراندازی: Angular در آغوش TypeScript ، که تایپ استاتیک را به JavaScript اضافه می کند. به من اعتماد کنید ، هنگامی که به آن عادت کردید ، تعجب خواهید کرد که چگونه بدون آن زندگی کرده اید!

4. واقعیت بازار کار: از طریق لیست های شغلی مرور کنید و به ویژه برای موقعیت های سطح شرکت ، به طور مکرر Angular ذکر شده را مشاهده خواهید کرد.

5. ساختار عقیده: Angular نظرات در مورد نحوه ساخت برنامه شما دارد ، که می تواند هنگام کار در تیم های بزرگ یک نعمت باشد.

اولین پروژه زاویه ای خود را تنظیم کنید

بیایید دستانمان را کثیف کنیم! من دیروز حدود یک ساعت صرف کردم فقط محیط خود را آماده کردم ، و اوه پسر ، این یک سفر بود. اما نگران نباشید ، من قدم به قدم شما را طی می کنم.

پیش نیازهای

قبل از شیرجه رفتن ، شما نیاز دارید:

• node.js و npm: Angular node.js نسخه 14.x یا بعد از آن نیاز دارد
• کلیدی زاویه ای: رابط خط فرمان برای زاویه

مرحله 1: node.js و npm را نصب کنید

اگر قبلاً Node.js را نصب نکرده اید ، به Nodejs.org بروید و آخرین نسخه LTS را بارگیری کنید.

برای تأیید نصب ، ترمینال خود را باز کرده و اجرا کنید:

node -v
npm -v

مرحله 2: CLI زاویه ای را نصب کنید

Angular CLI ایجاد برنامه ها ، تولید کد و انجام کارهای مختلف توسعه را آسان می کند. آن را با استفاده از NPM در سطح جهانی نصب کنید:

npm install -g @angular/cli

نصب را تأیید کنید:

ng version

هنگامی که من برای اولین بار این دستور را اجرا کردم و آرم هنری ASCII را در ترمینال خود دیدم ، به معنای واقعی کلمه گفتم “اوه!” با صدای بلند این چیزهای کوچک است ، درست است؟

مرحله 3: اولین پروژه زاویه ای خود را ایجاد کنید

اکنون ما آماده ایجاد اولین پروژه خود هستیم:

ng new learn-angular-with-me

در طول تنظیم ، Angular CLI سؤال خواهد کرد:

• این که آیا می خواهید مسیریابی زاویه ای اضافه کنید (بله!)
• کدام پیش پردازنده CSS را می خواهید استفاده کنید (من فعلاً با CSS معمولی چسبیده ام)

این لحظه ای بود که فهمیدم زاویه ای در حال آشفتگی نیست. CLI سؤالات متفکرانه ای می پرسد و یک ساختار جامع پروژه را تنظیم می کند.

مرحله 4: برنامه خود را اجرا کنید

به فهرست پروژه خود بروید:

cd learn-angular-with-me

سرور توسعه را شروع کنید:

ng serve --open

در --open پرچم به طور خودکار مرورگر شما را باز خواهد کرد http://localhost:4200/بشر

وقتی برای اولین بار دیدم که آرم زاویه ای در مرورگر من می چرخد ​​، احساس می کردم که فقط به برخی از باشگاه های توسعه دهنده نخبه پیوسته ام. هم هیجان انگیز و هم کمی ارعاب کننده بود!

ساختار پروژه زاویه ای

با آمدن از jQuery ، Angular احساس … جامع. و از نظر جامع ، منظورم این است که اتفاقات زیادی در جریان است. اولین واکنش من صادقانه وقتی که ساختار پروژه را باز کردم ، کمی بیش از حد زیاد بود:

learn-angular-with-me/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets/
│   ├── environments/
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
├── angular.json
├── package.json
├── tsconfig.json
└── ... (more config files)

صبر کن ، چی؟ حتی از کجا شروع می کنم؟ در jQuery ، من فقط یک فایل HTML ایجاد می کنم ، یک فایل JS را پیوند می دهم و برنامه نویسی را شروع می کنم. در اینجا ، من به چیزی نگاه می کنم که بیشتر شبیه یک ساختار کاربردی در سطح شرکت است.

بیایید قطعات کلیدی را تجزیه کنیم:

• src/app/: اینجاست که بیشتر کد برنامه شما زندگی می کند
• app.component.ts: کلاس اصلی مؤلفه
• app.component.html: الگوی HTML برای مؤلفه اصلی
• app.module.ts: ماژول ریشه ای که به Angular می گوید چگونه برنامه خود را مونتاژ کنید

تغییر ذهنی: تفکر مبتنی بر مؤلفه

بزرگترین تغییر ذهنی که من مجبور به ایجاد آن هستم ، تفکر در مؤلفه ها است. در jQuery ، من به نوشتن توابع و دستکاری مستقیم DOM عادت کردم. با زاویه ای ، همه چیز به حول اجزا می چرخد.

یک مؤلفه در زاویه ای اساساً یک ساختمان ساختمان است که شامل:

• یک الگوی HTML (نمای)
• یک کلاس Typescript (منطق)
• سبک های CSS (نگاه)

بگذارید به شما نشان دهم که یک مؤلفه اساسی چگونه به نظر می رسد:

// task.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-task',
  templateUrl: './task.component.html',
  styleUrls: ['./task.component.css']
})
export class TaskComponent {
  taskName: string = '';
  isCompleted: boolean = false;

  toggleComplete() {
    this.isCompleted = !this.isCompleted;
  }
}

 class="task" [class.completed]="isCompleted">
  {{ taskName }}
   (click)="toggleComplete()">Toggle

/* task.component.css */
.task {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.completed {
  text-decoration: line-through;
  color: #888;
}

این اولین “آه” من بود! لحظه ای با زاویه ای. به جای اینکه HTML ، JS و CSS خود را در پرونده های مختلف پراکنده کنند ، آنها بر اساس عملکرد در کنار هم قرار می گیرند. مثل این است که هر یک از مؤلفه ها مینی برنامه خود است!

اتصال داده های دو طرفه: جادو شروع می شود

به یاد داشته باشید که چگونه در jQuery ، ما مجبور شدیم DOM را هنگام تغییر داده ها به روز کنیم؟ این چیزی شبیه به این بود:

$('#task-input').val('New Task');
// And then later:
const taskValue = $('#task-input').val();

Angular اتصال داده های دو طرفه را معرفی می کند ، که وقتی برای اولین بار آن را می بینید ، مانند جادو احساس می کنید:

این که [(ngModel)] نحو “موز در یک جعبه” نامیده می شود (به طور جدی ، این همان چیزی است که Devs Angular آن را صدا می کند!) ، و به طور خودکار خاصیت مؤلفه شما و مقدار ورودی را در Sync نگه می دارد.

وقتی این کار را برای اولین بار دیدم ، به معنای واقعی کلمه گفتم “صبر کنید ، این است؟ بقیه کد کجاست؟” این خیلی خوب بود که درست باشد!

ساخت اولین ویژگی ما: یک لیست کار

بیایید یک مؤلفه لیست کار ساده بسازیم تا احساس کند که چگونه زاویه ای در عمل کار می کند. اول ، ما یک مؤلفه جدید تولید خواهیم کرد:

ng generate component task-list

حال ، بیایید پرونده های مؤلفه خود را به روز کنیم:

// task-list.component.ts
import { Component } from '@angular/core';

interface Task {
  id: number;
  text: string;
  completed: boolean;
}

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent {
  newTaskText: string = '';
  tasks: Task[] = [];

  addTask() {
    if (this.newTaskText.trim()) {
      this.tasks.push({
        id: Date.now(),
        text: this.newTaskText,
        completed: false
      });
      this.newTaskText = '';
    }
  }

  toggleComplete(task: Task) {
    task.completed = !task.completed;
  }

  deleteTask(id: number) {
    this.tasks = this.tasks.filter(task => task.id !== id);
  }
}

/* task-list.component.css */
.task-manager {
  max-width: 500px;
  margin: 0 auto;
}

.add-task {
  display: flex;
  margin-bottom: 20px;
}

.add-task input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}

.add-task button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.task-list {
  list-style-type: none;
  padding: 0;
}

.task-list li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-list li.completed span {
  text-decoration: line-through;
  color: #888;
}

.task-list li button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

و فراموش نکنید که پرونده app.module.ts را به روز کنید تا فرم فرمول (لازم برای ngmodel) را شامل شود:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { TaskListComponent } from './task-list/task-list.component';

@NgModule({
  declarations: [
    AppComponent,
    TaskListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

در آخر ، بیایید از مؤلفه جدید ما در App.component.html استفاده کنیم:

 class="container">
  My Angular Task Manager
  

این یک لحظه دیگر ذهن برای من بود. در jQuery ، من مجبور شدم برای هر تعامل ، دستیار رویداد را بنویسم ، DOM را به صورت دستی به روز کنم و حالت را پیگیری کنم. با زاویه ای ، چارچوب همه اینها را برای ما انجام می دهد!

Angular vs jQuery: تغییر ذهنی

بیایید مقایسه کنیم که چگونه می توانیم به همان مدیر وظیفه در jQuery در مقابل Angular نزدیک شویم:

رویکرد jQuery:

1. عناصر DOM را انتخاب کنید
2. ضمیمه کنندگان رویداد را ضمیمه کنید
3. هنگامی که داده ها تغییر می کنند DOM را به صورت دستی به روز کنید
4. خود را اداره کنید

رویکرد زاویه ای:

1. تعریف خصوصیات مؤلفه (داده های شما)
2. الگوهای HTML را با اتصال داده ایجاد کنید
3. زاویه ای به طور خودکار DOM را به روز می کند
4. دولت در مؤلفه ها اداره می شود

این تغییر از برنامه نویسی ضروری به اعلامیه ، یک تغییر دهنده بازی برای من بود. من به جای گفتن مرورگر دقیقاً چه کاری باید انجام دهم ، من فقط توصیف می کنم که چه نتیجه ای را می خواهم ، و زاویه ای می گوید که چگونه می توان آن را تحقق بخشید.

دستورالعمل ها: ابرقدرت های Angular

Angular شامل چندین دستورالعمل داخلی است که HTML را با قابلیت های جدید گسترش می دهد:

• برای: یک الگوی برای هر مورد را در یک مجموعه تکرار می کند
• من f: به طور مشروط یک الگوی را شامل یا حذف می کند
• عکاسی: به صورت پویا کلاسهای CSS را اعمال می کند
• شبه: به صورت پویا سبک ها را اعمال می کند
• عکسبرداری: اتصال داده های دو طرفه ایجاد می کند

این دستورالعمل ها ساخت و سازهای پویا را بسیار ساده تر می کنند. به عنوان مثال ، به جای این کد jQuery:

$('#task-list').empty();
tasks.forEach(function(task) {
  const $li = $('
').text(task.text);
  if (task.completed) {
    $li.addClass('completed');
  }
  $('#task-list').append($li);
});

در زاویه ای ، ما به سادگی می نویسیم:

  
 *ngFor="let task of tasks" [class.completed]="task.completed">
    {{ task.text }}
  

ماهیت اعلانی الگوهای زاویه ای باعث می شود کد شما قابل خواندن و حفظ باشد. وقتی اولین بار این کار را در عمل دیدم ، فکر کردم ، “اینگونه توسعه وب باید در کنار هم باشد!”

خدمات: به اشتراک گذاری داده ها بین مؤلفه ها

با رشد برنامه شما ، می خواهید داده ها را بین مؤلفه ها به اشتراک بگذارید. این جایی است که خدمات وارد می شوند. بیایید یک سرویس کار ایجاد کنیم:

ng generate service task

// task.service.ts
import { Injectable } from '@angular/core';

export interface Task {
  id: number;
  text: string;
  completed: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class TaskService {
  private tasks: Task[] = [];

  getTasks(): Task[] {
    return this.tasks;
  }

  addTask(text: string): void {
    this.tasks.push({
      id: Date.now(),
      text,
      completed: false
    });
  }

  deleteTask(id: number): void {
    this.tasks = this.tasks.filter(task => task.id !== id);
  }

  toggleComplete(id: number): void {
    this.tasks = this.tasks.map(task => {
      if (task.id === id) {
        return { ...task, completed: !task.completed };
      }
      return task;
    });
  }
}

اکنون می توانیم TaskListComponent خود را برای استفاده از این سرویس به روز کنیم:

// task-list.component.ts
import { Component } from '@angular/core';
import { TaskService, Task } from '../task.service';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent {
  newTaskText: string = '';

  constructor(private taskService: TaskService) {}

  get tasks(): Task[] {
    return this.taskService.getTasks();
  }

  addTask() {
    if (this.newTaskText.trim()) {
      this.taskService.addTask(this.newTaskText);
      this.newTaskText = '';
    }
  }

  toggleComplete(task: Task) {
    this.taskService.toggleComplete(task.id);
  }

  deleteTask(id: number) {
    this.taskService.deleteTask(id);
  }
}

این یک مفهوم اساسی در زاویه ای است: تزریق وابستگی. هنگامی که ما وابستگی به سازنده را اعلام می کنیم ، Angular به طور خودکار نمونه ای از آن سرویس را ارائه می دهد. این باعث آزمایش و استفاده مجدد می شود