ما الجديد في Angular 7.0 وكيف يمكنك الترقية

المقدمة

أصدرت Angular أحدث إصدار لها ، Angular 7.0. في هذه المقالة سوف نستكشف النقاط التالية:

  • ما الجديد في Angular 7.0
  • إنشاء أول تطبيق Angular 7.0 لك باستخدام Angular CLI
  • كيفية تحديث تطبيق Angular الحالي الخاص بك إلى Angular 7.0

ما الجديد في Angular 7.0؟

  1. أثناء إنشاء تطبيق Angular جديد ، سيطلب Angular CLI للمستخدم تحديد ما إذا كان يريد إضافة ميزات مثل توجيه Angular أو تنسيق ورقة الأنماط التي يريد استخدامها في التطبيق الخاص بهم
  2. ستستخدم تطبيقات Angular 7.0 ميزة Bundle Budget في Angular CLI. سيحذر هذا المطورين إذا تجاوز حجم حزمة التطبيق الحد المحدد مسبقًا. تم ضبط القيمة الافتراضية للتحذير على 2 ميغا بايت وللأخطاء 5 ميغا بايت. هذه القيمة قابلة للتكوين ويمكن تغييرها من angular.jsonالملف. تعمل هذه الميزة على تحسين أداء التطبيق بشكل كبير.
  3. تتلقى مجموعة تطوير المكونات (CDK) الخاصة بالمواد الزاويّة أيضًا بعض الميزات الجديدة كجزء من هذا التحديث. السمتان المضافتان حديثًا لـ CDK هما:
  • التمرير الافتراضي إذا كنت تحاول تحميل قائمة كبيرة من العناصر ، فيمكن أن يؤثر ذلك على أداء التطبيق. والعلامة يمكن استخدامها لتحميل فقط الجزء المرئي من القائمة التي تظهر على الشاشة. سيعرض فقط العناصر التي يمكن احتواؤها على الشاشة. عندما يقوم المستخدم بالتمرير عبر القائمة ، فإن DOM سوف يقوم بتحميل وتفريغ العناصر ديناميكيًا بناءً على حجم العرض. لا ينبغي الخلط بين هذه الميزة والتمرير اللانهائي الذي يعد استراتيجية مختلفة تمامًا لتحميل العناصر. يمكنك قراءة المزيد عن التمرير الافتراضي هنا.
  • السحب والإفلات

    يمكننا بسهولة إضافة ميزة السحب والإفلات إلى عنصر ما. وهو يدعم ميزات مثل السحب المجاني لعنصر ، وإعادة ترتيب عناصر القائمة ، ونقل العناصر بين القائمة ، والرسوم المتحركة ، وإضافة مقبض سحب مخصص ، والسحب المقيد على طول المحور X أو Y. يمكنك قراءة المزيد عن السحب والإفلات هنا.

4. mat-form-fieldسوف يدعم الآن استخدام عنصر التحديد الأصلي. سيوفر ذلك أداءً محسنًا وإمكانية استخدام التطبيق. اقرأ المزيد عن هذه الميزة هنا.

5. قام Angular 7.0 بتحديث تبعياته لدعم الأنواع 3.1 و RxJS 6.3 و Node 10.

سنشرع الآن في إنشاء أول تطبيق Angular 7 لدينا.

المتطلبات الأساسية

  • قم بتثبيت أحدث إصدار من Node.js من هنا
  • قم بتثبيت Visual Studio Code من هنا

سيؤدي تثبيت Node.js أيضًا إلى تثبيت npm على جهازك. بعد تثبيت Node.js ، افتح موجه الأوامر. قم بتشغيل مجموعة الأوامر التالية للتحقق من إصدار node و npm المثبت على جهازك.

  • عقدة الخامس
  • npm -v

الرجوع إلى الصورة أدناه:

تثبيت Angular CLI

Angular CLI هي واجهة سطر الأوامر لـ Angular. يساعدنا على تهيئة التطبيقات Angular وتطويرها وصيانتها بسهولة.

لتثبيت Angular CLI ، قم بتشغيل الأمر التالي في نافذة الأوامر:

npm i -g @angular/cli

سيؤدي ذلك إلى تثبيت Angular CLI 7.0 عالميًا في جهازك. الرجوع إلى الصورة أدناه:

للتحقق من إصدار Angular CLI المثبت في جهازك ، قم بتشغيل الأمر التالي:

الرجوع إلى الصورة أدناه:

أنشئ تطبيق Angular 7

افتح Visual Studio Code وانتقل إلى View >> Terminal. سيؤدي هذا إلى فتح نافذة محطة رمز VS. بدلاً من ذلك ، يمكنك أيضًا استخدام لوحة المفاتيح sho rtcut ctrl + `لفتح نافذة المحطة الطرفية.

اكتب التسلسل التالي للأوامر في النافذة الطرفية. ستنشئ هذه الأوامر دليلًا باسم "ng7Demo". ثم قم بإنشاء تطبيق Angular باسم "ng7App" داخل هذا الدليل.

  • mkdir ng7Demo
  • قرص مضغوط ng7
  • ng الجديد ng7App

أثناء تشغيل الأمر ng new ، سيطلب منك Angular CLI إجراء تحديدات في الخيارين التاليين:

  1. هل ترغب في إضافة Angular routing؟ (ذ / لا)
  2. ما تنسيق ورقة الأنماط الذي ترغب في استخدامه؟

بمجرد تحديد الخيارات والضغط على إدخال ، سيتم إنشاء تطبيق Angular 7.0.

الرجوع إلى Gif أدناه لفهم أفضل.

بمجرد إنشاء التطبيق بنجاح ، قم بتشغيل الأمر التالي لفتح المشروع:

  • الشفرة .

الرجوع إلى الصورة أدناه:

سيؤدي هذا إلى فتح ملف الكود لتطبيقنا في نافذة جديدة لـ VS Code. يمكنك رؤية بنية الملف التالية في Solution Explorer.

افتح ملف package.json ويمكنك ملاحظة أن لدينا أحدث حزم Angular 7.0.0 مثبتة في مشروعنا.

{ "name": "ng7-app", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~7.0.0", "@angular/common": "~7.0.0", "@angular/compiler": "~7.0.0", "@angular/core": "~7.0.0", "@angular/forms": "~7.0.0", "@angular/http": "~7.0.0", "@angular/platform-browser": "~7.0.0", "@angular/platform-browser-dynamic": "~7.0.0", "@angular/router": "~7.0.0", "core-js": "^2.5.4", "rxjs": "~6.3.3", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.10.0", "@angular/cli": "~7.0.1", "@angular/compiler-cli": "~7.0.0", "@angular/language-service": "~7.0.0", "@types/node": "~8.9.4", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.1.1" } }

عرض تنفيذي

اسم تطبيق Angular الخاص بنا هو ng7App الموجود داخل دليل ng7Demo .

لذلك ، سننتقل أولاً إلى تطبيقنا باستخدام الأوامر أدناه.

  • قرص مضغوط ng7
  • قرص مضغوط ng7App

الآن ، نستخدم الأمر التالي لبدء خادم الويب.

  • يخدم ng

الرجوع إلى الصورة أدناه:

After running this command, you can see that it is asking to open //localhost:4200 in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.

How to upgrade to Angular 7

The angular team has provided an Angular Update Guide to ensure the smooth upgrade of angular versions. Navigate to //update.angular.io/ to access it. It is a self-explanatory and easy to use application. It will show you the steps that you need to follow before updating, during the update and after the update. Refer to the image below:

If you want to update your application from Angular 6 to Angular 7 then run the following command in the project folder:

ng update @angular/cli @angular/core

Conclusion

لقد تعلمنا عن الميزات الجديدة لـ Angular 7.0. قمنا أيضًا بتثبيت Angular CLI 7.0. لإنشاء وتنفيذ تطبيق Angular 7.0 ، استخدمنا Angular CLI و VS Code. استكشفنا أيضًا طريقة ترقية تطبيق موجود إلى Angular 7.0.

أنظر أيضا

  • الشروع في العمل مع Angular 6.0
  • التعرف على الرسوم المتحركة الزاوية 6
  • الشروع في استخدام Angular 5 باستخدام Visual Studio Code
  • عمليات CRUD باستخدام ASP.NET Core باستخدام Angular 5 و ADO.NET
  • ASP.NET Core - CRUD باستخدام Angular 5 و Entity Framework Core
  • ASP.NET Core - استخدام Highcharts مع Angular 5

نُشر في الأصل على //ankitsharmablogs.com/