Angular 6 یا Angular 6 RC در 4 آوریل 2018 منتشر شد. از سال 2016، تیم Angular یک برنامه دو ساله برای نسخه های مختلف فریمورک خود از Angular 2 تا Angular 6 در نظر گرفته است و Angular 7 منتظر ما خواهد بود. سال تمام تلاش تیم Angular این بود که در طول هر نسخه جدید، حجم فریم ورک را کاهش دهند و سرعت آن را افزایش دهند.
در حال حاضر آخرین نسخه Angular 6 Angular 6 – rc.5 می باشد که در 14 آوریل 2018 منتشر شد اما نسخه پایدار Angular 6 هنوز در اختیار توسعه دهندگان قرار نگرفته است. همانطور که توسط گوگل و تیم Angular اعلام شده است، نسخه نهایی تا پایان ماه آوریل منتشر خواهد شد.
ویژگی ها انگولار ۶
افزودن توکن برای مشخص کردن نوع ماژول انیمیشن
- در نسخه های قبلی: امکان مشخص کردن وضعیت اجرایی کامپوننت ها درو ماژول های BrowserAnimationsModule یا NoopAnimationsModule وجود نداشت.
- در نسخه آپدیت شده: می توان مشخص کرد که کدام نوع انیمیشن درون کامپوننت اجرا شود.
- افزودن پشتیبانی از ناوبری (مسیردهی یا Navigation) در آدرس های URL
- در نسخه قبلی: با استفاده از پکیج ServerWorker می توانستیم بین درخواست هایی که در هر آدرس بود ریداریکت کنیم.
- در نسخه جدید: می توانیم الگوریتم های جدیدی داخل فایل ngsw-config.json ایجاد کنیم تا آدرس های URL شامل کاراکترهای خاصی باشند.
پشتیبانی از زبان برنامه نویسی تایپ اسکریت ورژن ۲٫۷ (البته برای استفاده از این نسخه باید node 8 نصب باشد.)
ارتقاء سطح تست API در نرم افزار
بروزرسانی نسخه Rxjs
استفاده از پکیج رندر lvy (پکیج lvy جهت بهبودی سرعت و عملکرد نرم افزارهای انگولار و کاهش حجم آن استفاده شده است)
پشتیبانی از Component Dev Kit (این قابلیت یا CDK به شما امکان نصب بیش از ۳۰ کامپوننت UI یا رابط کاربری را می دهد تا بدون هیچ مشکلی بتوانید از آنها جهت ساخت رابط کاربری و ارتقاء تجربه کاربری استفاده کنید)
بهبود ویژگی های فرم ها
باره آنها صحبت کنیم.
المان های انگولار (Angular Elements)
این پکیج در درجه اول برای بهبود بخشیدن به کامپوننت های وب ایجاد شده است که توسط اکثر مرورگرهای مدرن (بغیر از Edge) پشتیبانی می شود. به عبارت دیگر پکیج Angular Elements این امکان را می دهد که یک کامپوننت انگولار را ایجاد و آن را به عنوان یک کامپوننت وب منتشر کنید که در صفحات HTML بسیار قابل استفاده است.
تبدیل کردن یک کامپوننت به یک المان دلخواه یا Custom Element، راه ساده ای برای داینامیک کردن مطالب HTML است.
تایپ اسکریپت ۲٫۸
نسخه انگولار ۶ از زبان برنامه نویسی تایپ اسکریپت ۲٫۸ پشتیبانی می کند. در این نسخه از تایپ اسکریپت معرف ها (declaration)، مقدار دهی اولیه کلاس ها، داده های با نوع شرطی و بهبود عملکرد namespace ها، تقویت شده است.
رندرر Ivy یا Ivy Renderer
رندرر Ivy به عنوان یکی از جدیدترین موتورهای رندر و شبیه سازی به حساب می آید که جدیدا معرفی شده است. این موتور رندر سرعت شبیه سازی و بهینه سازی کدها را به شکل حیرت انگیزی افزایش می دهد. در انگولار به صورت پیش فرض این موتور فعال نیست و باید آن را دستی اعمال کنید.
کامپایلر Bazel
در این نسخه از انگولار ۶، کامپایلر Bazel اضافه شده است. هنگامیکه شما کدهای خود را کامپایل می کنید تنها کدهایی که دچار تغییرات شده اند و نیاز به بارگذاری مجدد دارند، کامپایل خواهند شد. در این صورت حجم کدها و بهینه سازی آنها به بهترین شکل ممکن صورت می پذیرد.
تغییرات RouterModule
در حال حاضر در دستوری به نام NavigationStart هیچ راهی وجود ندارد که بدانیم ناوبری یا مسیردهی به صورت اجباری صورت گرفته یا از طریق تغییر محل انجام شده است. یعنی مثلا شما روی یک لینک کلیک کرده اید و نرم افزار را مجبور کرده اید صفحه را تغییر دهد یا اینکه فقط می خواهید موقعیت فعلی نرم افزار را با تغییر مکان نما، دگرگون کنید. با استفاده از ویژگی navigationSource، مرکز و منبع ناوبری مثلا (اسکرول کردن موقعیت یا تغییر URL/URI) مشخص می شود. از طرفی یک ویژگی دیگر به نام restoredState به امکانات ناوبری اضافه شده است که با استفاده از آن می‌توان موقعیت فعلی صفحه ای که درون آن قرار داریم را بدست آوریم. این دو ویژگی routing را در انگولار ۶ بسیار ساده می کنند.
تغییرات FormsModule
NgModelChange: این رویداد زمانی رخ می دهد که وقتی مقادیر موجود در یک قالب تغییر می کنند یا بروزرسانی می شوند. در ورژن های قبلی این رویداد قبل از آپدیت و بروزرسانی قالب رخ می داد. اما در نسخه انگولار ۶ شما می توانید تغییرات را اعمال و مقدار value را در فرم کنترل (Form Control) در اختیار داشته باشید.
Form Control statusChanges: در انگولار ۶ یک رویداد به نام PENDING هنگامی منتشر می شود (emit) که کلاس کنترل (AbstractControl) به نام markAsPending فراخوانی شود.
بهبود اعتبارسنجی فرم ها بر اساس pattern: قبل از انگولار ۶، اعتبارسنجی انگولار بر اساس پترن (pattern) یا الگو خطوط را در بر نمی گرفت. یعنی المان هایی مانند ^ و / یا & و / یا $ را پشتیبانی نمی کرد. اما در نسخه جدید اعتبارسنجی بر روی عبارت های فوق قبل از افزودن آنها صورت می گیرد.
ng update: در حال حاضر یک دستور برای بروزرسانی وابستگی های انگولار به صورت خودکار وجود دارد. تمام وابستگی های موجود در */angular@ با استفاده از این دستور به آخرین نسخه پایدار خود بروزرسانی می شوند.
App Budgets: با استفاده از ویژگی می‌توان Angular CLI را به گونه ای محدود کرد که حجم نهایی فایل های جاوا اسکریپت یا bundle را کاهش دهد. می توان به گونه ای این محدودیت را اعمال کرد که در صورت افزایش حجم bundle یک پیغام خطا نمایش داده شود.
در نسخه جدید انگولار تغییرات جالبی در بخشی از پکیج های آن ایجاد شده است. پکیج های angular/core@ و angular/common@ و angular/compiler@ و ابزار Angular CLI و Angular Material (انگولار متریال) عمده ترین تغییرات را داشته اند. این تغییرات بدین معنی نیست که اگر کسی با انگولار ۲ یا ۴ یا ۵ کار می کرده دیگر نمی تواند نرم افزار خود را بروزرسانی کند بلکه به معنای بهبود عملکرد و روند برنامه است و هیچ تداخلی با ورژن های قبلی ندارد. در ادامه به معرفی برخی از ویژگی های نسخه جدید این فریم ورک می پردازیم:
دستور ng update
شوکه شدید؟ بله درست می بینید انگولار در نسخه ۶ یک دستور به ابزار CLI خود اضافه کرده که به صورت
ng update package
نوشته می شود و وظیفه ی آن تحلیل کردن فایل
package.json
و در نهایت آگاه سازی برنامه نویس از ورژن های جدید این فریم ورک می باشد.
این دستور به شما کمک می کند تا نسخه صحیح و سازگاری از وابستگی های مورد نیاز پروژه خود را نصب کنید، از طرفی دیگر می تواند این وابستگی ها را به نسخه صحیحی بروزرسانی کند. اگر در ساختار وابستگی ها (dependencies) پروژه شما با شماتیک (Schematics) مناسبی طراحی شده باشد به صورت خودکار به نسخه جدید بروزرسانی می شود.
دستور ng update پکیج های شما را بازنویسی (replace) نمی کند بلکه با استفاده از npm یا yarn این پکیج ها را مدیریت کرده و آنها را بروزرسانی می کند. مثلا شما با این وضعیت نباید نگران فایل های قبلی خودتان باشید.
برای مثال دستور
ng update @angular/core
تمام پکیج های فریم ورک انگولار مانند RxJS و TypeScript را بروزرسانی می کند و تمام ساختار برنامه ی شما را با آخرین نسخه آن تطبیق می دهد.
البته این دستور تا زمانیکه تمام کتابخانه ها و پکیج ها شماتیک مورد نیاز update را درون کدهای خود اعمال نکنند کاربردی ندارد ولی به زودی اکثر آنها به این تنظیمات تغییر مسیر می دهند.
دستور ng add
یکی دیگر از دستورهای ابزار Angular CLI، دستور
ng add package
می باشد که با استفاده از آن قابلیت های جدیدی را می توان به پروژه خود اضافه کرد. دستور ng add برای مدیریت پکیج ها جهت دانلود وابستگی های جدید آنها بکار می رود. به مثال های زیر توجه کنید:
دستور
ng add @angular/pwa
نرم افزار شما را به یک نرم افزار PWA تبدیل می کند
دستور
ng add @ng-bootstrap/schematics
پکیج بوت استراپ (ng-boostrsap) را به نرم افزار شما اضافه می کند
دستور
ng add @angular/material
پکیج انگولار متریال (Angular Material) و قالب های مورد نیاز آن را نصب می کند
دستور
ng add @clr/angular@next
ابزار Clarity را به پروژه شما اضافه خواهد کرد
و در نهایت دستور
ng add @angular/elements
امکانات مورد نیاز برای کار با document-register-element.js را به پروژه شما اضافه خواهد کرد.
المان های انگولار یا Angular Elements
اولین نسخه Angular Elements روی ترکیب راه اندازی کامپوننت ها درون یک نرم افزار انگولاری به عنوان یک Custom Elements تمرکز کرده بود. حالا در نسخه جدید این قابلیت به انگولار المنت اضافه شده است که شما می توانید ماژول یا app-root های دلخواه خودتان را در ابتدای شروع برنامه راه اندازی کنید.
همچنین بخوانید : تاریخچه انگولار و مقایسه ورژن‌های مختلف آن .
کامپوننت های راه انداز (شروع اولیه) انگولار متریال
همانطور که در تصویر زیر ملاحظه می کنید شما می توانید با استفاده از یک خط دستور اولین تگ انگولار متریال خودتان را ایجاد کنید مثلا باز زدن دستور
ng generate @angular/material:material-dashboard --name=my-dash
می توانید یک تگ به نام my-dash درست کرده که شکل ظاهری آن دقیقا مشابه یک داشبورد صفحه مدیریت است. یعنی فقط با یک دستور، ظاهر کلی یک داشبورد را ایجاد کنید.
در ادامه به بخشی از این تغییرات و امکانات می پردازیم
ویژگی Material Sidenav
با استفاده از این ویژگی می توانید یک سایدبار یا منوی کناری به نرم افزار خودتان اضافه کرده و آن را مدیریت کنید. این کامپوننت از قابلیت رسپانسیو برخوردار است. جهت دسترسی به این سایدبار باید دستور زیر را در خط فرمان یا CMD خود تایپ کنید:
ng generate @angular/material:material-nav --name=my-nav
ویژگی Material Data Table
با استفاده از این قابلیت شما می توانید یک جدول داده ای منظم برای خود تولید کنید. دستور اجرایی آن به صورت زیر می باشد
ng generate @angular/material:material-table --name=my-table
در صورتیکه می خواهید به تمام این دستورها دسترسی کامل داشته باشید روی این لینک کلیک کنید.
محیط کاری CLI یا CLI Workspaces
انگولار ۶ از قابلیت CLI Workspace برخوردار است. یعنی شما می توانید با استفاده از این ویژگی پروژه های متعددی با کتابخانه های متنوع به یک پروژه انگولاری با یک CLI واحد، اضافه کنید. در حال حاضر در ورژن ۶ انگولار پروژه های CLI به جای فایل
angular-cli.json
درون فایل
angular.json
قرار گرفته است
در مجموعه کدهای زیر نمونه ای از این CLI را مشاهده می کنید:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ | { “projects”: { “my-project-name”: { “projectType”: “application”, “architect”: { “build”: { “configurations”: { “production”: {}, “demo”: {}, “staging”: {}, } }, “serve”: {}, “extract-i18n”: {}, “test”: {}, } }, “my-project-name-e2e”: {} }, } |
پشتنیبانی از کتابخانه
یکی از ویژگی های خیلی کلیدی انگولار ۶ کهبسیاری از توسعه دهندگان آن را درخواست کرده بودند، افزودن قابلیت ساخت کتابخانه ها و پکیج ها می باشد. جهت ساخت کتابخانه یا Library برای پروژه خود ابتدا دستور زیر را وارد کرده:
ng generate library <name>
و سپس فایل های مورد نیاز کتابخانه خودتان را ویرایش کنید. با استفاده از این دستور می توانید کتابخانه هایی برای پروژه خودتان ایجاد و آن را در سایر پروژه ها نصب کنید.
تغییر مکان Providers ها
برای ساده سازی نرم افزارها در نسخه ۶ انگولار موقعیت providers ها یا تهیه کننده ها تغییر پیدا کرد. به عبارت دیگر providers ها از کلاس ماژول به درون سرویس ها مهاجرت کردند. در ادامه مثالی از قبل و بعد این تغییرات ارائه می دهیم:
قبل از تغییر، providers ها به صورت زیر تعریف می شدند:
۱ ۲ ۳ ۴ ۵ | @NgModule({ ... providers: [MyService] }) export class AppModule {} |
و سرویس ها به صورت زیر بودند:
۱ ۲ ۳ ۴ ۵ ۶ | import { Injectable } from ‘@angular/core’; @Injectable() export class MyService { constructor() { } } |
اما بعد از تغییر، هیچ رفرنسی از providers ها درون NgModule وجود ندارد و سرویس مورد نظر به صورت زیر تعریف می شود:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ | import { Injectable } from ‘@angular/core’; @Injectable({ providedIn: ‘root’, }) export class MyService { constructor() { } } |
در واقع providedIn به نرم افزار اطلاع می دهد که این سرویس در قسمت اصلی (root) مورد استفاده قرار می گیرد.
بهبود عملکرد انیمیشن ها
با تغییراتی که در روند ساخت انیمیشن ها بوجود آمده است حجم پروژه تا ۴۷ کیلوبایت بهبود پیدا کرده است. همچنین مشکلات مربوط به مرورگرهای سافاری (Safari) نیز برطرف شده است.
پشتیبانی طولانی مدت
تیم انگولار با ارائه ی نسخه ۶٫۰٫۰ این فریم ورک پشتیبانی قدرتمند و طولانی مدت آن را تا ۱۸ ماه تضمین کرده اند.
