ما در این آموزش رایگان با مثال‌هایی از HTML، CSS و JavaScript به آموزش Angular 8 برای مبتدیان پرداخته ایم.

معرفی Angular 8

انگولار یک فریمورک JavaScript است که از آن برای نوشتن برنامه‌­های تحت وب و موبایلی استفاده می­‌شود. Angular 8 یک تایپ ­اسکریپت (TypeScript) سمت کلاینت است که از آن برای ساخت برنامه­‌های تحت وب پویا استفاده می­شود.
گوگل اولین نسخه­ آن را در ۲۰۱۲ و با نام انگولار جی­ اس (Angular JS) عرضه کرد. angular 8 نسخه­ آپدیت شده­ انگولار ۲ است.

قبل از اینکه به سراغ انگولار برویم، باید پیش‌­زمینه‌­ای مناسب از جاوا اسکریپت، HTML، CSS، AJAX و تایپ‌­اسکریپت داشته باشیم.

انگولار ۸ کتابخانه­ UI (واسط کاربری) بسیار مناسبی برای برنامه­‌نویسان است. angular کامپوننت UI­ای است که قابلیت استفاده­ مجدد (reusable) دارد و به ما کمک می­‌کند صفحات و برنامه‌­های تحت وبِ جذاب، سازگار و کارا بنویسیم.

Angular 8 یک فریمورک جاوا اسکریپت است که به ما این امکان را می­دهد که برنامه‌­های تک صفحه‌­ای (SPA: Single-page Application) جذاب بسازیم. “یک برنامه­ تک صفحه­‌ای، برنامه­‌ای تحت وب یا وب­سایتی است که شبیهِ برنامه­‌های قابل اجرا، پویا و سریع تحت دسکتاپ است.
SPAها دارای منو، button و بلاک‌هایی در یک تک‌­صفحه هستند و با کلیک کاربر، صفحه­ جاری را بدون گرفتن صفحاتی جدید از سرور، به­‌روزرسانی می­‌کنند. به همین دلیل سرعت بالایی دارند.”

پیشنهاد فرانش به شما
آموزش React Native: برنامه نویسی اندروید با جاوا اسکریپت

انگولار ۸ کاملاً براساس کامپوننت­‌هاست و دارای چندین ساختار درختی است که کامپوننت والد و فرزند دارند.
کلاس‌­های Angular 8 به گونه­‌ای ساخته می­‌شوند که صفحه­ وب در صفحه نمایش‌­هایی با اندازه‌­های مختلف به ­خوبی نمایش داده شود.
به همین دلیل این صفحات با موبایل­، تبلت، لپ­تاپ و سیستم‌­های بزرگ‌­تر سازگارند.

آموزش نصب Angular 8 در ویندوز ۱۰

 

ورژن­‌های انگولار:

ورژن­تاریخ انتشار
انگولار جی ­اساکتبر ۲۰۱۰
Angular 2.0سپتامبر ۲۰۱۶
Angular 4.0مارس ۲۰۱۷
Angular 5.0نوامبر ۲۰۱۷
Angular 6.0می ۲۰۱۸
Angular 8.0اکتبر ۲۰۱۸

تاریخ انتشار دو نسخه­ اصلی انگولار به صورت زیر است:

ورژن­تاریخ انتشار
Angular 8.0مارس/آوریل ۲۰۱۹
Angular 9.0سپتامبر/اکتبر ۲۰۱۹

برنامه­ گوگل این است که هر ۶ ماه یک نسخه­ اصلی Angular را منتشر کند.

چگونه­ انگولار خود را به نسخه­ Angular 8 ارتقا دهیم؟ (آموزش به روز رسانی به انگولار ۸ )

انگولار ۸ نسخه­ اصلی Angular است که در آن فریمورک اصلی انگولار، CLI و متریال‌­های آن آپدیت شده‌­اند. اگر از انگولار۵ یا ۶ استفاده می­‌کنیم و می­‌خواهیم برنامه‌­مان را به Angular 8 ارتقا دهیم، دستور زیر آن را به جدیدترین نسخه ارتقا می­‌دهد.

ویژگی­‌های Angular 8

برخی از ویژگی­‌های انگولار ۸ با انتشار نسخه‌­های جدید همراه شد تا فریمورک را جذاب­‌تر و قوی­‌تر کند.

ویژگی‌های Angular 8

مزایا و معایب ۸ Angular

 

ارائه­ اولیه­ Ivy:

پروژه­ی Ivy کامپایلر Angular و کد زمان ­اجرای آن را از نو می­‌نویسد تا آن را بهتر، سریع‌­تر و کوچک‌­تر کند.

دوره های مرتبط در فرانش

کامپوننت‌­های Ivy:

  1. tree shakable: قسمت‌­های استفاده­ نشده­ کدتان را حذف می­‌کند. فریمورک این کامپوننت را تفسیر نمی‌­کند. در عوض، این کامپوننت دستورات را ارجاع می­‌دهد. اگر راهنمایی­‌های مناسب باندل (Bundle) را ارجاع ندهد، باندل­‌ها کوچک‌­تر و زمان­‌های لود سریع‌­تر می­‌شوند.
پیشنهاد فرانش به شما
آموزش نرم افزار سالیدورک در 1 ساعت!

آموزش انگولار - Tree shakable Angular 8

 

  1. فوت­‌پرینت‌­هایی (FootPrint) با حافظه­ کمتر: یک DOM افزایشی است که اگر view، DOM را تغییر ندهد، دیگر لازم نیست هیچ حافظه‌ای از view رندر بگیرد.
    بنابراین تنها زمانی تخصیص حافظه صورت می­‌گیرد که نودهای DOM اضافه یا حذف شوند.
    از آنجایی که بیشتر فراخوانی­‌های template چیزی را عوض نمی­‌کنند، در مصرف حافظه صرفه‌­جویی قابل ­توجهی می­‌شود.

آموزش انگولار - فوت­‌پرینت‌­هایی (FootPrint) با حافظه­ کمتر

Differential Loading:

برنامه­ جدیدی که Angular CLI می‌­سازد، باندل­‌های جدا ندارد و مرورگر آن را به صورت خودکار لود می‌­کند که منجر به لود و رندرگیری سریع‌­تر آن می‌شود.
شکل زیر نشان می‌­دهد که چگونه اندازه­ باندل را کوچک­‌تر می­‌کند.

آموزش انگولار - Differential Loading

Backward compatibility روتر:

تیم انگولار حالت backward compatibility را به روتر انگولار اضافه کرد. این کار به ایجاد مسیر برای پروژه­‌های بزرگ‌­تر کمک می­‌کند و با lazy loading، رفتن به angular را ساده‌­تر می­‌کند.

Web worker building:

یک web worker برای ایجاد باندل­‌های ساخت (production) اضافه شده است. باندل­‌ها برای بهبود تواناییِ اجرای موازی ضروری هستند و موجب افزایش سرعت می­‌شوند.

پشتیبانی از Bazel:

هدف اصلی Bazel بیلدهایی با قابلیت ساخت مجدد (Reproducible) است، اما بیلدهای همزمان بسیار سریع­‌تر خواهند بود و اگر برنامه­‌تان از چندین ماژول و کتابخانه استفاده می‌­کند، از آن سود خواهد برد.
خود فریمورک angular از Bazel برای بیلد استفاده می­‌کند. انتظار می­رود که @angular/cli را در ورژن ۹ اضافه کند.

آموزش انگولار - پشتیبانی از Bazel

Lazy Loading:

lazy loading بر اساس مفهوم روتینگ انگولار (Routing) است و با lazy loading کردن داده­‌های لازم، اندازه­ فایل­‌های بزرگ را کاهش می­‌دهد.

اشتراک حافظه­ Opt-in:

اگر کاربران بخواهند، اشتراک تله­ متری Opt-in اجازه می­‌دهد که دستورات استفاده شده و سرعت بیلد برنامه جمع­ آوری شود و این اطلاعات به توسعه ­دهندگان Angular در آینده کمک خواهند کرد.

پیشنهاد فرانش به شما
آموزش Node.js رایگان – راهنمای جامع مبتدیان پروژه محور

بهبود CLI Workflow:

Angular CLI مدام در حال بهبود است و درحال حاضر قرار است ng-build، ng-test و ng-run با ابزارات و کتابخانه­های شخص سوم بهتر شوند.

Builders API:

نسخه­ جدید این امکان را فراهم می‌­کند که از builders API استفاده کنیم.
برنامه از builder برای عملیات­‌های mail مانند Serve، build، test، link و e2e استفاده می­‌کند و درحال حاضر حتی می­‌توانیم builder خودمان را هم بسازیم.

بهبود سرویس $location:

سرویس $location به شما کمک می‌­کند تا وضعیت سرویس مکانی را بگیرید، تمامی تغییرات مکانی را دنبال کنید و propertyهای protocol port search را بازیابی کنید.

Service worker:

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

آموزش ارتقا به Angular 8

ارتقای یک برنامه از Angular 7 به ۸ بسیار ساده است.

 

تفاوت­‌های انگولار جی‌­اس و انگولار (Angular JS vs. Angular)

Angular JSangular
انگولار جی‌­اس یک فریمورک جاوا اسکریپت متن باز سمت کلاینت برای توسعه­ برنامه­‌های تحت وب است.انگولار یک فریمورک تایپ‌­اسکریپت فول استک برای توسعه­ برنامه‌­های وب است.
Angular JS از مفهوم scope یا controller استفاده می­کند.Angular به جای scope یا controller از ساختار سلسله مراتبی کامپوننت­‌ها استفاده می­کند.
Angular JS از لود شدن پویای صفحات پشتیبانی نمی‌کند.Angular از لود شدن پویای صفحات پشتیبانی می­‌کند.
Angular JS سینتکسی ساده دارد و روی صفحات HTML استفاده می­شود.انگولار از سینتکس­‌های مختلفی استفاده می­‌کند. از “[]” برای property binding و از “()” برای event binding استفاده می­کند.
Angular JS یک فایل جاوا اسکریپت ساده است، صفحات HTML از آن استفاده می­‌کنند و از ویژگی­‌های زبان­‌های برنامه‌­نویسی سمت سرور پشتیبانی نمی­‌کند.Angular از زبان تایپ‌­اسکریپت استفاده می­‌کند که زبان­‌های برنامه‌­نویسی مبتنی بر کلاسِ شئ­‌گرا را ارائه می‌­دهد.
از ویژگی­‌های زبان­‌های برنامه­ نویسی سمت سرور پشتیبانی می­‌کند.
پیشنهاد فرانش به شما
10 نکته کلیدی برای یادگیری PHP

­

تفاوت Angular و React

کلیدواژه‌­های انگولار

Angular CDK چیست؟

component Dev Kit) CDK) مجموعه­‌ای از ابزارهاست که الگوهای ارتباطی معمول را پیاده­ سازی می­‌کند و محتاط است که از دید کاربر پنهان بمانند.
یک نمایش abstract از قابلیت­‌های اصلی کتابخانه­ Angular material ارائه می­‌دهد و از استایل­‌هایی مشابه material design استفاده نمی­‌کند.

Angular CLI چیست؟

Angular CLI با نام Angular Command Line Interface شناخته می­‌شود. یک ابزار دستوری برای نوشتن برنامه­‌های Angular است.
اگر نمی­‌خواهیم روی نصب و کانفیگ کردن (Configuration) تمامی dependencyها و ارتباط آن‌ها با هم وقت بگذاریم، می­‌توانیم از Angular CLI استفاده کنیم. Angular CLI ابزاری مناسب برای ساخت و کارِ مناسب با برنامه­‌های angular است.

Ng در angular به چه معناست؟

پیشوند ng نشان­دهنده­ “انگولار” است. تمامی دستورات built-in انگولار از این پیشوند استفاده می‌­کنند.
پیشنهاد می‌­شود که از این پیشوند در دستورات خود استفاده نکنید تا از تلاقی نام در ورژن­‌های بعدی angular پیشگیری شود.

ویدیو آموزش ۸ Angular:

اگر این آموزش ۸ Angular برای شما مفید بوده است:

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