angular محبوبترین ها

ویژگی های جدید Angular 8: بخش دوم

۱۸ تیر, ۱۳۹۸
محمد معین فاضلی(ادمین)
بدون دیدگاه

به نام خدا

در این مطلب قصد داریم به بررسی ویژگی های جدید Angular8 بپردازیم. این پست، بخش دوم از معرفی ویژگی های جدید Angular 8 است که توسط angular-netcore.ir منتشر می شود. برای مطالعه بخش اول پست زیر مراجعه کنید:

ویژگی های جدید Angular 8: بخش اول

پشتیبانی از Web Worker

همانطور که اطلاع داریم جاوااسکریپت همواره به صورت تک نخی اجرا می شود. به همین دلیل است که ما کارهای مختلفی نظیر فراخوانی APIها را به صورت ناهمزمان در JavaScript انجام می دهیم. اما این روش همواره کارساز نیست. web worker قابلیتی است که به مرورگر اجازه ای اجرای اسکریپت ها را در یک نخ جداگانه را می دهد. البته این یک موضوع جدید نیست و ربطی هم به انگولار ندارد ولی در Angular 8 امکان ایجاد و کار با web worker از طریق Angular CLI فراهم شده است. همچنین می توانیم web worker را برای نخستین بار نیز از طریق Angular CLI به پروژه خود بیافزایم. در این فرآیند Angular CLI فایل worker.ts که در فایل تنظیمات tsconfig.json مشخص شده است را اجرا می کند. همچنین یک فایل تنظیمات TypeScript جدید با نام tsconfig.worker.json که وظیفه ی مدیریت worker.ts را برعهده دارد را به پروژه اضافه می کند. همچنین اطلاعات زیر به فایل angular.json اضافه می شود:

"webWorkerTsConfig": "tsconfig.worker.json"

استفاده از داده های تحلیلی

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

حذف angular/http@

در انگولار 8، گوگل پشتیبانی از angular/http@ را متوقف کرد. البته از نسخه ی چهارم عملا این بسته منقرض شده بود. در نتیجه همانند قبل باید از بسته ی امن و کارای angular/common/http@ برای امور مربوطه استفاده کنید.

ایجاد تغییراتی در ViewChild و ContentChild

از این پس باید یک فیلد جدید به نام static به تابع ViewChild وContentChild در پروژه ی angular 8 خود اضافه کنید که نشان می دهد انتخاب و یافتن المان مورد نظر از صفحه HTML در چه زمانی صورت گیرد. اگر مقدار فیلد static برابر false باشد، انگولار المان موردنظر ما را بعد از راه اندازی View خواهد یافت و اگر برابر true باشد، آن المان را در زمان راه اندازی component یعنی در هنگام اجرای تابع ngOnInit خواهد یافت (از این حالت باید در زمانی استفاده کنیم که المان مورد نظر ما جزو المان های رندر شده توسط انگولار نباشد). تغییر صورت گرفته در کد زیر مشخص است:

@ViewChild('info', { static: false }) _cityViewChild: CityComponent;

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

در Angular 8 شما می توانید از قالب با پسوند SVG نیز به جای قالب های HTML بدون هیچ تنظیمات اضافی استفاده کنید. کد زیر استفاده ساده از این قابلیت را نشان می دهد:

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

پشتیبانی از PNPM

از این پس Angular از مدیریت کننده ی بسته های جدیدی تحت عنوان PNPM نیز پشتیبانی می کند. PNPM یک مدیریت کننده بسته برای JavaScript است که به صورت ترکیبی هم از NPM و هم از Yarn بهره می برد.

پشتیبانی از Codelyzer 5

در Angular 8 به صورت پیش فرض، TSLint از Codelyzer 5.0 پشتیبانی می کند. در این نسخه از Codelyzer نام برخی از قوانین تغییر کرده است و قابلیت های جدیدی اضافه شده است.

پشتیبانی از Builder جدید

در نسخه ی جدید انگولار، Angular CLI امکان استفاده از Builder با نام Architect API را فراهم می کند. این Builder اقداماتی نظیر server، build، Test وLint را با کیفیت و کارایی بهتری فراهم می کند. برای استفاده از Builderها می توانید تغییراتی مانند کدهای زیر در فایل 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 به روزرسانی کنیم؟

برای به روزرسانی Angular باید ابتدا TypeScript 3.4 را نصب کنید. همچنین باید از Node ورژن 10 یا بالاتر استفاده کنید. سپس کافی است دستور به روزرسانی یعنی ng update @angular/cli @angular/core را بزنید. البته برای به روزرسانی بی خطر و بهتر کافی است به آدرس https://update.angular.io مراجعه و طبق دستورالعمل این سایت اقدام به بروزرسانی کنید.

این آموزش به صورت اختصاصی از وب سایت c-sharpcorner استخراج، ترجمه و تدوین شده است. امیدوارم این آموزش برای شما مفید باشد.

موفق باشید. التماس دعا

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *