يقترح مؤلف المادة ، التي ننشر ترجمتها ، الحديث عن Angular 8. سنناقش هنا بعض الموضوعات الساخنة بشكل خاص التي أثيرت في أحداث NgConf و Google I / O 2019. لذلك ، إذا كنت مهتمًا بـ Angular ، لكن لم نشاهد تقارير لسبب ما من هذه الأحداث ، نعتقد أنك ستشعر بالفضول لمعرفة ما يمكنك توقعه من الزاوية 8.
النقاط الرئيسية
أنا متأكد من أنك تتطلع الآن إلى إصدار Angular 8 ، فأنت تعاني من نفس المشاعر التي واجهتها بعد NgConf 2019. تطرق
تقرير Igor Minar إلى العديد من الابتكارات المتوقعة - من الأدوات إلى التقنيات مثل التحميل التفاضلي والعديد من الأشياء الرائعة الأخرى.
دعونا نناقش كيف يمكن أن يؤثر كل هذا على مشاريعك. وهي ، سننظر في فرص جديدة ونتحدث عما إذا كان مظهرها سيؤدي إلى الاعتراف بالآليات الحالية على أنها قديمة ، أو إلى حقيقة أن الجديد سيكون غير متوافق مع القديم.
ميزات جديدة
loading تحميل التفاضلية
عند تطبيق تقنية التحميل التفاضلي ، يمكن أن تقوم Angular ، أثناء عملية تجميع المشروع ، بإنشاء حزمة منفصلة لملفات polyfills. ذلك يعتمد على ملف قائمة
browserlist . إليك ما ستبدو عليه بشكل عام.
أعلاه طريقة جديدة لحزم المشاريع ( المصدر )سيؤدي استخدام هذه الميزة إلى تقليل حجم الحزم.
التوفير من خلال التحميل التفاضلي ( المصدر )كيف يعمل هذا؟
ستقوم Angular بتجميع ملفات polyfill إضافية وسيتم تضمينها في الكود باستخدام سمات
nomodule :
<body> <pp-root></pp-root> <script type="text/javascript" src="runtime.js"></script> <script type="text/javascript" src="es2015-polyfills.js" nomodule></script> <script type="text/javascript" src="polyfills.js"></script> <script type="text/javascript" src="styles.js"></script> <script type="text/javascript" src="vendor.js"></script> <script type="text/javascript" src="main.js"></script> </body>
nomodule سمة
nomodule ، منطقية ، البرنامج النصي من التحميل والتنفيذ في المتصفحات التي تدعم وحدات ES6. هذه المتصفحات تتجاهل هذه النصوص. تقوم المتصفحات الأقدم بتنزيلها وتنفيذها.
▍SVG قوالب
يمكن الآن استخدام ملفات SVG كقوالب. حتى الآن ، يمكن استخدام HTML مضمن أو خارجي كقوالب.
@Component({ selector: "app-icon", templateUrl: "./icon.component.svg", styleUrls: ["./icon.component.css"] }) export class AppComponent {...}
أنا اللبلاب محرك تقديم التجريبية
محرك اللبلاب لا يزال في مرحلة تجريبية. بعد إصدار Angular 8 ، يمكنك اختباره باستخدام علامة
--enable-ivy عند إنشاء تطبيق جديد. يظهر الرمز المقابل أدناه. تذكر أن Ivy ليس جاهزًا تمامًا بعد (لا يزال في حالة "معاينة التقيد") ، وكما قال إيغور مينار في NgConf 2019 ، لا يزال من المستحسن استخدام View Engine عند إنشاء تطبيقات جديدة.
لتمكين استخدام Ivy في مشروع موجود ، تحتاج إلى تعيين معلمة
enableIvy option angularCompilerOptions في
angularCompilerOptions إلى
true في
angularCompilerOptions :
"angularCompilerOptions": {"enableIvy": true}
يمكنك إنشاء تطبيق جديد سيتم فيه استخدام Ivy:
$ ng new my-app --enable-ivy
يقدم Ivy الميزات المفيدة التالية ، والتي من المتوقع ظهور أول ثلاث منها في الزاوية 9:
- تجميع أسرع.
- تحسين نوع التحقق من القوالب.
- تقليل حجم الحزم. الآن ، إذا لم تكن قد شاهدتها حتى الآن ، فستظهر مظاهرة لتطبيق 4.3 كيلوبايت مع Google I / O 19.
- التوافق الخلفي.
- وميزة المفضلة هي تصحيح الأخطاء. أنا متأكد من أن العديد من المطورين بحاجة إلى هذا مثلي.
B دعم بازيل
Bazel هي أداة أخرى انتقلت إليها Google إلى السوق مفتوحة المصدر. يقول إيغور مينار إن Bazel منذ فترة طويلة تستخدم لتلبية الاحتياجات الداخلية للشركة ، وهي الآن متاحة للجميع. لمعرفة المزيد حول منشئ المشروع هذا ، تحقق من
الوثائق وقراءة كيفية استخدام Bazel مع
Angular .
ربما تتساءل الآن عما إذا كان Bazel جاهزًا للاستخدام العملي. أجب باختصار على هذا السؤال - إنه غير جاهز بعد. الآن هو في حالة "التقيد في المعاينة". اسمحوا لي أن أقتبس Alex Eagle ، الذي يقود فريق تطوير الأدوات Angular في Google: "إذا كنت قد دخلت بالفعل مياه Bazel من قبل ، فلن تستطيع المساعدة في ملاحظة أنه كان هناك الكثير من أسماك القرش ... الآن تمكنا بالفعل من إدارة أسماك القرش ، ولكن لا يزال من الممكن وجود المياه البرد. "
Bazel لا يزال قيد الإعداد ، من المتوقع أن يتم تضمينه في
@angular/cli في الإصدار 9.
فيما يلي بعض الميزات المفيدة التي يمكن أن تقدمها Bazel:
- تسريع وقت بناء المشروع. يستغرق الإنشاء الأول بعض الوقت ، لكن الإنشاءات الموازية تكون أسرع بكثير. يستخدم Angular بالفعل Bazel ، والآن تكتمل إجراءات CI في 7.5 دقيقة ، وليس ساعة ، كما كانت قبل Bazel.
- تجميع مشروع تدريجي. سيكون من الممكن جمع ونشر التطبيق بالكامل ، ولكن فقط ما الذي تغير فيه.
- القدرة على العمل مع ملفات Bazel ، والتي ، بشكل افتراضي ، مخفية.
يمكنك إضافة دعم Bazel إلى مشروع موجود كما يلي:
ng add @angular/bazel
يمكنك إنشاء تطبيق جديد باستخدام Bazel:
$ npm install -g @angular/bazel $ ng new my-app --collection=@angular/bazel
بناة ▍API
يتيح لك الإصدار الجديد من Angular استخدام API Builders ، المعروف أيضًا باسم Architect. تستخدم الزاوي بناة لتنفيذ العمليات الأساسية:
serve ،
build ،
test ،
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", ... } } } }
الآن يمكنك إنشاء جامعي الخاصة بك. أراها تشبه أوامر gulp / grunt المستخدمة في الأيام الخوالي.
بشكل عام ، تعتبر أداة التجميع مجرد وظيفة بها مجموعة من الأوامر التي يتم تمريرها إلى طريقة
createBuilder() من الحزمة
@angular-devkit/architect :
import { createBuilder } from '@angular-devkit/architect'; function customBuild(options, context) { return new Promise((resolve, reject) => {
يمكنك إلقاء نظرة على بناة الزاوي المدمجة
هنا .
إليك أشياء رائعة عنها في المدونة Angular.
in التغييرات في التحميل كسول
سيحتوي الإصدار الجديد من Angular أيضًا على إصدار جديد من نظام تحميل الوحدة البطيئة ، والذي يؤدي ظهوره إلى حقيقة أن بناء الجملة الموجود
loadChildren:string سيتم إهماله.
في السابق ، بدا الأمر كما يلي:
loadChildren: './lazy/lazy.module#LazyModule';
مع الافراج عن الزاوي 8 - مثل هذا:
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
إذا كان لديك العديد من الوحدات عند العمل باستخدام آلية التحميل البطيئة ، وتريد أتمتة ترجمتها إلى وضع تشغيل جديد ، فقم بإلقاء نظرة على
هذه المادة.
API دعم موقع API $ AngularJS
يلتزم فريق التطوير Angular بدعم أولئك الذين يستخدمون AngularJS ومساعدتهم على التحول إلى Angular. ونتيجة لذلك ، تمت إضافة دعم لخدمة
$location إلى النظام ، في حزمة
angular/common/upgrade . نحن نتحدث عن الميزات التالية:
- الحصول على الحالة من خدمة
$location . - تتبع تغييرات العنوان.
- الحصول على نفس المعلومات حول مكونات العنوان التي يمكن الحصول عليها في AngularJS (
hostname ، protocol ، port ، search ). - اختبار الخدمة باستخدام MockPlatformLocation API.
ebWeb العمال
الزاوي 8 يضيف دعما لعمال الويب. من خلال مساعدتهم ، يمكنك تنظيم تنفيذ التعليمات البرمجية كثيفة الاستخدام للموارد في الخلفية. لإنشاء عامل ويب جديد ، يمكنك استخدام أمر واجهة سطر الأوامر Angular التالي:
ng g webWorker <name>
erv خدمات العمال
منذ الآونة الأخيرة ، كانت هناك زيادة كبيرة في شعبية تطبيقات الويب التقدمية ، وقد تم إجراء العديد من التحسينات للعاملين في الخدمة. على وجه الخصوص ، كان أحد هذه التحسينات هو إضافة المعلمة
SwRegistrationOptions . تحسن آخر كان دعم العديد من التطبيقات على نفس المجال.
اقرأ المزيد عن عمال الخدمة في
هذا القسم من الوثائق الزاوي.
▍ تحسينات النموذج
تمت
markAllAsTouched طريقة
markAllAsTouched ، والتي تتيح لك وضع علامة على جميع العناصر داخل
FormGroup . هذا مفيد للغاية في الحالات التي تحتاج فيها إلى تشغيل التحقق من صحة كافة عناصر التحكم داخل
FormGroup . قبل ذلك ، تم القيام بنفس الشيء مثل هذا:
validateFormAndDisplayErrors(form: FormGroup) { Object.keys(form.controls).map((controlName) => { form.get(controlName).markAsTouched({onlySelf: true}); }); }
في الزاوي الجديد ، يمكنك استخدام الطريقة
clear FormArray ، الذي يزيل جميع العناصر منه. في السابق ، كان من الضروري استخدام البنية التالية ، مع إزالة العنصر الأول في كل تكرار للحلقة:
while (formArray.length) { formArray.removeAt(0); }
ليس عليك القيام بذلك بعد الآن. يكفي الآن استدعاء طريقة واحدة:
formArray.clear()
moment إعداد لحظة تلقي استجابة عند استخدام توجيهات ViewChild و ContentChild
تتضمن هذه الميزة الجديدة استخدام العلامة
static ، والتي تتيح لك تحديد وقت حل الطلب ، المحدد بواسطة توجيه
ViewChild أو
ContentChild .
ربما تكون قد صادفت الأمثلة التالية لسلوك النظام غير المتسق. في بعض الأحيان تتوفر نتائج البحث في طريقة دورة حياة
ngOnInit ، وأحيانًا لا تكون موجودة قبل الاتصال بـ
ngAfterContentInit أو
ngAfterViewInit . إليك كيفية استخدام العلم
static :
تجدر الإشارة إلى أن هذه الميزات غير متوفرة
ViewChildren و
ContentChildren . يتم تنفيذ استعلامات بحث العناصر المطابقة بعد إجراء الكشف عن التغيير.
عند استخدام
static: true يجب أن تكون حذرًا لأن استخدام هذه العلامة لن يسمح لك بالحصول على نتائج من قوالب ديناميكية (مثل * ngIf). تمت إضافة قاعدة Schematics إلى النظام ، مما يسمح لك بترجمة التعليمات البرمجية الموجودة لاستخدام بناء الجملة الجديد. سيتم استخدام بناء الجملة هذا مع اللبلاب.
→ تفاصيل حول هذه الميزة يمكن العثور عليها
هنا .
escSupport Typescript 3.4.x
يستخدم Angular الآن TypeScript 3.4 (يستخدم الإصدار السابع من Angular TypeScript 3.2.x). لا توجد الكثير من التغييرات الرئيسية في الإصدار الجديد من TS. ربما لن تؤدي إلى عواقب غير سارة.
→ تفاصيل حول الابتكارات TS 3.4 يمكن العثور عليها
هنا .
▍ تحسين الأداء
في ظل الظروف الحالية ، ينشئ
ServerRendererFactory2 نسخة جديدة من
DomElementSchemaRegistry لكل طلب ، وهو مكلف للغاية من حيث الموارد. سيتم الآن تنظيم مشاركة النسخة العالمية من
DomElementSchemaRegistry .
applications نشر التطبيقات الزاوية على استضافة Firebase
إذا كنت تستخدم استضافة Firebase لنشر التطبيقات Angular ، فإنك بالتأكيد ستحبه هذا الابتكار. النقطة المهمة هي أنه يوجد الآن في Angular CLI أمر خاص لتنفيذ هذه العملية:
ng run [PROJECT_NAME]:deploy
→
هنا يمكنك معرفة المزيد حول هذه الميزة.
واجهات برمجة التطبيقات القديمة
of استخدم من أي نوع عند العمل مع TesBed.get
كان أسلوب
TesBed.get توقيعين. يتم كتابة واحد ، والثاني هو نوع الاستلام والعودة
any . الآن تم إهمال توقيع الطريقة ، الذي ينص على استخدام النوع "
any . يمكنك استخدام هذه الطريقة فقط مع إشارة إلى نوع معين. سيؤثر هذا ، على سبيل المثال ، على حالات العمل باستخدام الرموز المميزة للسلسلة (غير المدعومة) ومع بعض الرموز المميزة الأخرى.
استخدمت سابقا مثل هذه التصاميم:
TestBed.configureTestingModule({ providers: [{ provide: "stringToken", useValue: new Service() }], }); let service = TestBed.get("stringToken");
الآن يتم تطبيق النهج التالي:
const SERVICE_TOKEN = new InjectionToken<Service>("SERVICE_TOKEN"); TestBed.configureTestingModule({ providers: [{provide: SERVICE_TOKEN, useValue: new Service()}], }); let service = TestBed.get(SERVICE_TOKEN);
em إزالة وثيقة من الزاوي / منصة متصفح
تمت إزالة
DOCUMENT من حزمة
@angular/platform-browser . إذا كنت تستخدم
DOCUMENT من هذه الحزمة ، فيجب أن تبدأ في استيرادها من
@angular/common .
package قم بإلغاء تثبيت الحزمة الزاوية / http
تم إهمال حزمة
@angular/http في Angular 5 ، لكنها كانت لا تزال متاحة لأن
@angular/platform-server كانت تعتمد عليها. الآن تتم إزالة هذه الحزمة من قائمة الحزم.
التغييرات الحرجة
code إصلاح رمز السيارات
قليلون يعرفون أن الزاوي يصحح الأخطاء تلقائيًا عند استخدام عناصر HTML
tr و
col .
في حالة
tr تم إجراء تصحيحات إذا لم يكن العنصر المقابل داخل
tbody tfoot أو
tfoot أو
thead . وتألفت التصحيحات في الموضع التلقائي لعنصر في
tbody .
في حالة
col تم إجراء تصحيحات على الكود الذي ليس فيه هذا العنصر داخل علامة
colgroup .
الزاوي الآن يترك تصحيح هذه الأخطاء لتقدير المطورين. يتم ذلك من أجل تجنب الصراعات والأخطاء. نتيجةً لذلك ، سيحتاج الذين اعتادوا على هذه الميزة إلى الاهتمام بصحة الكود أنفسهم.
→ التفاصيل حول هذا يمكن العثور عليها
هنا .
▍ إعادة تسمية المادة الزاوي
تم تغيير اسم مشروع Angular Material إلى Angular Components. أسماء الحزمة لم تتغير.
النتائج
سيتم الافراج عن الزاوي 8 في وقت قريب جدا. يقوم فريق التطوير الزاوي بعمل رائع. نتائج جهودهم تسهل عمل وحياة أولئك الذين يستخدمون الزاوي. على وجه الخصوص ، على سبيل المثال ، مع كل إصدار جديد من إطار العمل ، أصبح من الأسهل والأسهل التبديل إليه من الإصدار السابق. هنا ، على سبيل المثال ، هو ما يبدو مع الخطوط الجوية الفرنسية.
الوقت اللازم للترقية إلى الإصدارات الجديدة من Angular ( المصدر )نتيجة لذلك ، يمكننا أن نأمل أن الانتقال من الزاوية 7 إلى الزاوية 8 لا يستغرق الكثير من الوقت ولا يتطلب بذل جهود جادة.
هنا يمكنك العثور على برامج تعليمية خطوة بخطوة حول الترقية إلى إصدارات جديدة من Angular.
منذ حوالي شهر ،
قال إيغور مينار أن كل شيء يشير إلى أن الزاوي 8.0.0 قد يخرج في أواخر مايو. تم إصدار
Angular 8.0.0-rc.5 في
24 مايو.
مستقبل الزاوي يبدو متفائلا جدا. كل شيء آخر متروك لنا.
أعزائي القراء! ماذا تتوقع من الزاوي 8؟
