آموزش Angular 8

همه ما می دانیم که گوگل نسخه تازه ای از Angular، یعنی نسخه 8.0 را فقط چند روز منتشر کرده است. توسعه دهندگان آنگولار و جامعه مشتاق کار با انگولار مدتها منتظر انتشار این نسخه بودند، چرا که، همانطور که گوگل در زمان انتشار Angular 7 اعلام کرد که Angular 8 با ویژگی های موتور IVY منتشر خواهد شد. حال ما در این مقاله از ویژگی های جدید Angular 8 و چگونگی ارتقا دادن ان صحبت خواهیم کرد. بنابراین تا اخر اموزش آنگولار 8 با ما در مجموعه ABLY همراه باشید.

در این مقاله به موارد زیر می پردازیم:

1. ویژگی های جدید در انگولار 8

2. ارتقا Angualr 8

آموزش آنگولار 8 

همه ما می دانیم که گوگل نسخه تازه ای از Angular، یعنی نسخه 8.0 را فقط چند روز منتشر کرده است. توسعه دهندگان آنگولار و جامعه مشتاق کار با انگولار مدتها منتظر انتشار این نسخه بودند، چرا که، همانطور که گوگل در زمان انتشار Angular 7 اعلام کرد که Angular 8 با ویژگی های موتور IVY منتشر خواهد شد.  حال ما در این مقاله از ویژگی های جدید Angular 8 و چگونگی ارتقا دادن ان صحبت خواهیم کرد. بنابراین تا اخر اموزش آنگولار 8 با ما در مجموعه ABLY همراه باشید.

در این مقاله به موارد زیر می پردازیم:

1. ویژگی های جدید در آنگولار 8

2. ارتقا آنگولار 8

بنابراین، انتظار بسیار زیاد است. Angular 8 اولین انتشار عمده ای از گوگل در سال 2019 است که عمدتا بر روی toolchain متمرکز شده و همچنین انگولار را برای کاربران آسان تر می کند تا انواع مختلفی از برنامه ها را همراه با بهبود عملکرد ایجاد کنند.
به جز این، این نسخه همچنین دارای برخی از ویژگی های جدید و upgradation نسبت به نسخه های قبلی است.
در مرحله نهایی، این نسخه تایید می کند که نسخه جدید آنگولار بسیار سبک تر، سریع تر و ساده تر است. همچنین، Angular 8 نسخه TypeScript 3.4 را پشتیبانی می کند. بنابراین، با استفاده از نسخه TypeScript جدید، بسیار آسان است که کدنویسی کنید. 

چند ویژگی آنگولار 8

• برای ایجاد بسته های بهینه شده برای مرورگرهای مدرن.
• برای ایجاد بسته های قدیمی برای مرورگرهای قدیمی تر.
• برای اطمینان از این که مرورگر مجموعه بسته های مناسب را بارگذاری می کند.
• برای بهینه سازی فرایند با تسهیل فرمت CLI.

ویژگی های جدید Angular 8

اکنون وقت آن رسیده است تا تغییرات عمده ای که در آنگولار 8 انجام شده است مورد بررسی قرارگیرد.

TypeScript 3.4.x Support | پشتیبانی از TypeScript 3.4.x

انگولار 8 از نسخه TypeScript 3.4 یا بالاتر پشتیبانی می کند. بنابراین، اگر ما می خواهیم از Angular 8 برای برنامه هایمان استفاده کنیم، ابتدا باید TypeScript را به 3.4 یا بالاتر ارتقا دهیم.

Ivy Rendering Engine در انگولار 8

از پیش بینی شده ترین و مهمترین ویژگی Angular 8 موتور رندر IVY است.
IVY توجه بسیاری از افراد را از زمان اعلام آن در Google I / O 2018 جلب کرده است.
IVY یک ابتکار عمل است که با هدف ایجاد یک کانال رندر نسل جدید برای آنگولار 8.0 است.
توسط این ویژگی، توسعه دهندگان Angular کدهایی بازنویسی می کنند که به سادگی قالب انگولار را به آنچه که در مرورگر مورد نیاز است، ترجمه می کند.
این توسط DOM افزایشی که در آن هر جزء با مجموعه ای از دستورالعمل هایی که درخت DOM را تشکیل می دهند، مطابق است و مورد استفاده قرار می گیرد.
علاوه بر این، در صورت هرگونه تغییر در داده ها آنرا بروزرسانی میکند.
IVY برنامه های آنگولار را کوچک تر، ساده تر و سریع تر می کند.

از آنجایی که در چند سال اخیر بسیاری از بخش های Angular تغییر کرده اند، پس از تغییر به Ivy، برنامه موجود فقط همانند قبل عمل می کند. اما این باعث می شود تا حجم بسته های نرم افزاری کاهش یابد. در انگولار 8، گوگل نسخه پیش نمایش ایوی را معرفی کرد. هدف اصلی این نسخه، بازخورد اولیه از جامعه برنامه نویس Angular مربوط به Ivy است. 

Ivy در مقایسه با موتور نمایش Angular View Engine، مزایای زیر را ارائه می دهد:

• مزایای Ivy در انگولار 8

• کد تولید شده برای خواندن توسط کامپایلر Angular برای انسان ها بسیار ساده تر و درک بهتر است.
• زمان بازسازی به طور قابل توجهی سریعتر است.
• حجم load شدن کاهش یافته است، بنابراین مرورگرها زمان کمتری برای دانلود و تجزیه برنامه های خود خواهند داشت.
• بنابراین، اگر ما میخواهیم Ivy را برای یک برنامه جدید اضافه کنیم، می توانیم پروژه های جدیدی با گزینه های فعال ivy ایجاد کنیم.

براد گرین، مدیر فنی تیم انگولار در گوگل در ngconf 2019، گفت که Ivy به بهبود چشمگیر اندازه بسته نرم افزاری کمک می کند.

Angular 8 Support for Web Workers

• پشتیبانی از Web Workers

ویژگی کوچک، اما خوب در انگولار 8، بهبود پشتیبانی از کارکنان وب همراه با CLI است که در انگولار بهبود یافته است.

همانطور که همه ما می دانیم که جاوا اسکریپت همیشه به صورت یک رشته اجرا می شود. بنابراین، مهم است که هر گونه تماس بزرگ داده ها و یا هر تماس سر و صدا باقی مانده API در یک روش ناهمزمان انجام شود. اما، در سناریوی مبتنی بر کاربرد واقعی، این مفهوم به ما کمک نخواهد کرد. به همین دلیل است که امروز همه مرورگرهای وب از پردازش وب کار می کنند. اساسا، پردازشگر Web Worker، اسکریپتهایی است که توسط مرورگر در یک موضوع جداگانه انجام می شود. ارتباط با آن موضوع در برگه مرورگر با ارسال پیام ها انجام می شود. بنابراین، به طور کلی، Web Workers از هر نقطه نظر مربوط به Angular نیست. اما، نکته اصلی این است که این اسکریپت ها باید در فرآیند ساخت نرم افزار مورد توجه قرار گیرند. بنابراین، پس از استقرار نرم افزار، همان فرآیند را می توان به طور مداوم انجام داد. بنابراین، هدف اصلی این است که یک بسته بندی واحد برای هر Web Worker ارائه دهیم. در حال حاضر، در انگولار 8 این کار را می توان توسط Angular CLI انجام می شود.

همچنین ما می توانیم پروژه Angular CLI خود را با اضافه کردن اولین Web Worker پیکربندی کنیم. در این فرآیند، CLI فایلهای worker.ts را از فایل tsconfig.json حذف می کند و همچنین یک فایل پیکربندی TypeScript جدید به نام tsconfig.worker.json اضافه می کند که فایل worker.ts را مدیریت می کند. همچنین این اطلاعات به فایل angular.json اضافه می شوند.

"webWorkerTsConfig": "tsconfig.worker.json"  

استفاده از Analytics Data

در حال حاضر در انگولار 8، Angular CLI داده های تجزیه و تحلیل مصرف را جمع آوری می کند تا تیم انگولار بتواند ویژگی ها و پیشرفت ها را اولویت بندی کند. بنابراین، هنگامی که پروژه های CLI را به روزرسانی میکنیم، با گزینه های تحلیلگر Ng انتخاب خواهد شد. 

خداحافظی با angular/http@

از نسخه آنگولار 8، انگولار پشتیبانی از angular/http@ را متوقف می کند. آنها قبلا از  angular / @http در انگولار 4 استفاده کرده اند و با استفاده از angular / common / http@ یک تماس HTTP کارآمد و ایمن ارائه می دهند. اما، هنوز هم انگولار 7، به ما اجازه می دهد از angle / http@ در برنامه استفاده کنیم. اما، از انگولار 8 به بعد، این پشتیبانی در دسترس نیست. بنابراین، ما نیاز به تنظیم در کد ما برای استفاده از angular / common / http@ به جای angular / http@ داریم.

Support SVG Template 

• پشتیبانی از قالب SVG

در حال حاضر، Angular 8 ویژگی های قالب را با یک پسوند SVG پشتیبانی می کند. بنابراین، به این معنی است که ما می توانیم از فایل extension فرمت SVG به عنوان یک الگو در فایل HTML بدون هیچ تنظیم پیکربندی اضافی استفاده کنیم. اما یک سوال این است که چرا ما به جای استفاده از تصویر در یک فایل HTML از فایل svg. به عنوان یک الگو استفاده خواهیم کرد؟ دلیل این است که هنگام استفاده از SVG به عنوان یک الگو، می توانیم آن را به عنوان یک دستور استفاده کنیم و در نتیجه می توانیم آن را همانند قالب های HTML بسازیم. با استفاده از این روش، ما می توانیم به صورت پویا گرافیک تعاملی را در برنامه های زاویه ای ما تولید کنیم.

@Component({  
   selector: "app-icon",  
   templateUrl: "./icon.component.svg",  
   styleUrls: ["./icon.component.css"]  
})  
export class DashboardComponent {...}  

PNPM Support

• پشتیبانی از PNPM

در انگولار 8، Angular CLI نیز از PNPM مدیریت بسته شامل NPM و Yarn پشتیبانی می کند. همچنین در دستور ng اضافه کردن یک پرچم جدید به نام - - registry برای اضافه کردن بسته ها از هر رجیستر خصوصی NPM ارائه می دهد. این فرمان در حال حاضر در نسخه Angular CLI برای دستور ng update استفاده می شود.

Support Codelyzer 5.0

• پشتیبانی از Codelyzer 5.0

در انگولار 8، تنظیمات پیش فرض TSLint از نسخه Codelyzer 5.0 پشتیبانی می کند. در این نسخه از Codelyzer، برخی از قوانین تغییر نام داده شده است. اما زمانی که ما Angular CLI را ارتقا می دهیم، فایل پیکربندی TSLint را نیز به روز می کند. اسکریپت بروز رسانی CLI، دستور import import es6 را از فایل polyfills.ts حذف خواهد کرد.

پشتیبانی از سازندگان جدید / معماری  API 

نسخه جدید CLI انگولار ما را قادر می سازد تا از نسخه جدید Builders که به عنوان API Architect شناخته می شود نیز استفاده شود. Angular با استفاده از Builders API برای انجام عملیات مانند سرور، ساخت، تست، Lint و e2e از آن استفاده می کند. ما می توانیم از سازندگان در فایل angular.json استفاده کنیم.

"projects": {  
  "app-name": {  
    "architect": {  
      "build": {  
        "builder": "@angular-devkit/build-angular:browser",  
      },  
      "serve": {  
        "builder": "@angular-devkit/build-angular:dev-server",  
      },  
      "test": {  
        "builder": "@angular-devkit/build-angular:karma",  
      },  
      "lint": {  
        "builder": "@angular-devkit/build-angular:tslint",  
      },  
      "e2e": {  
        "builder": "@angular-devkit/build-angular:protractor",  
      }  
    }  
  }  
}  

چگونه Angular 8  را ارتقا دهیم؟

برای ارتقاء هر برنامه انگولار 7 موجود به انگولار 8، ما باید مراحل زیر را انجام دهیم:

• TypeScript 3.4 را نصب کنید.
• احتیاج به Node 12 یا بالاتر
• اکنون فرمان ارتقاء Angular CLI -> ng update @ angle / cli @ angular / core را اجرا کنید.

در این مقاله، ما در مورد ویژگی های جدید آنگولار 8 بحث می کنیم. همچنین ما در مورد برخی از تغییرات در آنگولار در مقایسه با نسخه قبلی انگولار تغییر یافته صحبت کردیم. همچنین در مورد بعضی از ویژگی های جدید در مورد انگولار 8 بحث شده است. در مقاله بعدی، ما در مورد چگونگی نوشتن یک برنامه کاربردی پایه Hello World با استفاده از Angular 8 بحث خواهیم کرد. امیدوارم این مقاله به شما کمک کند. در صورت هر گونه بازخورد یا پرسش مربوط به این مقاله ما را نیز در جریان بگذارید. با تشکر – مجموعه ABLY

منبع: c-sharpcorner