آموزش یک پروژه ساده با Angular

در ادامه مقالات آموزش ساخت یک پروژه ساده با VueJS و آموزش یک پروژه ساده با React.JS در این مقاله قصد داریم یک پروژه ساده با Angular پیاده‌سازی کنیم. در مقاله ی بررسی دقیق سه فریمورک اصلی جاوااسکریپت، با فریم ورک Angular آشنایی نسبی پیدا کردید و متوجه محبوبیت این فریم ورک شدید. حالا در پایان این مقاله، شما این توانایی رو به دست خواهید آورد تا بدون هیچ آشنایی قبلی با angular ، یک اپلیکیشن ساده با این فریم ورک محبوب پیاده سازی کنید، با ساختار ابتدایی پروژه های angular آشنا شوید و همچنین با یک API به صورت ساده ارتباط برقرار کنید. دقت داشته باشید این مقاله پیش نیازهایی دارد و قصد ما آموزش جاوااسکریپت نیست. بنابراین انتظار میرود از قبل با جاوااسکریپت آشنا باشید. همچنین آشنایی با ES6 ، npm (برای آموزش به دوره ی رایگان آموزش npm در سایت سکان آکادمی مراجعه کنید) و typescript به درک بهتر این مقاله کمک میکند. البته از دستورات ساده ای استفاده خواهیم کرد و سعی میکنیم تمامی دستورات را به زبان ساده توضیح دهیم.

آماده سازی سیستم

امروزه برای هر پروژه جاوااسکریپتی، مدیریت پکیج‌ها، نیازمندی مهمی به نظر می‌آید. این کار توسط پکیج منیجرها انجام میشود. یکی از پکیج منیجرهای محبوب برای جاوااسکریپت، npm است. پس از نصب nodejs این پکیج منیجر به صورت پیشفرض روی سیستم عامل شما نصب خواهد شد. برای نصب nodejs کافیست به لینک زیر مراجعه کرده و nodejs را با توجه به سیستم عامل خود انتخاب نصب کنید:

https://nodejs.org

همچنین برای نوشتن کدهای پروژه به یک ویرایشگر کد نیاز خواهید داشت. میتوانید از هر ویرایشگری که مورد علاقه شماست استفاده کنید. به عنوان یک پیشنهاد میتوانید از VS Code استفاده کنید. این ویرایشگر رایگان، سبک و دارای رابط کاربری ساده و زیبایی بوده و کدنویسی در این ادیتور بسیار آسان است. برای دانلود VS Code روی لینک زیر کلیک کنید:

https://code.visualstudio.com

بعد از نصب این ویرایشگر، وارد قسمت extensions شده و angular language service را نصب کنید. این افزونه در هنگام کدنویسی به شما کمک خواهد کرد.

ساخت پروژه

برای ساخت یک پروژه SPA (مخفف Single Page Application یا اپلیکیشن تک صفحه‌ای) از angular/cli استفاده خواهیم کرد. ابتدا باید این cli (مخفف command line interface) را بر روی سیستم عامل خود نصب کنید. برای این کار، command line خود (مثل cmd در windows) را باز کرده و دستور زیر را اجرا کنید:

npm install -g @angular/cli

در دستور بالا از npm برای نصب پکیج استفاده کردیم. دستور install ، یک پکیج را نصب میکند. فلگ g- باعث خواهد شد این پکیج به صورت global نصب شود. هنگامی که پکیجی را به صورت global نصب کنید، در هر مسیری از سیستم که باشید، به این دستور دسترسی خواهید داشت. برای توضیحات بیشتر اینجا کلیک کنید.

از این پس به دستور ng در ترمینال دسترسی خواهیم داشت. با استفاده از این دستور، میتوان یک پروژه جدید ایجاد کرد. برای این کار، ابتدا در command line وارد مسیری که قصد ایجاد پروژه در آن را دارید، شده و سپس دستور زیر را اجرا کنید:

ng new my-app

در این دستور my-app نام پروژه ما خواهد بود (میتوانید به صورت دلخواه نام پروژه را انتخاب کنید). حال چند لحظه صبر کنید تا پروژه ساخته شده و وابستگی‌ها و پکیج‌ها نیز نصب شوند. بعد از اجرای این دستور، فولدری به نام my-app (نام پروژه‌ای که ساختیم) ساخته خواهد شد. فولدر ساخته شده را در ویرایشگر کد خود باز کنید.
توجه: در زمان نوشتن این مقاله از نسخه‌ی angular 9 استفاده شده است.

ساختار پروژه

اگر نگاهی به ساختار پروژه بندازید با آیتم‌های زیادی روبرو میشوید. در ابتدا شاید گنگ به نظر برسند اما به مرور با هر یک از موارد آشنا خواهید شد. نیازی نیست در ابتدای کار از همه‌ی موارد و قابلیت‌ها استفاده کنید. 
برای شروع، نگاهی به فولدر src انداخته و در این فولدر، به فولدر app نگاه کنید. این فولدر به صورت پیشفرض دارای 5 فایل خواهد بود. فایل اصلی و ورودی اپلیکیشن ما app.module.ts است. 4 فایل دیگر نیز وجود دارند که فایل‌های کامپوننت پیشفرض ساخته شده توسط انگولار هستند (نام این فایل‌ها با app شروع شده که نام کامپوننت پیشفرض ساخته شده است). اجازه دهید قبل از شروع، ابتدا با ساختار یک کامپوننت در انگولار آشنا شویم.

ساختار کامپوننت در Angular

با ایجاد هر کامپوننت در انگولار 4 فایل ساخته خواهد شد. به عنوان مثال کامپوننت پیشفرض ساخته شده به نام app را در نظر بگیرید. این کامپوننت دارای 4 فایل مجزا است:
• app.component.html: این فایل، فایل template کامپوننت است و کدهای html در این فایل قرار میگیرد.
• app.component.css: این فایل شامل کدهای CSS و استایل کامپوننت خواهد بود.
• app.component.ts: این فایل شامل کدهای جاوااسکریپت کامپوننت است.
• app.component.spec.ts: در این فایل کدهای تست کامپوننت نوشته میشود.
همچنین برای ساخت یک کامپوننت دلخواه میتوانید از دستور زیر استفاده کنید:

ng generate component

تعریف پروژه

قصد داریم اپلیکیشن ساده‌ای بسازیم که قیمت دلاری یک کالا را از ورودی دریافت کرده و با دریافت قیمت لحظه‌ای دلار و سپس ضرب با قیمت ورودی، قیمت ریالی کالا را به عنوان خروجی نمایش دهد. برای دریافت قیمت لحظه ای دلار به تومان، از API زیر استفاده خواهیم کرد:

https://api.tgju.online/v1/data/sana/json

API بالا پاسخی با فرمت JSON به صورت زیر نمایش خواهد داد:

{
  "sana": {
    "data": [
      {
        "title": "سامانه سنا دلار خرید",
        "slug": "sana_buy_usd",
        "p": 258861,
        "d": 6137,
        "dp": 2.37,
        "dt": "low",
        "h": 258861,
        "l": 258861,
        "t": "۰۹:۰۳:۰۴",
        "updated_at": "2020-09-20 09:03:04"
      }
      // more data
    ]
    // api meta data
  }
}

ساخت اپلیکیشن

بیایید برای شروع، یک استایل کلی برای پروژه در نظر بگیریم. برای قسمت بالای صفحه، یک navbar ساده در نظر میگیریم که نام پروژه در اینجا قرار میگیرد. در صفحه نیز دو label در نظر میگیریم که قیمت‌ها را نمایش خواهد داد. یکی قیمت ریالی و دیگری قیمت دلاری. در زیر این label ها نیز یک input برای دریافت قیمت از کاربر و یک button برای دریافت قیمت لحظه‌ای ارز از API معرفی شده و تبدیل قیمت‌ها در نظر میگیریم.
قبل از اینکه وارد پیاده‌سازی شویم، اجازه دهید مفهوم ماژول‌ها در انگولار رو به طور مختصر بررسی کنیم. در انگولار برای استفاده از برخی از قابلیت‌ها مثل bind کردن دو طرفه یک داده (منظور از bind کردن دو طرفه یک داده این است که با تغییر داده در قسمت کدهای جاوااسکریپت، داده در قسمت template نیز تغییر داده شود و بلعکس) در form ها ، استفاده از Restful API خارجی ، سیستم routing و تغییر کامپوننت‌ها و ... میتوانید از ماژول‌هایی که در انگولار وجود دارند استفاده کنید (همچنین میتوانید به صورت سفارشی ماژول بسازید). برای استفاده از ماژول‌ها در اپلیکیشن میتوانیم ماژول مورد نظر را import کرده و در فایل app.module.ts در قسمت imports به اپلیکیشن اضافه کنیم. به طور مثال در کد زیر از ماژول‌های BrowserModule و FormModule استفاده شده:

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

کدهای HTML زیر را در app.component.html قرار دهید:

<!-- Toolbar -->
<nav class="toolbar" role="banner">
    <span>{{appName}}</span>
</nav>
  
<div class="container">
    <div class="output-container">
        <div class="rial-price-output">Price: <strong>{{rialValue}}</strong> <small> rial</small></div>
        <div class="usd-price-output">USD: <strong>{{usdValue}}</strong> <small> USD</small></div>
    </div>
    <input type="number" class="usd-price-input" [(ngModel)]="usdValueInput" placeholder="Enter USD price..." />
    <button class="btn-convert" (click)="fetchPrice()">Convert</button>
</div>

اجازه دهید چند مورد را در کدهای بالا بررسی کنیم. همانطور که میبینید در کد بالا یک HTML ساده داریم که شامل navbar ، label ها ، input و button پروژه است. تنها شاید چند مورد برای شما تازگی داشته باشه:
• اولین مورد استفاده از {{ }} است. در angular برای استفاده از متغیرهایی که در app.component.ts قرار گرفته‌اند از {{ }} استفاده میشود (که به mustache معروف است). در قسمت بالا از متغیرهای appName و rialValue و usdValue استفاده کردیم تا توسط این متغیرها، قیمت‌ها و نام اپلیکیشن را نمایش دهیم (که در app.component.ts به عنوان متغیر تعریف خواهیم کرد).
• دومین مورد bind کردن دو طرفه یک متغیر هست. در angular برای bind کردن دو طرفه یک متغیر با یک input از ngModel استفاده میکنیم (در بالا bind شدن دو طرفه متغیرها توضیح داده شد). در مثال بالا وقتی مقدار input تغییر داده شود، مقدار usdValueInput نیز تغییر خواهد کرد. از طرفی با تغییر usdValueInput مقدار input نیز تغییر میکنه. نکته ای که باید دقت کنید این است که برای استفاده از bind کردن دو طرفه، ابتدا باید ماژول FormModule را در app.module.ts وارد کنید. این ماژول را میتوانید از angular/forms@ وارد پروژه کنید (در ادامه نحوه وارد کردن این ماژول توضیح داده شده است).

• سومین مورد این است که برای استفاده از event ها (مثل onclick) در template از قرار دادن نام event مورد نظر در () استفاده میکنیم. در قسمت بالا قصد داریم هر زمان بر روی button کلیک شد، متد fetchPrice (که در ادامه تعریف خواهیم کرد) فراخوانی شود. برای اینکار از (click) استفاده کرده و متد مورد نظر را به آن اختصاص میدهیم.

بیایید ماژول FormModule را برای bind کردن دو طرفه متغیرها به پروژه اضافه کنیم. کد زیر را در فایل app.module.ts قرار دهید:

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

import { AppComponent } from './app.component';

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

حال برای ایجاد استایل مورد نظر، کدهای CSS زیر را در app.component.css قرار دهید:

.toolbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #1976d2;
  color: white;
  font-weight: 600;
}

.container {
  margin: 120px 75px 0 75px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rial-price-output {
  font-size: 45px;
}

.usd-price-output {
  font-size: 45px;
  margin-top: 20px;
}

.usd-price-input {
  height: 40px;
  width: 230px;
  margin-top: 50px;
  padding-left: 10px;
  padding-right: 10px;
  border: 2px solid rgba(100, 100, 100, 0.3);
  border-radius: 5px;
  outline: none;
  font-size: 16px;

  transition: 200ms;
}

.usd-price-input:hover {
  border: 2px solid rgba(117, 177, 226, 0.4);
}

.usd-price-input:focus {
  border: 2px solid rgba(0, 86, 156, 0.4);
}

.btn-convert {
  cursor: pointer;
  margin-top: 30px;
  width: 250px;
  height: 40px;
  border-radius: 5px;
  border: 0;
  outline: 0;
  font-size: 16px;
  color: white;
  background-color: #3ba5ec;

  transition: 200ms;
}

.btn-convert:hover {
  background-color: #2a8cce;
}

.btn-convert:active {
  background-color: #176da7;
}

حالا وقت این است که منطق برنامه را بنویسیم. قطعه کد زیر را در فایل app.component.ts قرار دهید (در ادامه به توضیح این کدها خواهیم پرداخت):

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  appName = "Angular Converter";

  rialValue: number = 0;
  usdValue: number = 0;
  usdValueInput: string = "";

  fetchPrice() {
    fetch("https://api.tgju.online/v1/data/sana/json")
      .then(result => {
        return result.json();
      })
      .then(data => {
        let usdItem = data.sana.data.find(i => i.slug === 'sana_buy_usd');
        let usd = parseInt(usdItem.p);
        
        this.usdValue = usd;
        this.rialValue = (parseInt(this.usdValueInput) | 0) * usd;
      })
      .catch(err => {
        console.log(err);
      });
  }
}

قطعه کد بالا شامل یکسری متغیر برای ذخیره و نمایش داده ها و یک متد برای دریافت قیمت و تبدیل قیمت است.
برای ساخت متغیرها در کامپوننت تنها کافیست آن‌ها را به عنوان متغیر در class در نظر بگیرید. میتوانید type این متغیرها را نیز تعریف کنید (این مورد از ویژگی‌های typescript است). 
در کد بالا چهار متغیر برای کامپوننت در نظر گرفته شده. appName که نام پروژه ما را در بر میگیرد و در قسمت بالای صفحه در navbar نمایش داده میشود، rialValue و usdValue برای نمایش قیمت ریالی و دلاری کالا در template و usdValueInput که برای دریافت ورودی و قرار دادن مقدار input استفاده شده است.
همچنین کامپوننت ما دارای متدی به نام fetchPrice است که این متد با استفاده از fetch ، قیمت دلار را دریافت و با ضرب در مقدار ورودی کاربر (که در متغیر usdValueInput ذخیره شده است) ، قیمت ریالی کالا را محاسبه کرده و در متغیرهای کامپوننت ذخیره میکند. با تغییر این متغیرها در قسمت script، مقدار نمایشی در قسمت template نیز تغییر میکند.

اجرای پروژه

حال برای اجرای پروژه دستور زیر را در command line وارد کنید:

ng serve -o

اگر مشکلی وجود نداشته باشد، بعد از چند لحظه پروژه ساخته شده و یک پیام نمایش داده میشود که پروژه بر روی پورت 4200 در حال اجراست (ممکن است دستور بالا طول بکشد):

اگر مرورگر خود را باز کنید میتوانید پروژه را مشاهده کنید:

ساخت پروژه

دستور بالا پروژه را در حالت development اجرا میکند. در حالت development فایل خروجی پروژه ساخته نشده و با بسته شدن command line ، اپلیکیشن از دسترس خارج خواهد شد. اگر قصد ساخت پروژه را دارید از دستور زیر استفاده کنید:

ng build

این دستور فولدری به نام dist در پروژه میسازد که شامل فایل‌های bundle شده پروژه خواهد بود.
در این مقاله سعی کردیم یک اپلیکیشن خیلی ساده با angular بسازیم. میتوانید اپلیکیشن‌های بسیار قدرتمندتری با angular بسازید. برای تمرین بیشتر، سعی کنید قابلیت‌های بیشتری به اپلیکیشنی که ساختیم اضافه کنید. همچنین برای آشنایی بیشتر با angular میتوانید به مستندات در سایت رسمی angular مراجعه کنید

امیدوارم از این مقاله استفاده کرده باشید. موفق باشید.