Angular هو نظام أساسي وإطار عمل لتطوير TypeScript يُستخدم لإنشاء تطبيقات من صفحة واحدة.

Angular لها تاريخ معقد. استخدم المطورون JavaScript لبناء الإصدار الأول من هذا الإطار (AngularJS). استخدم Angulardevelopers لاحقًا TypeScript لبناء جميع الإصدارات المتعاقبة من Angular (نظرًا لعدد الأخطاء في الإصدار الأول).

اعتبارًا من عام 2021 ، أحدث إصدار من Angular هو 12.0. في هذه المقالة ، ستتعلم كل ما تحتاج لمعرفته حول Angularframework.

ما هو الزاوي؟

يصف العديد من الأشخاص Angularas بأنه إطار عمل ، وعلى الرغم من أن هذا التعريف ليس صحيحًا ، إلا أن Angular ليس مجرد إطار عمل. Angular هي أيضًا منصة تطوير. هذا يعني أنه يحتوي على نظام أجهزة وبرامج يقوم بتشغيل تطبيقات Angular.

على الرغم من أنه مبني على TypeScript ، إلا أنه يمكنك كتابة معظم كود النظام الأساسي في JavaScript. مثل معظم الأطر ، تعتمد Angular على المكونات. هذا يعني أنه يتم التعامل مع كل قسم من واجهة مستخدم Angular ككيان مستقل ، مما يؤدي إلى إنشاء رمز قابل لإعادة الاستخدام وتطبيقات قابلة للتطوير.

لاستخدام Angular ، يجب أن تكون على دراية بـ HTML و CSS وجافا سكريبت (مع العلم أن TypeScript هو أحد الأصول ، ولكنه ليس مطلبًا). غالبًا ما تتم مقارنة Angularis بـ VueJS و ReactJS ، وتتمثل إحدى الشكاوى الرئيسية في أن Angular لديها منحنى تعليمي أكثر حدة.

متعلق ب: ما هو ReactJS وما الذي يمكن استخدامه؟

هذا ليس مفاجئًا ، لأن Angular (كونها منصة تطوير) ، لديها عدد أكبر من الهياكل الأساسية لتتعرف عليها. تشمل هذه الهياكل:

• الوحدات
• عناصر
• القوالب

وسيضمن فهم هذه الميزات الأساسية أنك في طريقك لتصبح مطور Angular.

استكشاف الملفات الزاويّة

يُنشئ تطبيق Angular العديد من الملفات داخل مجلد مشروعك الجديد (كما ترى في الصورة أدناه). تحقق من موقع Angular الرسمي للحصول على إرشادات حول كيفية تثبيت Angular على جهاز الكمبيوتر الخاص بك.

يعد ملف package.json ملف. يخبرك هذا الملف باسم مشروعك ، وكيف تبدأ مشروعك (يخدم ng) ، كيف تبني مشروعك (بناء نانوغرام) وكيفية اختبار مشروعك (اختبار نانوغرام) ضمن أشياء أخرى.

يحتوي مجلد مشروعك الرئيسي أيضًا على مجلدين —node_modules و src. ال src المجلد هو المكان الذي ستجري فيه جميع عمليات التطوير ؛ يحتوي على العديد من الملفات والمجلدات.

المجلد src

ال Styles.css الملف هو المكان الذي ستضع فيه كل تفضيلات الأنماط العالمية ، و index.html الملف هو الصفحة الوحيدة التي يتم عرضها في متصفحك.

استكشاف ملف index.html

الشيء الوحيد الذي تريد تغييره في index.html الملف أعلاه هو عنوان التطبيق. ال علامة في نص ملف HTML أعلى الروابط المؤدية إلى app.component.ts الملف الموجود داخل مجلد التطبيق (كما ترى في الصورة أدناه).

استكشاف ملف app.component.ts

استيراد {مكون} من "@ angular / core" ؛
@مكون({
المحدد: "app-root" ،
templateUrl: "./app.component.html" ،
styleUrls: ['./app.component.css']
})
فئة التصدير AppComponent {
العنوان = "تطبيقي" ؛
}

ال app.component.ts يستخدم الملف الامتداد جذر التطبيق المحدد الموجود في index.html ملف أعلاه. يستخدم app.component.html ملف كقالب و app.component.css ملف للأسلوب.

ال app.component.css يكون الملف فارغًا عند إنشائه لأن جميع تفضيلات الأنماط ، جنبًا إلى جنب مع تنسيق HTML ، موجودة داخل ملف app.component.html ملف.

تشغيل تطبيق Angular بامتداد يخدم - مفتوح سيعرض الأمر ما يلي في متصفحك:

لتغيير ما يتم عرضه في متصفحك ، ستحتاج إلى تعديل app.component.html ملف.

استبدال محتوى هذا الملف بالكود التالي:

مرحبا بالعالم

سينتج المخرجات التالية في متصفحك:

فهم الوحدات الزاويّة

كل الزاوي تم بناء التطبيق على نظام الوحدة التأسيسية ، المعروف باسم NgModules. يحتوي كل تطبيق على واحد على الأقل NgModule. الزاوي يولد وحدتين من نانوغرام جديد أمر (app-routing.module.ts و app.module.ts).

ال app.module.ts يحتوي الملف على الوحدة النمطية الجذر ، والتي يجب أن تكون موجودة حتى يتم تشغيل التطبيق.

استكشاف ملف app.module.ts

استيراد {NgModule} من "@ angular / core" ؛
استيراد {BrowserModule} من "@ angular / platform-browser" ؛
استيراد {AppRoutingModule} من './app-routing.module' ؛
استيراد {AppComponent} من "./app.component" ؛
NgModule ({
الإعلانات: [
AppComponent
],
الواردات: [
BrowserModule ،
AppRoutingModule
],
الموفرون: [] ،
التمهيد: [AppComponent]
})
تصدير فئة AppModule {}

يستخدم الملف أعلاه JavaScript يستورد بيان لاستيراد ملف NgModule، ال المستعرض، ال AppComponent، و ال AppRoutingModule (وهي الوحدة الثانية NgModule في المشروع).

ال تضمين التغريدة يأتي الديكور بعد الواردات. إنه يشير إلى أن ملف app.module.ts الملف هو في الواقع ملف NgModule. ال تضمين التغريدة يقوم مصمم الديكور بعد ذلك بتكوين عدة مصفوفات: ملف الإعلانات، ال الواردات، ال مقدمي، و ال التمهيد.

ال الإعلانات المصفوفة تخزن المكونات والتوجيهات والأنابيب التي تنتمي إلى محدد NgModule. ومع ذلك ، في حالة الوحدة النمطية الجذر فقط AppComponent يتم تخزينه في ملف إعلان مجموعة (كما ترون في الكود أعلاه).

ال الواردات مجموعة تستورد الآخر NgModules التي تستخدمها في التطبيق. ال الواردات المصفوفة في الكود أعلاه تستورد ملف المستعرض (الذي يسمح له باستخدام الخدمات الخاصة بالمتصفح ، مثل عرض DOM) ، و AppRoutingModule (والذي يسمح للتطبيق باستخدام ملف الزاوي جهاز التوجيه).

متعلق ب: البطل الخفي للمواقع: فهم DOM

ال مقدمي يجب أن تحتوي مجموعة الخدمات على مكونات أخرى NgModules يمكن استخدام.

ال التمهيد تعتبر المصفوفة مهمة جدًا لأنها تحتوي على مكون الإدخال الذي ينشئه Angular ويدرجه في ملف index.html ملف في مجلد المشروع الرئيسي. يتم تشغيل كل تطبيق Angular من التمهيد مجموعة في الجذر NgModule بواسطة التمهيد ال NgModule (والتي تتضمن عملية تقوم بإدراج كل مكون في ملف التمهيد مجموعة في متصفح DOM).

فهم المكونات الزاويّة

يتم إنشاء كل مكون Angular بأربعة ملفات محددة. إذا ألقيت نظرة على صورة مجلد التطبيق أعلاه ، فسترى الملفات التالية:

• app.component.css (ملف CSS)
• app.component.html (ملف نموذجي)
• app.component.spec.ts (ملف مواصفات الاختبار)
• app.component.ts (ملف مكون)

جميع الملفات أعلاه مرتبطة بنفس المكون. إذا كنت تستخدم ملف نانوغرام توليد الأمر لتوليد مكون جديد ، سيتم إنشاء أربعة ملفات مماثلة لتلك المذكورة أعلاه. ال app.component.ts يحتوي الملف على مكون الجذر، الذي يربط الجوانب المختلفة للمكون (مثل القالب والنمط).

استكشاف ملف app.component.ts

استيراد {مكون} من "@ angular / core" ؛
@مكون({
المحدد: "app-root" ،
templateUrl: "./app.component.html" ،
styleUrls: ['./app.component.css']
})
فئة التصدير AppComponent {
العنوان = "تطبيقي" ؛
}

ال app.component.ts يستخدم الملف عبارة استيراد JavaScript لاستيراد "مكون" من Angular’s ​​core. ثم @مكون يحدد مصمم الديكور الطبقة كمكون. ال @مكون يحتوي المصمم على شيء يتألف من أ محدد، أ templateUrl، وأ النمط مجموعة مصفوفة.

ال محدد يروي الزاوي لإدراج مثيل لمكوِّن التطبيق في أي قالب HTML يحتوي على علامة مطابقة لملف محدد (لذلك بطاقة شعار). وإذا ألقيت نظرة على الكود الموجود في ملف index.html الملف أعلاه ستجد ملف بطاقة شعار.

يرتبط ملف مكون التطبيق الرئيسي أيضًا بملف القالب ، باستخدام امتداد templateUrl خاصية. هذا ال app.component.html ملف ، والذي يوضح كيفية عرض مكون معين في تطبيق Angular.

الخاصية النهائية في الكائن هي النمط. تشير هذه الخاصية إلى صفيف من أوراق الأنماط ، مما يعني أنه يمكنك تطبيق أوراق أنماط متعددة عليها مكون واحد (بحيث يمكنك إضافة ورقة الأنماط العامة في المجلد src إلى مصفوفة styleUrls كـ حسنا).

فهم القوالب الزاويّة

ال app.component.html ملف مثال على نموذج Angular. هذا الملف هو ملف HTML بالإضافة إلى ملف مكون (مكون التطبيق). لذلك ، يجب أن يحتوي كل مكون على قالب HTML ، لأنه ببساطة يوضح كيفية عرض المكون في DOM.

ماذا بعد؟

فهم DOM هو الخطوة التالية الأفضل. إن التعامل مع منصة Angular وإطار العمل يمثل تحديًا بلا شك. ومع ذلك ، فمن الممكن ، وبالنظر إلى أن Angular تعرض مكوناتها في DOM ، فإن التعرف على DOM - أثناء محاولتك إتقان Angular - يعد خطوة رائعة أخرى.

البطل الخفي للمواقع: فهم DOM

هل تريد تعلم تصميم الويب وتحتاج إلى معرفة المزيد عن نموذج كائن المستند؟ إليك ما تحتاج لمعرفته حول DOM.

اقرأ التالي

نبذة عن الكاتب