آموزش نصب و راه اندازی پروژه انگولار 18 (نصب،معرفی ویژگی ها)

با سلام خدمت همه دوستان و همراهان همیشگی وب سایت فرازکُد:

همانطور که قبلا توضیح داده شده است Angular یک فریم‌ورک توسعه وب است که توسط گوگل توسعه یافته و به طور خاص برای ساخت اپلیکیشن‌های وب تک‌صفحه‌ای (Single Page Applications – SPAs) طراحی شده است. این فریم‌ورک به دلیل ویژگی‌های قدرتمند و قابلیت‌های مقیاس‌پذیری که دارد، به یکی از محبوب‌ترین ابزارها در دنیای توسعه وب تبدیل شده است. در ادامه، به بررسی نصب Angular می‌پردازیم.

برای نصب Angular 18، شما ابتدا باید Node.js را نصب کنید، زیرا Angular به npm (مدیر بسته‌ی Node.js) نیاز دارد. به وب‌سایت رسمی Node.js بروید (nodejs.org) و نسخه‌ی LTS (نسخه‌ی پشتیبانی طولانی‌مدت) را دانلود و نصب کنید. قبل از شروع، اطمینان حاصل کنید که Node.js و npm (مدیر بسته نود) بر روی سیستم شما نصب شده است. می‌توانید با استفاده از دستورات زیر نسخه‌های نصب‌شده را بررسی کنید:

node -v
npm -v

نصب Angular 18 با Angular CLI

Angular CLI (رابط خط فرمان Angular) ابزار اصلی برای ایجاد، توسعه و مدیریت پروژه‌های Angular است. برای نصب آخرین نسخه‌ی Angular CLI از طریق npm، دستور زیر را اجرا کنید:

npm install -g @angular/cli

این دستور Angular CLI را به صورت سراسری (global) روی سیستم شما نصب می‌کند. برای بررسی موفقیت‌آمیز بودن نصب، دستور زیر را اجرا کنید:

ng version

این دستور باید نسخه‌ی CLI و سایر وابستگی‌های Angular را نمایش دهد.

• ایجاد پروژه جدید Angular

پس از نصب Angular CLI، می‌توانید یک پروژه جدید ایجاد کنید. برای این کار، دستور زیر را اجرا کنید:

ng new my-angular-app

در اینجا my-angular-app نام پروژه شماست. می‌توانید هر نامی که می‌خواهید انتخاب کنید. پس از اجرای این دستور، CLI از شما می‌پرسد که آیا می‌خواهید Angular Routing را فعال کنید و نوع استایل (CSS، SCSS و غیره) را انتخاب کنید.

پس از ایجاد پروژه، به دایرکتوری پروژه بروید و سرور محلی را راه‌اندازی کنید:

cd my-angular-app
ng serve

سپس می‌توانید با رفتن به آدرس http://localhost:4200 اپلیکیشن خود را مشاهده کنید.

به‌روزرسانی Angular

اگر می‌خواهید به آخرین نسخه Angular (18) به‌روزرسانی کنید، می‌توانید از دستور زیر استفاده کنید:

ng update @angular/cli @angular/core

Angular 18 به عنوان آخرین نسخه از فریم‌ورک Angular، ویژگی‌ها و بهبودهایی را نسبت به نسخه‌های قبلی خود معرفی کرده است. در زیر به برخی از مهم‌ترین ویژگی‌ها و بهبودهای Angular 18 نسبت به نسخه‌های قبلی اشاره می‌کنم:

• بهبود عملکرد
  بهینه‌سازی‌های جدید در Change Detection: Angular 18 بهبودهایی در سیستم تشخیص تغییرات (Change Detection) ارائه داده است که باعث افزایش کارایی و کاهش بار بر روی CPU می‌شود. این بهبودها به ویژه در اپلیکیشن‌های بزرگ و پیچیده مشهود است.
• پشتیبانی از Standalone Components
  کامپوننت‌های مستقل (Standalone Components): Angular 18 به توسعه‌دهندگان این امکان را می‌دهد که کامپوننت‌ها را بدون نیاز به ماژول‌ها ایجاد کنند. این ویژگی به سادگی و قابلیت استفاده مجدد از کامپوننت‌ها کمک می‌کند و ساختار پروژه را ساده‌تر می‌کند.

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

@Component({
  selector: 'app-standalone',
  template: `<h2>Standalone Component</h2>`,
  standalone: true // این کامپوننت مستقل است
})
export class StandaloneComponent {}

در اینجا، Standalone Component به‌طور مستقل تعریف شده و می‌تواند به راحتی در دیگر کامپوننت‌ها یا ماژول‌ها استفاده شود.

• بهبودهای TypeScript
  پشتیبانی از TypeScript 5.x: Angular 18 از TypeScript 5.x پشتیبانی می‌کند که شامل بهبودهایی در نوع‌گذاری و کارایی است. این بهبودها به توسعه‌دهندگان این امکان را می‌دهد که از ویژگی‌های جدید TypeScript بهره‌مند شوند.

type User = {
  id: number;
  name: string;
};

function getUser(id: number): User | null {
  // فرض کنید که کاربر را از یک منبع داده می‌خوانیم
  return { id, name: 'John Doe' }; // TypeScript به‌خوبی نوع را تشخیص می‌دهد
}

• بهبود در Router
  بهبودهای جدید در Angular Router: Angular 18 بهبودهایی در سیستم مسیریابی (Router) ارائه داده است که شامل پشتیبانی بهتر از lazy loading و بهینه‌سازی‌های مربوط به بارگذاری مسیرها می‌شود. این ویژگی‌ها به توسعه‌دهندگان کمک می‌کند تا اپلیکیشن‌های سریع‌تر و بهینه‌تری بسازند.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent, loadChildren: () => import('./about/about.module').then(m => m.AboutModule) } // Lazy loading
];

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

• بهبود در ابزارهای توسعه
  Angular CLI بهبودهایی در Angular CLI ارائه داده است که شامل دستورات جدید و بهبودهای عملکردی می‌شود. این بهبودها به توسعه‌دهندگان این امکان را می‌دهد که به راحتی پروژه‌های جدید را ایجاد و مدیریت کنند.

ng generate component my-new-component --skip-tests

با استفاده از گزینه –skip-tests، می‌توانید به راحتی از ایجاد فایل‌های تست جلوگیری کنید، که برای پروژه‌های خاص مفید است.

• بهبود در مستندات
  Angular 18 با مستندات بهبود یافته و جامع‌تر عرضه شده است که به توسعه‌دهندگان کمک می‌کند تا بهتر با ویژگی‌ها و قابلیت‌های جدید آشنا شوند.
• بهبود در تست‌پذیری
  Angular 18 بهبودهایی در ابزارهای تست ارائه داده است که شامل پشتیبانی بهتر از تست‌های واحد و تست‌های end-to-end می‌شود. این بهبودها به توسعه‌دهندگان کمک می‌کند تا کدهای خود را بهتر تست کنند و از وجود باگ‌ها جلوگیری کنند.
• بهبودهای امنیتی
  Angular 18 با بهبودهای امنیتی جدیدی عرضه شده است که به حفاظت از اپلیکیشن‌ها در برابر حملات متداول کمک می‌کند.
• بهبود عملکرد با Change Detection
  Angular 18 بهبودهایی در سیستم تشخیص تغییرات (Change Detection) ارائه داده که باعث افزایش کارایی می‌شود.