انجام پروژه های angular

د داریم یک پروژه ساده با 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 comp

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

onent

تعریف پروژه

قصد داریم اپلیکیشن ساده‌ای بسازیم که قیمت دلاری یک کالا را از ورودی دریافت کرده و با دریافت قیمت لحظه‌ای دلار و سپس ضرب با قیمت ورودی، قیمت ریالی کالا را به عنوان خروجی نمایش دهد. برای دریافت قیمت لحظه ای دلار به تومان، از 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;
}

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

.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 نیز تغییر میکند.
اجرای پروژه
شروع یک پروژه انگولار 9 آشنا می‌شویم. برای ایجاد موفق هر پروژه «انگولار» (Angular) ‌به صوت لوکال باید سه نرم‌افزار زیر روی سیستم نصب باشند:
فهرست مطالب این نوشته
نصب نرم‌افزارها برای شروع یک پروژه انگولار ۹
ایجاد پروژه انگولار
997696

    VScode
        ویژوال استودیو کد (+) یک ادیتور سورس کد است که از سوی مایکروسافت برای ویندوز، لینوکس و macOS توسعه یافته است. این ادیتور امکان دیباگ کردن، استفاده از کنترل Git و گیت‌هاب به صورت داخلی، هایلایت کردن سینتکس، تکمیل هوشمند کد، اسنیپست و ریفکتور کردن کد را فراهم می‌سازد.
    Node
        Node.js (+) یک محیط زمان اجرای چند پلتفرمی برای جاوا اسکریپت است که کد این زبان را خارج از یک مرورگر اجرا می‌کند.
    Npm
        Npm (+) بزرگ‌ترین رجیستری نرم‌افزار جهان است. توسعه‌دهندگان اوپن سورس سراسر دنیا از npm برای اشتراک و استفاده از پکیج‌ها استفاده می‌کنند. بسیاری از سازمان‌ها نیز از npm برای مدیریت توسعه کد خود به صورت خصوصی بهره می‌گیرند.

نصب نرم‌افزارها برای شروع یک پروژه انگولار ۹

در این بخش با مراحل نصب نرم‌افزارهای مورد نیاز برای شروع یک پروژه انگولار ۹ آشنا می‌شویم.

آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS
فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس
کلیک کنید
نصب ویژوال استودیو کد

به منظور نوشتن کد باید از یک IDE استفاده کنیم. مایکروسافت یک IDE چندپلتفرمی و متن-باز توسعه داده است که صرف نظر از سیستم عاملی که استفاده می‌کنید، روی همه پلتفرم‌ها اجرا می‌شود. برای نصب این IDE به وب‌سایت آن (+) بروید و نسخه‌ای که مناسب شما است را دانلود کنید. مطمئن شوید که نسخه Stable را انتخاب می‌کنید.

پروژه انگولار 9

نرم‌افزار دانلود شده روی سیستم را باز کرده و پکیج را اجرا کنید. با پیگیری دستورالعمل‌ها مراحل نصب را تکمیل کنید.

آموزش نصب و راه اندازی پایتون در VS Code (رایگان)
فیلم آموزش نصب و راه اندازی پایتون در VS Code (رایگان) در فرادرس
کلیک کنید
نصب Node و npm

انگولار نسخه 9 نیازمند حداقل Node.js نسخه 10.13 است. پیشنهاد می‌کنیم آخرین نسخه Node را که در زمان نگارش این مقاله 12.16.3 بوده است دانلود کنید. برای دانلود Node.js به این وب‌سایت (+) ‌بروید و پکیج مناسب سیستم عامل خود را انتخاب کنید. جدیدترین نسخه Node شامل آخرین قابلیت‌ها است. اگر یک پروژه سازمانی توسعه می‌دهید بهتر است پکیج Long Term Support را انتخاب کنید.

پروژه انگولار 9

پس از دانلود شدن، فایل نصب را روی سیستم خود باز کرده و مراحل نصب را پیگیری کنید. با نصب این پکیج، npm را نیز نصب کنید. زمانی که فرایند نصب پایان یافت، باید بتوانید شروع به پروژه انگولار شِل بکنید. برای بررسی این که نرم‌افزار با موفقیت نصب شده است یا نه، می‌توانید کارهای زیر را انجام دهید:

آموزش مقدماتی نود جی اس Node.js
فیلم آموزش مقدماتی نود جی اس Node.js در فرادرس
کلیک کنید

پاورشل یا اعلان فرمان ویندوز را باز کنید و دستورهای زیر را برای بررسی نسخه نرم‌افزارهای اخیراً نصب شده وارد کنید:

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

c:\> node -v
c:\> npm -v
c:\> code -v

نسخه‌های هر کدام از نرم‌افزارهای نصب‌شده در پاورشل نمایش می‌یابد. بدین ترتیب از نصب موفقیت‌آمیز همه این موارد مطمئن می‌شویم.

پروژه انگولار 9
ایجاد پروژه انگولار

برای این که بتوانیم یک پروژه انگولار ایجاد کنیم، باید از Angular CLI استفاده کنید. Angular CLI موجب می‌شود که ایجاد اپلیکیشن که آماده به کار باشد، آسان شود. نکته جالب در مورد استفاده از Angular CLI این است که از رویه‌های مناسب انگولار پیروی می‌کند. Angular CLI یک ابزار رابط خط فرمان است که با استفاده از آن می‌توانید اپلیکیشن‌های انگولار را مقداردهی، توسعه، چارچوب‌بندی و نگه‌داری کنید.

آموزش پروژه محور AngularJS و ASP.Net Web API با معماری MVC
فیلم آموزش پروژه محور AngularJS و ASP.Net Web API با معماری MVC در فرادرس
کلیک کنید
نصب Angular CLI

رویکردهای زیادی برای نصب Angular CLI وجود دارد. در این راهنما آن را با استفاده از ابزار مدیریت پکیج NPM درون ویژوال استودیو کد نصب خواهیم کرد. پاورشل یا اعلان فرمان ویندوز را باز کنید. یک دایرکتوری برای پروژه باز کنید. در این مثال پروژه‌ای در دایرکتوری خودش که در درایو C قرار دارد ایجاد خواهیم کرد:

C:\>mkdir angular-project

به این دایرکتوری جدید بروید:

C:\>cd angular-project

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

c:\>code

زمانی که VScode باز شد، ترمینال را درون IDE باز کنید. به این منظور یا کلیدهای ترکیبی '+Ctrl را در نوار ناوبری بزنید و یا به منوی Terminal > New Terminal بروید. در ترمینال دستور زیر را وارد کرده و شروع به نصب Angular CLI در پروژه خود بکنید:

C:\angular-project> npm install -g @angular/cli@9

پروژه انگولار 9

احتمالاً از شما خواسته می‌شود که داد‌ه‌های مصرف خود را به صورت گمنام با تیم انگولار بر اساس سیاست حریم خصوصی گوگل به اشتراک بگذارید. انتخاب این گزینه به شما بستگی دارد. برای اشتراک این داده‌ها، حرف Y را وارد کرده و اینتر را بزنید. در غیر این صورت N را بزنید.

پروژه انگولار 9

نکته: اگر تصادفاً گزینه اشتراک بی‌نام داده‌ها را انتخاب کردید و سپس پشیمان شدید، همواره می‌توانید این گزینه را با وارد کردن دستور زیر غیر فعال کنید:

C:\angular-project> ng analytics off

اکنون که Angular CLI نصب شده است، می‌توانیم شروع به ایجاد یک پروژه انگولار از رابط خط فرمان بکنیم.
ایجاد پروژه انگولار از CLI

برای ایجاد یک پروژه جدید باید از دستور ng new استفاده کنیم. این دستور یک اپلیکیشن جدید انگولار را ایجاد و مقداردهی می‌کند که پروژه پیش‌فرض برای فضای کاری جدید است. برای کسب اطلاعات بیشتر در این خصوص به مستندات رسمی انگولار (+) مراجعه کنید. در ترمینال وی‌اس‌کد دستور زیر را وارد کنید. در این دستور shell-project نام اپلیکیشن/پروژه‌ای است که می‌خواهیم ایجاد کنیم:

C:\angular-project> ng new shell-project

از شما سؤال می‌شود آیا می‌خواهید مسیریابی انگولار را نیز اضافه کنید؟ (Y/N) بسته به نیازتان ممکن است بخواهید آن را نصب کنید. مثلاً اگر می‌خواهید در اپلیکیشن خود از مسیریابی استفاده کنید، حتماً باید آن را نصب کنید. در این راهنما چنین قصدی نداریم و حرف N را وارد می‌کنیم:

پروژه انگولار 9

یک بار دیگر از ما خواسته می‌شود قالب استایل‌شیتی که در این پروژه استفاده می‌کنیم را از میان گزینه‌های ارائه شده انتخاب کنیم. با استفاده از کلیدهای جهت بالا و پایین می‌توانید انتخاب کنید. در این راهنما از گزینه نخست یعنی CSS استفاده می‌کنیم.

پروژه انگولار 9

فرایند نصب چند دقیقه طول می‌کشد و به محض پایان یافتن پیامی به صورت زیر دریافت می‌کنید که نشان‌دهنده موفقیت‌آمیز بودن نصب است:

√ Packages installed successfully.

پروژه انگولار 9

اکنون که پروژه ایجاد شده است، باید آن را در VSCode باز کنیم. در نوار منوی فوقانی VSCode به منوی File > Open Folder بروید و سپس در پوشه angular-project زیرپوشه shell-project را انتخاب کنید.

پروژه انگولار 9

Visual Studio Code پروژه انگولار را که هم اینک ایجاد کردید بارگذاری می‌کند. در تصویر زیر می‌بینید که ساختار فایل پروژه شما در پنل سمت چپ VScode نمایش یافته است.

پروژه انگولار 9

برای اجرای پروژه باید از دستور زیر استفاده کنید تا کد در یک مرورگر که به پورت خاصی گوش می‌دهد کامپایل شود:

C:\angular-project\shell-project> ng serve --port 333 –o

در دستور فوق به انگولار اعلام می‌کنیم که کد را بیلد کرده و اپلیکیشن را در مرورگر پیش‌فرض در حالی که به پورت 333 گوش می‌دهد باز کند.

نکته: برای کسب اطلاعات بیشتر در خصوص دستور ng serve و گزینه‌های مختلفی که دارد به مستندات رسمی انگولار (+) مراجعه کنید.

پروژه انگولار 9

در تصویر زیر مرورگری را می‌بینید که یک اپلیکیشن انگولار که ایجاد کرده‌ایم را نمایش می‌دهد. این صفحه شامل اطلاعات پیش‌فرضی است که از سوی انگولار درون فایل app.component.html عرضه شده است و به احتمال زیاد می‌خواهید آن‌ها را با چیزی که مناسب شما است جایگزین کنید.

پروژه انگولار 9

بدین ترتیب موفق شدید نخستین پروژه انگولار خود را ایجاد کنید و اینک بر عهده شما است که هر اپلیکیشنی که دوست دارید را خلق نمایید.
آموزش شروع کار با Angular
دوره های مرتبط با این مقاله
دوره آموزشی Java
دوره آموزشی Java Spring
دوره آموزشی Android
آموزش انگولار
دوره آموزشی MVC پروژه محور همراه با Design Pattern
دوره آموزشی MVC Core With Angular 6

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

حال برای اجرای پر
در سال‌های اخیر فریمورک‌های بسیار زیادی برای زبان برنامه‌نویسی جاوااسکریپت توسعه داده شده و اغلب این فریمورک‌ها نیز توانسته‌اند خروجی‌های مناسبی از خودشان نشان دهند. یکی از این فریمورک‌ها Angular نام دارد که توسط گوگل توسعه داده شده و برای ایجاد Front-End با کارایی بالا و حرفه‌ای بسیار مناسب است. با استفاده از انگولار شما می‌توانید پروژه‌هایی با مقیاس بزرگ و سازمانی را به خوبی توسعه دهید و به همین دلیل از آن به عنوان یک فریمورک حرفه‌ای نام برده می‌شود.
معرفی انگولار

انگولار به عنوان یک پلتفرم و فریمورک برای ایجاد کردن وبسایت‌های SPA یا همان تک صفحه‌ای با استفاده از HTML و TypeScript شناخته می‌شود. معماری یک برنامه Angular به مفاهیم اساسی خاصی وابسته است.

Angular یکی از محبوب‌‌ترین‌ها و پرکاربردی‌ترین فریمورک‌های جاوااسکریپت محسوب می‌شود که از علاقه‌مندان بسیار زیادی در حوزه برنامه‌نویسی جاوااسکریپت بهرمند است. این فریمورک با TypeScript نوشته شده و این بدان معنی است که اگر شما مایل به یادگیری انگولار هستید نیاز دارید در قدم اول TypeScript را یاد بگیرید.

انگولار چیست؟

انگولار یک فریمورک‌ برای ایجاد Front-End وبسایت است که شامل تعداد زیادی کتابخانه جاوااسکریپتی می‌شود، این کتابخانه‌ها ممکن است توسط هزاران نفر توسعه داده شده باشند، در نهایت این کتابخانه‌ها در قالب یک فریمورک جمع آوری شده‌اند تا شما بتوانید با استفاده از آن وبسایت‌های مد نظر خود را شکل دهید.

فریمورک چیست؟

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

انگولار یک فریمورک متن-باز است که به وسیله گوگل نگهداری و توسعه داده می‌شود، این کتابخانه به شما کمک می‌کند تا بتوانید وبسایت ‌های SPA را به سادگی ساخته و مدیریت کنید و همچنین کدهای ساختارمندتر و قابل مدیریت ساده‌تری داشته باشید.

مزایای عمده استفاده از انگولار در وب‌اپلیکیشن‌ها به شرح زیر است:

    انگولار یک فریمورک ساختاری بر مبنای الگوی MVC است.
    انگولار  یک DOM مجازی ایجاد می‌کند که سرعت لود اطلاعات از جاوااسکریپت در HTML را بسیار بالا می‌ورد.
    با توجه به داشتن ساختار مشخص مورد استفاده شرکت‌های با تیم‌های بزرگ قرار میگیرد.
    شما می‌توانید به سادگی در انگولار unit تست بنویسید و از این جهت انگولار انتخاب بسیار مناسبی است.
    دارای پشتیبانی قوی از طرف گوگل و توسعه‌دهندگان جهانی است.
    قابلیت‌هایی از قبیل تزریق وابستگی، مسیریابی، انیمیشن، کپسوله‌سازی نما و موارد دیگر به شکل پیش فرض در انگولار وجود دارد
    انگولار یک فریمورک یکپارچه و ساختارمند برای ساخت وبسایت‌های SPA است.
    و...

پیش نیاز‌های یادگیری Angular

شما برای آنکه بتوانید کار با انگولار را شروع کنید در ابتدا باید تایپ اسکریپت بلد باشید ( برای یادگیری تایپ اسکریپت می‌توانید از دوره آموزش تایپ اسکریپت راکت استفاده کنید) و برای یادگیری تایپ اسکریپت هم نیاز است در ابتدا جاوااسکریپت را خوب بشناسید ( که برای یادگیری کامل جاوااسکریپت می‌توانید از گام یادگیری جاوااسکریپت در راکت استفاده کنید)، تنها در این صورت است که شما می‌توانید یادگیری انگولار را شروع کنید.

در صورتی که درک درستی از جاوااسکریپت و بعد تایپ اسکریپت ندارید شروع به یادگیری انگولار نکنید چون بعد از گذشت مقداری از پروسه یادگیری، دلسرد خواهید شد و قطعا از یادگیری انگولار صرفه نظر خواهید کرد.
سرفصل‌ها‌ی دوره آموزش انگولار

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

نصب و راه‌اندازی

ابتدایی‌ترین بخش کار با انگولار و یادگیری انگولار نصب و راه‌اندازی کردن پروژه‌ای بر اساس انگولار است که ما در این بخش به شکل مفصل موارد مورد نیاز برای راه‌اندازی پروژه را به شما آموزش خواهیم داد.

آشنایی با موارد پایه

در این بخش از آموزش انگولار مسائلی مثل انگولار چیست ؟ کامونتت‌ چیست ؟ appMoudule چیست ؟‌ و موارد دیگری که از مباحث پایه‌ انگولار هستند را توضیح خواهیم داد.

ارتباطات در کامپونِنت‌ها

کامونتت‌ها در انگولار قادر به صحبت با هم هستند، شما می‌توانید بین کامپونِنت‌های مختلف در یک پروژه انگولار اطلاعاتی را از پدر به فرزند یا برعکس از فرزند به پدر منتقل کنید.

کار با directive

directive دقیقا مانند attrbiute در HTML عمل میکند، در نظر بگیرید شما بتوانید برای المنت‌های HTML یک سری خصوصیات ایجاد کنید که این خصوصیات اقدامی را بر روی المنت مورد نظر در صفحه انجام می‌دهد.

چرخه‌زندگی

انگولار دارای سیستمی با عنوان چرخه‌ زندگی است که به شما اجازه می‌دهد در برخی از مراحل اجرای یک کامپوننت‌ اقدامی را انجام دهید.

برای مثال در زمان ایجاد یک کامپونِنت درخواست http به api خود بفرستید یا در صورت آپدیت شدن یک مقدار در کامپونِنت اطلاعاتی را در جای ذخیره کنید.

در این بخش شما را با متد‌های مختلف چرخه زندگی در انگولار آشنا میکنم. یادگیری درست و کاربردی چرخه‌زندگی در یادگیری و استفاده آسان‌تر Angular بسیار کاربردی است.

پروژه todo

پروژه todo این اجازه را به ما میدهد اجزا مختلف انگولار را با حالت‌های مختلف مورد بررسی قرار دهیم تا بتوانید بهتر و دقیق‌تر موارد مختلف انگولاری که تا الان آن‌ها را فرا گرفتیم به کار ببریم.

آشنایی با سرویس‌ها

سرویس ها در انگولار

شما برای هر کاری در انگولار می‌توانید یک سرویس ایجاد کنید این سرویس‌ها به شما در مدیریت بهتر کدها و همینطور قابل توسعه و خوانا کردن کدها کمک بسیار زیادی می‌کنند.

کار با فرم‌ها

ماژولِ فرم در انگولار می‌تواند به ما در ایجاد و مدیریت بهتر فرم‌ها کمک کند در این بخش به شکل مفصل و کاربردی، فرم‌ها در انگولار را به شما آموزش خواهم داد.

و...

بخش‌های بیشتر دیگری در این دوره وجود دارد که پیشنهاد میکنیم کمی به پایین اسکرول کنید تا بتوانید به شکل کامل با بخش‌های و قسمت‌های آن به شکل کامل آشنا شوید.
سوالات متداول
?
پیش‌نیاز‌های یادگیری انگولار؟
?
ورژن انگولار دوره چیست؟
?
تا چه سطحی با آنگولار آشنا می‌شویم؟
?
چقدر طول می‌کشد انگولار یاد بگیرم؟
?
انگولار برای چه پروژه‌هایی مفید است؟
گارانتی بازگشت وجه

برای آنکه به شما اطمینان دهیم، که ما از محتوای دوره‌های خود ۱۰۰ درصد مطمئن هستیم، برای این دوره گارانتی بازگشت وجه قرار داده‌ایم و این به این معنی است که اگر شما محتوای این دوره را به شکل کامل مشاهده کنید، اما نتیجه‌ای که به شما قول دادیم را دریافت نکنید ۱۰۰ درصد مبلغ پرداختی شما را برگشت خواهیم زد.
مراحل و فرایند گارانتی
جلسات دوره
بخش اول قدم ابتدایی
بخش دوم نصب و راه‌اندازی
بخش سوم آشنایی با موارد پایه
بخش چهارم ارتباطات در کامپونِنت‌ها
بخش پنجم کار با directive ها
بخش ششم چرخه‌زندگی
بخش هفتم پروژه todo
بخش هشتم آشنایی با سرویس‌ها
بخش نهم سیستم‌ روت‌ها
بخش دهم آشنایی با Observable
بخش یازدهم درخواست HTTP وآموزش Angular 6
مباحث پایه Angular 6

    انگولار 6 - مقدمه
    انگولار 6 - معرفی
    انگولار 6 - نصب محیط
    انگولار 6 - ایجاد پروژه جدید
    انگولار 6 - کامپوننت ها (Components)
    انگولار 6 - ماژول ها (Module)
    انگولار 6 - اتصال داده (Data Binding)
    انگولار 6 - اتصال رویداد (Event Binding)
    انگولار 6 - قالب ها (Templates)
    انگولار 6 - دستورالعمل ها (Directives)
    انگولار 6 - Pipes ها
    انگولار 6 - مسیریابی (Routing)
    انگولار 6 - سرویس ها (Services)
    انگولار 6 - Http Client
    انگولار 6 - فرم ها (Forms)
    انگولار 6 - انیمیشن (Animations)
    انگولار 6 - متریال (Materials)
    انگولار 6 - CLIتبدیل شدن به یک توسعه دهنده Angular
با یادگیری نحوه ایجاد برنامه های وب قوی با استفاده از چارچوب Angular ، مهارت های برنامه نویسی موجود خود را پیش ببرید. بیاموزید که چگونه از معماری جدید مبتنی بر جزء برای ایجاد برنامه های کارآمد و بین پلتفرم استفاده کنید. نحوه استفاده از ساختارها ، الگوها ، تشخیص تغییر ، اتصال داده ها و موارد دیگر را مشاهده کنید.

Explore Web Development with Angular
Take your existing programming skills forward by learning how to build robust web apps using the Angular framework. Learn how to leverage the new component-based architecture to create efficient, cross-platform apps. See how to use structures, templates, change detection, data binding, and more.
مدت زمان:۱۵ ساعت ۵۷ دقیقه
تعداد دوره ها: ۷
قیمت: ۲۳۴,۴۰۰ تومان(۳۳۵,۰۰۰ تومان)
تعداد مدرسین: ۶

دوره آموزشی یادگیری جامع انگولار (2019)
عکس مدرس Justin Schwartzenberger

Justin Schwartzenberger
دوره آموزشی یادگیری جامع انگولار (2019)
Angular Essential Training (2019)

Angular توسط Google طراحی شده است تا چالش هایی را که برنامه نویسان با ساختن برنامه های پیچیده و تک صفحه ای مواجه هستند، برطرف کند. این پلت فرم جاوا اسکریپت یک هسته محکم از قابلیت های وب را ارائه می دهد و به شما امکان می دهد از جزئیات طراحی و پیاده سازی مراقبت کنید. در این دوره، جاستین شوارتزنبرگر شما را با موارد ضروری این پلتفرم "ابرقهرمانی" آشنا می کند، از جمله ویژگی های قدرتمندی مانند اتصال داده های دو طرفه، مسیریابی جامع و تزریق وابستگی. جاستین در پلتفرم یک به یک قدم می گذارد و بر معماری اجزای Angular تمرکز می کند. بدانید Angular چیست و چه کاری می تواند انجام دهد، زیرا جاستین از ابتدا تا انتها یک برنامه وب کامل و کامل ایجاد می کند. پس از تسلط بر موارد ضروری، می توانید سایر دوره های پروژه محور را در کتابخانه ما گذرانده و برنامه Angular خود را ایجاد کنید. اهداف یادگیری Angular چیست؟ کار با اجزاء وقایع و خواص الزام آور انتقال داده ها به اجزاء استفاده از دستورالعمل ها و لوله ها ایجاد فرم های زاویه ای اعتبار داده های فرم تزریق وابستگی چگونه Angular انجام می شود برقراری تماس HTTP مسیریابی اجزای یک ظاهر طراحی شده
سطح دوره
متوسط
تاریخ انتشار
2019-06-13
آخرین بروزرسانی
ندارد
دوره آموزشی یادگیری انگولار CLI
عکس مدرس Victor Mejia

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

Victor Mejia
دوره آموزشی یادگیری انگولار CLI
Learning the Angular CLI

رابط خط فرمان (Angular (CLI ابزار پیشنهادی برای ساخت و نگهداری برنامه‌های Angular است. درک آنچه که فراهم می‌کند - و چگونگی استفاده حداکثری از ویژگی‌های آن - می‌تواند شما را برای حداکثر بهره وری توسعه با Angular آماده کند. در این دوره، بیاموزید که چگونه Angular CLI نه تنها در ایجاد پروژه‌های جدید Angular کمک می‌کند، بلکه همچنین از نحوه کار و آزمایش کار در برنامه استفاده می‌کند. مربی Victor Mejia ایجاد پروژه‌های جدید، سفارشی‌سازی سرور توسعه، تولید کد برنامه Angular، اجرای تست‌ها و موارد دیگر را پوشش می‌دهد. بعلاوه، او سناریوهای واقعی را به اشتراک می‌گذارد که می‌تواند به شما کمک کند درک عملی‌تری از نحوه استفاده از CLI را به دست آورید. با پایان این دوره، شما دانش لازم برای استفاده از Angular CLI را به عنوان ابزاری اصلی در گردش کار توسعه برنامه Angular خواهید داشت.
سطح دوره
متوسط
تاریخ انتشار
2021-01-08
آخرین بروزرسانی
ندارد
دوره آموزشی تست و اشکال زدایی در انگولار
عکس مدرس Derek Peruo

Derek Peruo
دوره آموزشی تست و اشکال زدایی در انگولار
Angular: Testing and Debugging

خطاهایی که به دلیل وابستگی از دست رفته، متغیرهای تعریف نشده یا داده ها با قالب ضعیف ایجاد نشده است، می توانند باعث توقف کار برنامه وب شما شوند. در این دوره، نحوه ردیابی و از بین بردن این نوع خطاها را در برنامه های Angular خود از طریق فرآیند تست و اشکال زدایی، بیاموزید. مربی درک پرو پیام های خطای متداول را خراب می کند و گزینه های مختلف تست و اشکال زدایی را مرور می کند. وی همچنین شامل پوشه بندی کد، نکات و ترفندهایی برای جلوگیری از مشکلات حین توسعه را به اشتراک می گذارد و به نوشتن برنامه های کنترل کننده خطاهای سفارشی می پردازد تا کار با خطاها با رشد برنامه شما آسان تر شود.
سطح دوره
متوسط
تاریخ انتشار
2021-04-30
آخرین بروزرسانی
2023-11-29
دوره آموزشی ساخت و میزبانی یک سایت Full-Stack با انگولار
عکس مدرس Shaun Wassell

Shaun Wassell
دوره آموزشی ساخت و میزبانی یک سایت Full-Stack با انگولار
Angular: Creating and Hosting a Full-Stack Site

شما Angular را یاد گرفت‌ه‌اید و می‌توانید رابط‌های front-end شگفت انگیزی ایجاد کنید - اما استقرار آنها به مواردی غیر از انگولار نیاز دارد. شما به منطق موجود در سرور و مکانی برای قرار دادن این منطق نیاز دارید. اگر می‌خواهید مهارت‌های Angular خود را در طیف گسترده‌تری از پروژه‌ها اعمال کنید - اما با توسعه سمت سرور خیلی آشنا نیستید - پس این دوره برای شما مناسب است. به Shaun Wassell، به مربی خود بپیوندید و او مراحل ساخت یک وب سایت full-stack و برمبنای Angular را از ابتدا شروع می‌کند. او نشان می‌دهد که چگونه می‌توان با استفاده از hapi بخش front-end Angular ایجاد کرد و back-end را در Node.js نوشت. او سپس نشان می‌دهد که چگونه MySQL را به back-end خود اضافه کنید، front-and و back-end را متصل کنید، تأیید اعتبار Firebase را به پروژه خود اضافه کنید و برنامه full-stack خود را به ابر منتقل کنید.
سطح دوره
متوسط
تاریخ انتشار
2020-08-21
آخرین بروزرسانی
ندارد
دوره آموزشی انگولار: برنامه های ابری با Firebase
عکس مدرس Victor Mejia

Victor Mejia
دوره آموزشی انگولار: برنامه های ابری با Firebase
Angular: Cloud-Powered Apps with Firebase

آیا می خواهید یاد بگیرید که چگونه به سرعت برنامه ها را بدون مدیریت زیرساخت بسازید؟ Firebase به شما این امکان را می دهد که دقیقاً این کار را انجام دهید. Firebase که توسط Google Cloud Platform پشتیبانی می‌شود و توسط برخی از بزرگترین برنامه‌های امروزی استفاده می‌شود، مجموعه‌ای از ابزارها برای ایجاد و مقیاس‌بندی برنامه‌های کاربردی وب است. در این دوره، به ویکتور مجیا بپیوندید تا مراحل ساخت اپلیکیشن های قدرتمند با Firebase را طی کند. برای شروع، او نگاهی به کنسول Firebase می اندازد و نشان می دهد که چگونه می توانید پروژه های مختلف Firebase را مدیریت کنید. سپس، نحوه استفاده از FirebaseAuth برای افزودن احراز هویت به برنامه شما را پوشش می دهد. ذخیره و همگام سازی داده ها با Firebase Cloud Firestore. و برنامه خود را با استفاده از میزبانی Firebase اجرا کنید. به علاوه، یاد بگیرید که چگونه با استفاده از توابع ابری Firebase، عملکردهای بدون سرور خود را ایجاد کنید. اهداف یادگیری فعال کردن احراز هویت در کنسول Firebase ذخیره و همگام سازی داده ها با Firebase Cloud Firestore نمایش داده های کاربر قوانین امنیتی Firebase Cloud Storage کنترل دسترسی با ادعاهای سفارشی و قوانین امنیتی استفاده از Firebase CLI برای استقرار برنامه خود استفاده از توابع ابری
سطح دوره
متوسط
تاریخ انتشار
2019-11-15
آخرین بروزرسانی
ندارد
دوره آموزشی ارتباطات WebSocket با Node و Angular
عکس مدرس Patrick Siewe

Patrick Siewe
دوره آموزشی ارتباطات WebSocket با Node و Angular
WebSocket Communications with Node and Angular

اگر با یک صفحه وب مواجه شدید که در زمان واقعی به روز می شود، احتمالاً WebSocket را در محل کار می بینید. برخلاف پروتکل درخواست و پاسخ HTTP، WebSocket امکان برقراری ارتباط دوطرفه و بلادرنگ را فراهم می‌کند و یادگیری نحوه استفاده از آن به شما کمک می‌کند نرم‌افزار مفیدتر و جذاب‌تری توسعه دهید. در این دوره آموزشی، Patrick Siewe به شما می آموزد که WebSocket چیست و چه کاری می تواند انجام دهد، با راهنمایی شما در ایجاد یک برنامه برای چت زنده از انتها به انتها. ابتدا، او شما را در ساخت سرور باطن در NodeJS، کدگذاری شده با TypeScript راهنمایی می کند. سپس، نحوه ساخت قسمت جلویی را به عنوان یک برنامه Angular بسیار ساده، که در TypeScript نیز کدگذاری شده است، نشان می دهد. از آنجایی که همه چیز در اطراف ما بیشتر به هم متصل و تعاملی می شود، مهارت در WebSocket فقط می تواند شما را برای کارفرمایان فعلی یا آینده قابل فروش تر و ارزشمندتر کند، بنابراین در این دوره آموزشی با پاتریک همراه باشید تا با تسلط بر WebSocket شروع کنید.
سطح دوره
پیشرفته
تاریخ انتشار
2022-03-11
آخرین بروزرسانی
ندارد
دوره آموزشی انگولار: حفظ برنامه ها
عکس مدرس Emmanuel Henri

Emmanuel Henri
دوره آموزشی انگولار: حفظ برنامه ها
Angular: Maintaining Applications

بیشتر برنامه ها با گذشت زمان رشد می کنند و تغییر می کنند. چالش توسعه دهندگان این است که مطمئن شوند پروژه های آنها با چارچوب ها و استانداردهای امنیتی در حال پیشرفت همگام هستند. این دوره به شما نشان می دهد که چگونه برنامه های Angular خود را حفظ کرده و آنها را برای رشد آماده کنید. مربی امانوئل هنری مسیر ارتقاء از Angular 2 به Angular 4 را مرور می کند و بهترین شیوه ها را برای کمک به مقیاس برنامه شما برای رشد ارگانیک، ادغام پروژه ها و چارچوب های دیگ
انجام پروژه های angular js

ژوئن 13, 2023 , admin    , بدون دیدگاه   

انجام پروژه های angular js گروه طراحی وب ای زد سافت آماده طراحی سایت وکدنویسی شما با فریم ورک angular js می باشد،با توجه سابقه چندین ساله ای زد سافت در زمینه طراحی سایت وقالب…

خواندن نوشته →
ه های Angular 8 به همراه مفاهیم و معماری انگولار را با یک مثال عملی یاد خواهید گرفت. مثال عملی که در این آموزش انجام خواهیم داد یک ماشین حساب ساده است که در سمت FrontEnd توسط انگولار 8، نمایش داده و اجرا می شود. کدهای این پروژه را می توانید از آدرس زیر دانلود و استفاده کنید:

    کدهای این آموزش در آدرس زیر قابل مشاهده و دانلود است
    https://github.com/MohammadMoeinFazeli/Angular8-FirstProjectCalculator

این آموزش به دلیل طولانی شدن در دو بخش خدمتتان ارائه می شود. در انتهای این پست می توانید لینک مطالعه بخش دوم را نیز مشاهده کنید.

برای شروع به کار و ایجاد یک پروژه ی Angular 8 باید ملزومات زیر نیاز دارید:

1- شما باید دانش مقدماتی در مورد TypeScript، HTML و CSS داشته باشید.

2- لطفا نسخه 10.9.0 یا بالاتر node js را از سایت nodejs.org برای سیستم عامل خود دانلود و نصب کنید. همراه با node js مدیریت کننده ی بسته های JavaScript یعنی npm نیز روی سیستم شما نصب خواهد شد.

3- لطفا رابط کاربری خط فرمان انگولار یعنی Angular CLI را با اجرای دستور زیر در ترمینال نصب کنید:
1
    
npm install -g @angular/cli
ایجاد پروژه ی جدید Angular 8

با اجرای کد زیر در خط فرمان (ترمینال)، برنامه ی جدیدی با انگولار 8، به کمک Angular CLI ایجاد کنید. نام این برنامه ngcalculator خواهد بود:
1
    
ng new ngcalculator

اگر از شما در مورد افزودن قابلیت routing سوال کرد عبارت n را در پاسخ وارد کنید و کلید Enter را فشار دهید (زیرا ما در این پروژه مقدماتی نیازی به قابلیت routing نداریم). سپس در هنگامی که از شما در مورد فرمت استایل دهی سوال کرد، CSS را انتخاب کنید.

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

اکنون برای اجرای این پروژه کافی است وارد پوشه ی پروژه شده و دستور اجرای برنامه انگولار را بزنید. برای این کارها دستورات زیر را در ترمینال اجرا کنید:
1
2
    
cd ./ngcalculator
ng serve
Moduleها و Componentها در Angular

انگولار از معماری مبتنی بر Module و مبتنی بر Component استفاده می کند. Module به یک بخش مهم و ویژگی اصلی در برنامه شما گفته می شود. پروژه های انگولار از چندین Module ایجاد می شوند. هر Module مجموعه ای Componentsها است. Component در عمل بخشی از صفحه ی سایت شما را کنترل می کند. هر پروژه ی Angular به صورت قرارداد از یک ماژول اصلی به نام AppModule و یک Component اصلی به نام AppComponent تشکیل شده است و به مرور ماژول ها و Component جدیدی را ما به آن اضافه می کنیم. این Module و Component اصلی در هنگام اجرای پروژه توسط Angular راه اندازی می شوند و مدخل آغازین برنامه ی ما هستند (این تنظیمات در فایل main.js قرار دارد که البته ما تقریبا هیچ وقت نیازی به تغییر آن نداریم).

ما برای این پروژه ساده از همان Module اصلی استفاده می کنیم و ماژول دیگری نیاز نداریم ولی یک کامپوننت جدید به نام calculator برای برنامه ی خود ایجاد می کنیم. بدین منظور دستور زیر را در ترمینال اجرا کنید:
1
    
ng generate component calculator --skipTests

پارامتر skipTests– به Angular CLI دستور می دهد که فایل های مربوط به Test را برای این Component ایجاد نکند.

دستور فوق یک پوشه ی جدید در مسیر src/app/calculator ایجاد می کند که حاوی فایل های مختلف کامپوننت ما است. این فایل ها عبارتند از:

1- src/app/calculator/calculator.component.css که برای استایل دهی CSS استفاده می شود.

2- src/app/calculator/calculator.component.html که قالب HTML کامپوننت ما است.

3- src/app/calculator/calculator.component.ts که منطق و کدهای typescript کامپوننت ما در آن قرار می گیرد.

اگر فایل src/app/calculator/calculator.component.ts با کدهای زیر روبرو می شوید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {
 
  constructor() { }
 
  ngOnInit() {
  }
 
}

کلاس کامپوننت ما که CalculatorComponent نام دارد به واسطه ی بخش بند ()Component@ تبدیل به یک کامپوننت انگولار شده است. اطلاعات زیر در این بخش بند وجود دارد که برای تعریف یک component در انگولار مهم هستند:

1- selector که یک tag name یا نام المان HTML به این کامپوننت نسبت می دهد و از این پس ما می توانیم این component را با استفاده از این نام همانند سایر المان های رایج HTML در بخش های مختلف برنامه ی خود استفاده کنیم.

2- templateUrl که آدرس قالب HTML این کامپوننت در آن قرار می گیرد.

3- styleUrls که یک یا چند فایل استایل برای این کامپوننت درون آن تعریف می شود.

از آنجایی که ما از قابلیت routing در پروژه ی خود استفاده نکردیم باید به نحوی کامپوننت Calculator خود را در کامپوننت اصلی قرار دهیم تا در خروجی برنامه نشان داده شود. برای این کار از همان tag name مربوط به کامپوننت Calculator یعنی app-calculator استفاده می کنیم و آن را در template کامپوننت اصلی قرار می دهیم. برای این کار کافی است کل محتوای فایل src/app/app.component.html را پاک کرده و فقط کد زیر را درون آن قرار دهید:
1
    
<app-calculator></app-calculator>
ایجاد ظاهر ماشین حساب

فایل src/app/calculator/calculator.component.html را باز کنید و کدهای html زیر را درون آن کپی کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
    
<div class="calculator">
 
  <input type="text" class="calculator-screen" value="0" disabled />
 
  <div class="calculator-keys">
 
    <button type="button" class="operator" value="+">+</button>
    <button type="button" class="operator" value="-">-</button>
    <button type="button" class="operator" value="*">×</button>
    <button type="button" class="operator" value="/">÷</button>
 
    <button type="button" value="7">7</button>
    <button type="button" value="8">8</button>
    <button type="button" value="9">9</button>
 
 
    <button type="button" value="4">4</button>
    <button type="button" value="5">5</button>
    <button type="button" value="6">6</button>
 
 
    <button type="button" value="1">1</button>
    <button type="button" value="2">2</button>
    <button type="button" value="3">3</button>
 
 
    <button type="button" value="0">0</button>
    <button type="button" class="decimal" value=".">.</button>
    <button type="button" class="all-clear" value="all-clear">AC</button>
 
    <button type="button" class="equal-sign" value="=">=</button>
 
  </div>
</div>

سپس فایل src/app/calculator/calculator.component.css را باز کنید و کدهای استایل زیر را درون آن قرار دهید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
    
.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
  }
   
  .calculator-screen {
    width: 100%;
    font-size: 5rem;
    height: 80px;
    border: none;
    background-color: #252525;
    color: #fff;
    text-align: right;
    padding-right: 20px;
    padding-left: 10px;
  }
  

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

  button {
    height: 60px;
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #c4c4c4;
    background-color: transparent;
    font-size: 2rem;
    color: #333;
    background-image: linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15);
    text-shadow: 0 1px rgba(255,255,255,.4);
  }
   
  button:hover {
    background-color: #eaeaea;
  }
   
  .operator {
    color: #337cac;
  }
   
  .all-clear {
    background-color: #f0595f;
    border-color: #b0353a;
    color: #fff;
  }
   
  .all-clear:hover {
    background-color: #f17377;
  }
   
  .equal-sign {
    background-color: #2e86c0;
    border-color: #337cac;
    color: #fff;
    height: 100%;
    grid-area: 2 / 4 / 6 / 5;
  }
   
  .equal-sign:hover {
    background-color: #4e9ed4;
  }
   
  .calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 20px;
  }

همچنین استایل های زیر را به صورت سراسری در برنامه ی انگولار خود قرار دهید. بدین منظور فایل src/styles.css را باز کرده و کدهای زیر را درون آن کپی کنید:
1
2
3
4
5
6
7
8
9
10
    
html {
    font-size: 62.5%;
    box-sizing: border-box;
  }
 
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

بسیار عالی. اکنون در صورت اجرای پروژه با دستور ng serve ظاهر برنامه ی شما همانند تصویر زیر خواهد بود که البته هیچ عمل خاصی انجام نمی دهد چون ما هیچ منطقی به برنامه ی خود اضافه نکردیم.

کار شما تا اینجا بسیار عالی بود. به دلیل طولانی نشدن آموزش، ادامه این آموزش را در پست زیر قرار می دهیم. برای مطالعه ی بخش دوم این آموزش از لینک زیر استفاده کنید
سرفصل های دوره
۱۴ فصل
۱۰۵ جلسه
۳۲ ساعت
۱
فصل اول – Api Basic Create Project
۷ قسمت
۰۱:۳۳:۱۰
۱

1-Create Layers Backend
رایگان
۱۱:۰۴
۲

2-Relations Layers
رایگان
۱۰:۵۶
۳

3-Add product With Context
رایگان
۱۶:۱۲
۴

4- Add Base Entities
۱۲:۴۱
۵

5-Configuration Entities
۱۴:۳۱
۶

6-Auto migrations-Seed Data
۱۳:۵۱
۷

7-Service Provider
۱۳:۵۵
۲
فصل دوم – Generic Repository
۱۲ قسمت
۰۳:۲۲:۳۲

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

۳
فصل سوم – Api Error Handling
۴ قسمت
۰۰:۵۸:۴۵
۴
فصل چهارم – Pagination Sorting Filtering
۵ قسمت
۰۱:۱۶:۴۷
۵
فصل پنجم – Angular Setup
۱۷ قسمت
۰۴:۳۸:۵۸
۶
فصل ششم – Error-Breadcrumb-Loading
۳ قسمت
۰۱:۱۰:۴۹
۷
فصل هفتم – Api Basket
۴ قسمت
۰۱:۰۴:۲۴
۸
فصل هشتم – Client Basket
۹ قسمت
۰۲:۲۰:۲۷
۹
فصل نهم – Identity
۱۱ قسمت
۰۳:۳۱:۱۵
۱۰
فصل دهم – Client Identity
۹ قسمت
۰۲:۲۰:۱۸
۱۱
فصل یازدهم – Order API
۷ قسمت
۰۲:۴۰:۴۳
۱۲
فصل دوازدهم – Order Client
۸ قسمت
۰۳:۴۳:۰۷
۱۳
فصل سیزدهم – Client Profile
۸ قسمت
۰۲:۱۲:۰۹
۱۴
فصل چهاردهم – Admin Profile
۱ قسمت
۰۰:۲۰:۴۵

قصد داریم در این دوره به آموزش طراحی فروشگاه اینترنتی با ASP.NET WEB API & ANGULAR بپردازیم به این نحو که Frontend Angular & Backend Web API میباشد. این دوره در زمینه برنامه نویسی وب و توسعه و دات نت می باشد. در واقع دوره ای که پیش روی شما قرار دارد ، به عنوان یک دوره جامع آموزش نحوه ساخت یک برنامه فروشگاهی به کمک دات نت کور و انگولار می باشد. در واقع این دوره بر خلاف دوره های مشابه تماما بر پایه پروژه واقعی بنا شده و شما مهارت هایی که در این دوره یاد می گیرید را می توانید به خوبی در کارهای خود از آن ها استفاده نمایید.

در این دوره از الگوی Clean Architecture از Mr. Taylor استفاده شده است که با هم با مباحث نظیر CQRS , Fluent Validators آشنا خواهیم شد

این آموزش دارای سه بخش میباشد ابتدا یک Backend را خواهیم داشت که کاملا مستقل میباشد و بخش Client را خواهیم داشت که بر پایه Angular ساخته شده است و در نهایت بخش Admin را داریم که از از قابل Metronic استفاده خواهیم نموده هر سه پروژه به صورت کاملا مستقل و جدا می باشد .
مطالب آموزش طراحی فروشگاه اینترنتی با ASP.NET WEB API & ANGULAR

    یادگیری و آشنایی با مفاهیم WEB API
    آشنایی با CQRS
    استفاده از الگوی Clean Architecture از Mr. Taylor
    آشنایی با JWT و نحوه استفاده از Token
    آشنایی با Generic repository , Unit Of Work و آشنایی با الگوی Specification Pattern که بسیار پر کاربرد میباشد
    آشنایی با Fluent Validators
    آشنایی با درگاه پرداخت زرین پال
    آشنایی با Raise کردن event ها در CQRS
    آشنایی با TDD (Test Driven Domain) و نحوه نوشتن Clean Code و نحوه نوشتن Testable Code
    آشنایی با Angular Material و Angular Bootstrap و PrimeNG
    آشنایی با Docker – Docker-Compose
    آشنایی با Resharper و نحوه استفاده از آن برای نوشتن کد سریع
    آشنایی و درک مبانی و اصول کار با Angular 14
    آشنایی با RXJS
    درک پایگاه های داده و آشنایی با مفاهیمی نظیر Cache و آشنایی با Redis , Postgres , SQL Server
    یادگیری نحوه استفاده از Automapper و بوت استرپ
    آشنایی با نوشتن Seed Data و Auto migrations
    استفاده از قالب Meronic برای پنل ادمین
    آشنایی با Git , GitHub در حین پروژه و آشنایی با Pull Request و نحوه کار با GitHub و نحوه نوشتن Board در GitHub

سرفصل‌های آموزش طراحی فروشگاه اینترنتی با ANGULAR

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

    API Basic
    API Architecture
    API Generic Repository
    Error Handling
    Paging – Filtering – Sorting
    Angular Setup
    Error Handling In Angular
    Breadcrumb and Loading
    Basket
    Identity
    Angular Identity
    Orders
    Checkout
    Order Module in Angular

بازار کار آموزش طراحی فروشگاه اینترنتی با ANGULAR

بعد از پشت سر گذاشتن این دوره شما کاملا با مفایهم اولیه از یک وب سایت فروشگاهی آشنا هستید لذا به راحتی میتوانید در مصاحبه شرکت های برنامه نویسی شرکت نموده و کسب در آمد داشته باشید که بر حسب توانایی شما میزان درآمد شما فرق خواهد داشت.
این دوره برای چه کسانی مناسب است؟

این دوره کاملا حرفه ای و پیشرفته می باشد و مهم ترین مباحث روز برنامه نویسی در آن مورد بررسی قرار می گیرد.
پیش نیازهای آموزش طراحی فروشگاه اینترنتی با ANGULAR و ASP.NET WEB API

در این آموزش فقط کافی است شما با Angular و Web Api و Docker کمی اشنایی داشته باشید

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

اگر با Docker اشنایی ندارید میتوانید از این لینک استفاده نموده و دوره Docker بنده را تهیهانگولار چیست؟ آشنایی با کاربردهای Angular

    توسینسو
    سئو ، طراحی و توسعه وب
    انگولار چیست؟ آشنایی با کاربردهای Angular

به زبان ساده ، Angular یک پلتفورم توسعه متن باز ، مبتنی بر زبان TypeScript می باشد. با استفاده از این پلتفورم امکان طراحی و توسعه ی Single Page Application ها بصورت فردی یا گروهی فراهم می گردد.
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
برای مشاهده تخفیف های ویژه امروز کلیک کنید
سرفصل های این مطلب

    انگولار چیست ؟
    منظور از SPA در انگولار چیست ؟
    اجزاء تشکیل دهنده انگولار چیست؟
        ماژول ها (Modules)
        Components
        قالب ها (Templates)
        Metadata
        سرویس ها (Services)
        تزریق وابستگی (Dependency Injection)
    مزایا و معایت انگولار چیست؟
        مزایای Angular
        معایب Angular
    تفاوت ری اکت با انگولار چیست؟
        آیا انگیولار محبوب است؟
        سرعت و علمکرد
        اتصال داده ها (Data Binding)
        کیفیت کدنویسی و نگهداری سیستم
        تست کردن سیستم
        پیچیدگی یادگیری فریم ورک ها

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

انگولار چیست ؟

بدلیل محدودیت هایی که در فریم ورک AngularJS وجود داشت ، در سپتامبر 2016 گوگل تصمیم گرفت تا یک باز طراحی کامل بروی فریم ورک محبوب خودش  یعنی AngularJS داشته باشد و این پلتفورم رو با نام Angular ارائه بدهد.
منظور از SPA در انگولار چیست ؟

SPA ، به وب سایت هایی گفته می شود که بر اساس تعامل با کاربر ، اطلاعات را از وب سرور دریافت کرده و در بدون بارگذاری مجدد صفحه ، اطلاعات را در صفحه ی فعلی نمایش میدهد و عملکرد سیستم مشابه یک برنامه می باشد.

به زبان ساده تر ، ما بارگذاری مجدد صفحه را نداریم و اطلاعات مورد نیاز مثل HTML ، CSS و کدهای JavaScript یا در اولین درخواست یا بصورت داینامیک براساس درخواست کاربر دریافت شده و نمایش داده می شوند.

معماری Angular مبتنی بر الگوی MVC می باشد و امکان جریان داشتن داده ها به شکل دو طرفه بین DOM و کد را فراهم می کند .

در ادامه به بررسی اجزاء اصلی تشکیل دهنده ی این پلتفورم می پردازیم.
اجزاء تشکیل دهنده انگولار چیست؟

در این بخش به مهمترین اجزای تشکیل دهنده انگولار پرداخته و با کاربرد های هر یک از آن ها به صورت خلاصه آشنا خواهیم شد.
ماژول ها (Modules)

هر برنامه ی Angular یک ماژول اصلی با نام AppModule را شامل می شود که دستورالعمل های مورد نیاز جهت اجرای پروژه را شامل می شود .
Components

بطور ساده ، هر Component در برنامه ی Angular ، در قالب یک کلاس تعریف می شود که داده ها و منطق مرتبط با آن Component را در خود نگه داری می کند. بطور عمومی ، یک Component ، مشخص کننده بخشی از UI سیستم می باشد. (مثلا میتوان Componentیی با نام Messages داشت که کار آن نمایش پیام های شخصی کاربر باشد و تمام منطق و ارتباطات مربوط به این بخش در داخل این Component قرار میگیرد)
قالب ها (Templates)

قالب Angular ، با ترکیب مارک آپ های Angular و  Html ، امکان تغییر در اِلِمانهای HTML را قبل از نمایش به کاربر ، برای ما فراهم می کند . بطور کلی دو مدل اتصال داده (Data Binding) در پلتفورم Angular وجود دارد:

    اتصال رویداد (Event Binding): در این نوع اتصال ، امکان پاسخ گویی به ورودی های کاربر برای برنامه فراهم می شود تا متناسب با عملکرد کاربر اتفاقی رقم بخورد . برای مثال ، اگر کاربر بروی یک دکمه کلیک کند ، یک دیالوگ نمایش داده شود ، یا وقتی کاربر اشاره گر موس را داخل یک کادر می آورد ، رنگ آن کادر عوض شود  و ...
    اتصال مشخصه (Property Binding): در این نوع اتصال ، این امکان فراهم می شود تا داده های موجود در برنامه از طریق کدهای HTML مشاهده یا تغییر داده شوند . برای مثال اگر ما یک پراپرتی با نام Username داشته باشیم ، می توانیم امکانی را فراهم کنیم تا کاربر در یک کادر متنی ، نام کاربری مورد نظرش را بنویسد و این ثبت داده توسط کاربر در پراپرتی ما ، بصورت خودکار قرار میگیرد .

Metadata

چگونگی پردازش کلاس ها توسط Angular از طریق متادیتا ها اطلاع رسانی می شود . از طریق Decorate کردن یک کلاس با استفاده از Metadata ها می توانیم به Angular بگوییم که چه انتظاری از کلاس مورد نظر داریم. برای مثال کلاس مورد نظر یک Component هست یا یک Directive یا یک سرویس و ...
سرویس ها (Services)

در پروسه ی پیاده سازی پروژه ، بخش هایی از سیستم وجود دارند که داده ها، یا منطق مورد نظر ، مختص به View نمی باشد و در بخش های مختلف پروژه قابل استفاده می باشد. در این مواقع از کلاس های سرویس یا Service Class استفاده می شود . برای مشخص کردن کلاس های این چنینی بایستی از Injectable Decorator بروی کلاس استفاده شود تا به برای کامپایلر Angular مشخص شود که این یک سرویس هست و قابلیت تزریق (Inject) به بخشهای مختلف سیستم را دارد
تزریق وابستگی (Dependency Injection)

در واقع این الگوی طراحی مختص به Angular نمی باشد. بسیاری از فریم ورک های امروزی این قابلیت را ارائه میدهند.این قابلیت سهولت دسترسی به سرویس ها و اجزاء مختلف در ساختار Angular را فراهم می سازد. برای مثال شما در یک Component نیاز به استفاده از یک سرویس به نام RestService را دارید. جهت دسترسی به این سرویس تنها کافیست که از طریق سازنده (Constructor) کلاس مربوطه ، RestService را تعریف کنید و یک شیء از کلاس RestService برای شما ساخته شده و از طریق سازنده کلاس قابل دسترس می باشد. با استفاده از این الگو، شما دیگر نگران چگونگی ساخت کلاس ها نیستید
مزایا و معایت انگولار چیست؟

در زمان توسعه ی یک سیستم ، از جمله تصمیمات مهم برای شروع کار ، انتخاب پلتفورم توسعه سیستم هست. با در نظر گرفتن فریم ورک های مختلف و متنوع شناخت معایب و مزایای هر کدوم از این پلتفورم ها در انتخاب گزینه ی نهایی بسیار مهم هست.

در این بخش برخی از مزایا و معایب پلتفورم Angular را باهم بررسی میکنیم.
مزایای Angular

    سیستم های مبتنی بر Angular ، عملا یک SPA هستن . یعنی بدون نیاز به بارگذاری مجدد صفحات ، امکان نمایش بخش های مختلف سیستم را فراهم میکند (چیزی مثل Gmail)
    فریم ورک Angular ، بسیاری از نیازهای اصلی و اساسی را در دل خودش قرار داده و همین نیاز به استفاده از کتابخانه های خارجی را تا حد زیادی کاهش میدهد. برای مثال مسیریابی (Routing) ، تزریق وابستگی (DI) یا سرویس ها بصورت پیش فرض در این فریم ورک فراهم شده است و نیاز به پیاده سازی یا استفاده از کتابخانه ی خارجی نداریم.
    فریم ورک Angular ، یک فریم ورک چند سکویی (Cross-Platform) می باشد.
    a. PWA یا Progressive Web App با بهره گیری از قابلیت های مدرن و امروزی ، امکان ارائه ی تجربه ی مشابه اپ های موبایلی را با سرعت بالا ، آفلاین ، بدون نیاز به نصب را فراهم میکنند که این قابلیت از طریق Angular قابل ارائه می باشد.
    b. امکان پیاده سازی اپ های بومی یا Native موبایل با استفاده از راهکارهای ارائه شده توسط Cordova ، Ionic یا NativeScript از طریق Angular فراهم شده است.
    c. امکان ایجاد اپلیکیشن های قابل نصب بروی سیستم های دستکتاپ مثل ویندوز ، لینوکس و مک و دسترسی به قابلیت های بومی سیستم عامل مقصد
    فریم ورک Angular امکان بارگذاری داینامیک یا دیرهنگام (LazyLoading) برای بخش های مختلف سیستم را فراهم می کند که این امر امکان بارگذاری سریعتر وب اپ را فراهم میکند .
    زبان مورد استفاده در Angular ، زبان محبوب TypeScript هست که با ارائه ی ابزارهای مناسب و ساختار کدنویسی مناسب ، امکان مدیریت و توسعه ی برنامه را بسیار جذاب و راحتتر می کند .
    با استفاده از فریم ورک Karma ، امکان پیاده سازی تست ، برای بخش های مختلف سیستم فراهم شده است . بطوری که قبل از هر ریلیز ، امکان تست کردن بخش های مختلف سیستم فراهم می شود و می توان از عملکرد سیستم اطمینان حاصل کرد .
    فراهم شدن امکان Server Side Rendering یا SSR با استفاده از Angular Universal که امکان رندر کردن برخی از بخش های سیستم در سمت سرور را فراهم میکند که این مسئله عمدتا در مورد مسائل مرتبط با SEO کاربردی هست .

معایب Angular

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

    این فریم ورک قابلیت و امکانات محدود در حوزه ی SEO ارائه میکند . در حال حاضر تنها راهکار برای عبور از این محدودیت استفاده از SSR با استفاده از Angular Universal می باشد.
    سخت و پیچیده بودن مراحل یادگیری این فریم ورک ، باعث کاهش محبوبیت این فریم ورک در بین سایر فریم ورک ها مثل React یا Vue شده است.
    استفاده از Angular بدلیل پیچیدگی و گستردگی این فریم ورک ، در پیاده سازی سیستم های کوچک توصیه نمی شود و بهتر هست که برای سیستم های بزرگ و گسترده مورد استفاده قرار بگیرد .


تفاوت ری اکت با انگولار چیست؟

تفاوت ری اکت با انگولار چیست

در این قسمت ، به بررسی برخی تفاوت های فریم ورک Angular با فریم ورک محبوب React می پردازیم.
آیا انگیولار محبوب است؟

هر دو فریم ورک، جزو فریم ورک های محبوب توسعه دهندگان می باشند . اما با بررسی آمار GitHub ، فریم ورک React با داشتن نزدیک به 203 هزار ستاره نسبت به Angular با تقریبا 87 هزار ستاره از محبوبیت بالاتری برخورد دار است.

همینطور بر اساس آمار منتشر شده در وب سایت Statista فریم ورک React جایگاه دوم را در توسعه ی وب بدست آورده است ، در حالی که Angular در جایگاه پنجم قرار دارد.

انگولار چیست؟

(کاربرد و استفاده از Angular)

انگولار چیست؟

(کاربرد و استفاده از React)


با توجه به موارد گفته شده ، همینطور نمودارهای ارائه شده ، برنده ی این رقابت ، React هست.
سرعت و علمکرد

هردو فریم ورک در سرعت و عملکرد قابلیت هایی دارند که خروجی مناسب و پرسرعتی را ارئه میدهد .

در Angular ، ساختار پیاده سازی پروژه و امکاناتی مثل $cacheFactory ، امکان بهبود عملکرد و سرعت سیستم پیاده سازی شده در این فریم ورک را فراهم میکند . همینطور برخلاف React ، فریم ورک Angular تغییرات را بروی DOM اصلی صفحه اعمال میکند و با بهره گیری از مکانیزم های منحصرفردی جهت تشخیص تغییرات ایجاد شده در صفحه ، سرعت خوبی و مناسبی را ارائه میکند . بطورکلی فریم ورک Angular در پیاده سازی پروژه های در مقیاس متوسط و بزرگ مناسب می باشد و بدلیل پیچیدگی های کلی ، در پیاده سازی پروژه های کوچک گزینه ی مناسبی نمی باشد.

در مقابل فریم ورک React ، مفهومی تحت عنوان Virtual DOM را ارائه میدهد که تغییرات ایجاد شده در خروجی را بروی این ساختار اعمال میکند و سپس با خروجی اصلی که کاربر مشاهده می کند جایگزین میکند .

این روش ، بروزرسانی داده ها و تغییرات بروی خروجی را با سرعت بیشتری تضمین میکند .

همینطور قابلیت استفاده از مجدد از Component های ایجاد شده ، روش دیگری است که سرعت و عملکرد این فریم ورک را بالا می برد .
اتصال داده ها (Data Binding)

بزرگترین تفاوت بین Angular و React در نحوه ی مدیریت حالت (State) سیستم می باشد.

در فریم ورک React ، مدیریت حالت سیستم توسط کتابخانه هایی نظیر Helmet یا React Router صورت میگیرد ،در صورتی که فریم ورک Angular از یک ساختار درونی برای اتصال داده ها بهره میگیرد.

فریم ورک Angular ، اتصال داده ی دو طرفه(Two-way data binding) ، استفاده میکند . بدین معنی که حالت یک مدل با هر گونه تغییری ،چه در UI و چه در Backend بصورت خودکار بروزرسانی می شود . و این تغییرات بدلیل اتصال المان های HTML به متغییر ها و پراپرتی های یک مدل ، نه تنها در UI نمایش داده می شوند بلکه در Backend نیز بروزرسانی می شوند . این قابلیت ، امکان پیاده سازی ساده تر سیستم های پویا را فراهم میکند .

از طرفی React ، از اتصال یک طرفه داده ها (one-way data binding) بهره میگیرد و تنها در صورتی تغییرات را در خروجی سیستم اعمال میکند که حالت یک مدل بروزرسانی شود . همینطور هرگونه تغییر در UI سیستم (مثلا تغییر در یک ورودی متنی) تغییری در اطلاعات مدل ایجاد نمی شود مگراینکه توسط توسعه دهنده این تغییر اطلاع رسانی شود تا فریم ورک تغییرات را اعمال نماید .
کیفیت کدنویسی و نگهداری سیستم

فریم ورک Angular با بهره گیری از ابزارهایی نظیر AngularCLI ، ساخت و ایجاد بخش های مختلف یک سیستم را آسان کرده است . همینطور یکپارچه سازی بخش هایی نظیر Angular Core و Angular Material با ساختار اصلی Angular ، امکان توسعه و تحویل پروژه ها را ساده تر و مناسب تر کرده است.

ابزاری نظیر AngularCLI، پیچیدگی های یادگیری این فریم ورک را آسان تر کرده است. این ابزار با ارائه ی خروجی های بهینه شده و مناسب از پروژه ، امکان ارائه ی پروژه های سازگار و پرسرعت را فراهم میکند .

فریم ورک React، نه تنها جنبه های مختلفی جهت بهبود کیفیت کد نویسی وجود دارد ، بلکه با ارائه مشخصه های خاص ، این فریم ورک خود را از سایر فریم ورک های تحت وب مستثنی کرده است . برای مثال استفاده از displayName جهت دیباگ پیام های ثبت شده توسط فریم ورک ، امکان تفکیک کامپوننت ها را در بررسی سیستم فراهم میکند .

همینطور توسعه دهندگان می توانند بجای تمرکز بروی کدهای مربوط به فریم ورک ، بروی استفاده از ویژگی ها و قابلیت های جدید JavaScript باشند .

همینطور React ، با ارئه Linter های ، امکان کدنویسی ساختارمند و یکپارچه را در ساختار React فراهم میکند ، به این دلیل که Linter ها با ارائه مجموعه ای از قوانین کدنویسی و ساختاری ، باعث ایجاد یک سیستم با ساختار و کدنویسی مشخص می شوند .
تست کردن سیستم

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

تست کردن و تست نویسی از موارد اصلی در پروسه ی پیاده سازی یک سیستم می باشد. خواه این تست کردن مربوط به Backend سیستم باشد ، خواه UI.

بطور کلی بدلیل داینامیک بودن نوع داده ها در زبان Javascript بسیار سخت می باشد و همین سختی الزام به تست نویسی را بیشتر از پیش روشن میکند تا از عملکرد درست سیستم در مقابل تغییرات مختلف اطمینان خاصل شود .

فریم ورک Angular ، مسائل م