Angular 7.0 - ما الجديد في صورتها الجديدة؟

تكمن قوة المبنى في أعمدته الخرسانية. هذا هو إطار عمل تطبيق الويب. يوفر إطار عمل البرنامج طريقة قياسية لتصميم وبناء ونشر التطبيقات. في عالم من منصات Java ، كان إطار عمل Javascript هو الكلمة الطنانة الأكثر استخدامًا حتى اكتسب Angular أهمية.
الآن ، دعونا نرى بعض السمات البارزة للزاوية.

• Angular هو إطار عمل جافا سكريبت مفتوح المصدر والذي تحول إلى ما يسمى الآن "كتابة نصية".
• يعد إنشاء الكود وتطويره سريعًا مقارنةً بكود JS (جافا سكريبت).
• يحتوي موجه سطر الأوامر (CLI) على أوامر لإنشاء التطبيق بشكل أسرع.
• تم تنظيم المدونة جيدًا لأنها تستخدم المكونات وبالتالي تعمل على تحسين الإنتاجية
• التوجيه هو وظيفة ديناميكية تتعامل مع المتغيرات ، عبارات if ، والحلقات في HTML
• Angular عبارة عن منصة مشتركة ومن ثم فهي مستقلة عن المتصفح ونظام التشغيل
• يأتي Angular CLI مزودًا بأدوات اختبار مفيدة لاختبار الوحدة

تعلم دورات هندسة البرمجيات عبر الإنترنت من أفضل الجامعات في العالم. اربح برامج PG التنفيذية أو برامج الشهادات المتقدمة أو برامج الماجستير لتتبع حياتك المهنية بشكل سريع.

AngularJS - مقدمة للزاوية

كان AngularJS هو المنتج الأول في سلسلة Angular التي قدمتها Google في عام 2009. إنه إطار من جانب العميل أو إطار أمامي. ما يعنيه هذا هو أن الكود يعمل على متصفح المستخدم وليس على خادم الويب. تمت كتابة AngularJS بلغة جافا سكريبت بحتة. تم تطوير هذا لفصل منطق التطبيق ، ومع ذلك ، فقد كانت الطريقة الوحيدة الناجحة والممهدية إلى حد ما لـ Angular مع الصورة الرمزية الحالية 7.0.
هل AngularJS هو الاختيار الصحيح لتطوير تطبيقات الجوال التالية؟

الزاوي 7.0 الإطار

دعونا نفهم بإيجاز اللبنات الأساسية لـ Angular:

1. الوحدة النمطية : يكسر بشكل منطقي الشاشات الأساسية للتطبيق. على سبيل المثال ، إذا كانت هناك صفحة عربة تسوق ، فقد يرغب المرء في الحصول على وحدة عربة تسوق.
2. المكون : هذا قسم من واجهة المستخدم وهو "فئة" كما هو الحال في البرمجة الشيئية. هذا هو لبنة البناء الأساسية لواجهة المستخدم (UI). تحتوي فئة المكون على المنطق الأساسي للصفحة.
   تتكون المكونات من:
   1. النموذج : القالب مكتوب بلغة HTML أو يمكن أن يكون ملفات HTML. يمكن أن يكون لها خصائص ديناميكية مثل المتغيرات واستخدام "إذا كانت الشروط" ممكنة مع التوجيهات.
   2. الصنف : هو كود التطبيق. تمت كتابة الكود في تنضيد. تعد الكتابة المطبوعة مجموعة شاملة من جافا سكريبت. تنبثق لغة كتابة "ثابتة" حيث يتم التصريح عن المتغيرات بأنواع محددة. ومن ثم يتم اكتشاف الأخطاء في تجميع البرنامج بدلاً من اكتشافها في وقت التشغيل. يمكن كتابة الفصول الزاويّة بجافا سكريبت أيضًا. المكونات لها خصائص وطرق البيانات.
   3. البيانات الوصفية : لتحديد أن الفئة هي مكون زاوي ، يستخدم المرء البيانات الوصفية. يمكن إرفاق البيانات الوصفية بـ Typescript باستخدام إعلان التزيين.
      دعونا نتعرف على مكون بسيط في Angular.
      

       استيراد {component} من "" @ angular / core "؛ هنا يتم استيراد حزمة المكونات من مكتبة Angular core.
      component ({(هذا تصريح مصمم)
      المحدد: "myapplication"… (. هذه هي علامة HTML المخصصة التي نستخدمها لإدراج المكون.)
      النموذج: '<h1> مرحبًا {(الاسم)} </ h1> (الاسم متغير)
      })
      فئة التصدير AppComponent {(هذه هي فئة المكون و "الاسم" خاصية في الفئة)
      الاسم = "الإطار الزاوي" ؛
      }
      <الجسم>
      <myapplication> تحميل نموذج لمكوّن التطبيق هنا .. </ myapplication>
      </body>

   4. ربط البيانات : عملية تسمح بالاتصال بين المكون والعرض. لذلك يتم تمرير البيانات من المكون إلى العرض والعكس صحيح. هناك أربعة أنواع من ربط البيانات. في الاستيفاء وربط الخاصية ، يتم إرسال البيانات من المكون إلى طريقة العرض وفي حالة الربط ، يتم إرسال البيانات إلى المكون من طريقة العرض أو النموذج. في الربط ثنائي الاتجاه ، تنتقل البيانات في كلا الاتجاهين.
   5. الخدمة : هذه فئة تمت كتابتها لرمز قابل لإعادة الاستخدام ، أي رمز يمكن الوصول إليه من مكونات متعددة. ترسل هذه الفئات البيانات والوظائف عبر المكونات. يمكن لفئات الخدمة أيضًا الحصول على بيانات من قاعدة بيانات أو ملف js / JSON. عندما يستخدم المرء فئة الخدمة ، يبدو الرمز منظمًا ومجزأًا.
   6. التوجيه : يعد تخصيص سمات HTML لتوسيع قوة HTML بمثابة توجيه. ngIf ، ngFor ، ngModel هي توجيهات. يعد ngModel مسؤولاً عن ربط العرض بالنموذج ، والذي تتطلبه التوجيهات الأخرى مثل الإدخال أو منطقة النص أو التحديد.
      هذا جزء من الكود يوضح كيفية عمل ngmodel.
      
      

       <div ng-app = "" ng-init = "firstName = 'John'">
      <p> أدخل اسمًا في مربع الإدخال: </ p>
      <p> الاسم: <input type = "text" ng-model = "firstName"> </p>
      <p> لقد كتبت: {{firstName}} </p>
      </div>
      

      لذلك ، تمت تهيئة firstName إلى "John" وعندما يقوم أحد بإدخال قيمة جديدة في مربع النص ، فإن FirstName سيحتفظ بالاسم الجديد الذي تم إدخاله.

   7. حقن التبعية (DI) : تحتاج الفئات إلى كائنات لأداء وظيفة معينة. بدلاً من إنشاء الكائنات في كل مرة في الفصل ، يتلقى الفصل الكائنات (التبعيات) من مصادر خارجية. فيما يلي الخطوات التي يجب اتباعها في إطار عمل DI:
      1. قم بإنشاء فئة خدمة على سبيل المثال. بيانات الموظف
      2. قم بتسجيل فئة الخدمة هذه مع الحاقن. الحاقن عبارة عن حاوية تحتوي على جميع فئات التبعية
      3. قم بتعريف فئة Employeedata على أنها تبعية في الفصل الذي يحتاج إليها على سبيل المثال. فئة قائمة الموظف

إصدارات Angular

بعد AngularJS ، تم إصدار Angular 2 والتي كانت إعادة كتابة كاملة لـ AngularJS. تمت إضافة المكونات من Angular 2. لم يكن Angular 2 متوافقًا مع الإصدارات السابقة. يتكون Angular من مجموعة من الحزم ولم تكن حزمة جهاز التوجيه في Angular 3 متزامنة. ومن ثم انتقل فريق Angular إلى Angular 4 الذي تم إصداره مع جميع التصحيحات والميزات مع التوافق مع الإصدارات السابقة لـ Angular 2. بعد ذلك ، تم إصدار Angular 5 ، Angular 6 وأحدث إصدار الآن هو Angular 7 .

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

1. موجهات CLI : التغيير في موجه سطر الأوامر Angular هو أن CLI يطالب المستخدم بتحديد الميزات أثناء تشغيل الأوامر الشائعة. يمكن للمستخدم تحديد ميزات مثل التوجيه الزاوي أو تنسيق ورقة الأنماط وغيرها الكثير. في الإصدارات السابقة من Angular ، كان على المرء أن يتذكر ويكتب الخيارات في الموجه.
2. أداء التطبيق :
   1. الأخطاء الشائعة:
      في هذا الإصدار ، حلل الفريق الزاوي وأزال بعض الأخطاء الشائعة التي ارتكبها المطورون مثل polyfill "انعكاس البيانات الوصفية" الذي تم تضمينه في الإنتاج وهو مطلوب في الواقع فقط في التطوير.
      
   2. حزمة الميزانيات:
      لتحسين أداء التطبيق ، يتم تحديد ميزانيات الحزمة الافتراضية في الزاوية .JSON. سيتم الآن تحذير المطورين إذا تجاوز حجم حزمة التطبيق حد 5 ميجا بايت وعندما تجاوزت الحزمة الأولية 2 ميجا بايت. يمكن تعديل هذه القيم في ملف JSON حسب الحاجة.
      
3. Angular Material & CDK: تم إنشاء مجموعة أدوات تطوير المكون الزاوي (CDK) من المادة الزاويّة (واجهة المستخدم للمكتبات) ، والميزتان الجديدتان اللتان تمت إضافتهما في CDK هما:
   1. التمرير الافتراضي:
      لتحميل الجزء المرئي فقط على الشاشة ، توفر الحزمة <cdk-virtual-scroll-viewport> مساعدين للتوجيهات التي تتفاعل مع أحداث التمرير. لذلك ، سيتم عرض العناصر التي يمكن احتواؤها على الشاشة فقط. عندما يقوم المستخدم بالتمرير خلال القائمة ، فإن DOM سيقوم بتحميل وتفريغ العناصر ديناميكيًا بناءً على حجم العرض.
      
   2. دعم السحب والإفلات:
      تساعد الوحدة النمطية @ angular / cdk / pull-drop على تحرير ميزة السحب والإفلات لعنصر ، وإعادة ترتيب العناصر في قائمة ، ونقل العناصر في القائمة ، وما إلى ذلك. يتم ذلك بمساعدة توجيهات cdkDropList و cdkDrag.
      
4. قام Angular 7.0 بتحديث تبعياته لدعم الأنواع 3.1 و RxJS 6.3 و Node 10 .
5. تحسين إمكانية الوصول إلى الاختيارات: يتميز "select" الأصلي ببعض مزايا الأداء وإمكانية الوصول وقابلية الاستخدام ، ومن ثم فإن استخدام عنصر تحديد أصلي داخل "حقل شكل mat" هو ميزة جديدة في Angular 7.0.
6. العناصر الزاويّة: تغيير طفيف لكنه جديد في Angular 7
   " تدعم Angular Elements الآن عرض المحتوى باستخدام معايير الويب للعناصر المخصصة ." - هذا ما يقوله ستيفن فلوين ، أنجولار.
7. العمل مع الشركاء: كان فريق Angular يعمل على الشراكة مع المشاريع المجتمعية التي تم إطلاقها مؤخرًا ، أحدها هو Angular Console. Angular Console هي واجهة مستخدم لـ Angular CLI. إنه جيد للمبتدئين والخبراء لأنه أسهل بكثير من المطالبات. هناك إصدارات مختلفة لواجهة المستخدم لنظامي التشغيل Windows و Mac OS .

معظم التغييرات في Angular 7.0 تتعلق بتحسينات في الأداء وإصلاح الأخطاء. وبالتالي ، فهو الإصدار الأكثر أمانًا حتى الآن والترحيل من الإصدارات السابقة أمر بسيط. Ivy هو محرك العرض القادم الجديد الذي يعمل عليه فريق Angular. حتى ذلك الحين ، دعونا ننتظر ونراقب. استمر في التعلم !

إذا كنت مهتمًا بمعرفة المزيد حول تطوير برامج المكدس الكامل ، فتحقق من برنامج upGrad & IIIT-B التنفيذي PG في تطوير البرمجيات - التخصص في تطوير المكدس الكامل المصمم للمهنيين العاملين ويقدم أكثر من 500 ساعة من التدريب الصارم ، 9+ المشاريع والمهام ، وحالة خريجي IIIT-B ، ومشاريع التخرج العملية العملية والمساعدة في العمل مع الشركات الكبرى.