[MUSIC]
لقد أنشأنا للتو أول تطبيق الزاوي لدينا في التمرين السابق.
يجب أن تتساءل، ماذا يبدو تطبيق Angular النموذجي؟
ما هو هيكلها وهندستها المعمارية،
وكيف نقوم ببناء تطبيق Angular؟
دعونا نتحدث عن هذه الأشياء خطوة بخطوة، بدءا من هذه المحاضرة.
إلقاء نظرة سريعة على مجلد التطبيق، في محرر.
تلاحظ على الفور أن Angular CLI قد أنشأ مجموعة كاملة من
الملفات في مجلدات مختلفة في تطبيقنا.
ماذا تحتوي هذه الملفات؟
كيف تشكل تطبيقًا Angular؟
دعونا نفحصها خطوة بخطوة لفهم البنية النموذجية
لتطبيق Angular.
كما أدركنا بالفعل،
يتم بناء تطبيقات Angular كمزيج
من HTML وإما TypeScript أو JavaScript.
في هذه الدورة سوف نستخدم TypeScript كلغة الاختيار
لبناء تطبيق Angular الخاص بنا.
يتكون الزاوي نفسه من عدة مكتبات،
بعضها يسمى المكتبات والبعض الآخر مكتبات اختيارية.
اعتمادًا على نوع من تطبيق Angular الذي تحاول إنشاءه،
ستقوم بتضمين بعض هذه في تطبيقك.
كما تعلمنا بالفعل، Angular هو إطار جافا سكريبت
وسنستفيد منه لبناء تطبيقنا.
لتلخيص، التطبيق الزاوي هو وحدات في طبيعته وسوف تتكون من
عدة مكونات، جنبا إلى جنب مع القوالب الخاصة بهم، التي تشكل التطبيق.
ليس ذلك فقط،
سيتم تنظيم هذه المكونات، وأجزاء أخرى من تطبيق Angular، مثل الخدمات، في وحدات.
وهذه الوحدات، بدورها، سيتم استخدامها من قبل وحدات المستوى الأعلى.
حتى تتمكن من النظر إلى تطبيق Angular كونه
بنية معيارية مع وحدة الجذر في الأعلى،
والتي تأخذ مساعدة من وحدات أخرى منظمة في التسلسل الهرمي للنمذجة الخاص بك.
دعونا نفحص طلبنا لفهم كيفية إنشاء هذا.
قبل المضي قدما، يتم
تسمية وحدة الجذر بشكل افتراضي في Angular وحدة التطبيق.
الذهاب إلى التعليمات البرمجية لدينا، دعونا نبدأ رحلتنا و index.html.
حتى في هذا الملف index.html، يمكنك أن ترى أن لدينا رمز هتمل نموذجي هنا،
جنبا إلى جنب مع هذا الخط معين الذي يقول التطبيق الجذر.
يمكنك التعرف عليها على الفور هذا لا يبدو وكأنه علامة HTML نموذجية.
لذلك دعونا نبدأ بطرح أنفسنا السؤال، ما الذي يمثله هذا،
ولماذا يتم تضمينه في صفحة index.html؟
كما رأينا بالفعل، فإن تطبيق Angular النموذجي
هو تسلسل هرمي للوحدات مع وحدة الجذر.
يتم تشغيل التطبيق الزاوي الخاص بك عن طريق bootstrapping وحدة الجذر
لبدء التطبيق الخاص بك.
فكيف يمكننا التمهيد تطبيق الزاوي؟
رأينا بالفعل صفحة index.html، ورأيت عنصرًا هناك يسمى جذر التطبيق.
لذلك دعونا نسأل أنفسنا بضعة أسئلة أخرى.
رفيق إلى صفحة index.html هو ملف.ts الرئيسي.
إذا قمت بفتح هذا الملف سترى أنه يحتوي على مجموعة
من عبارات الاستيراد في TypeScript، كما هو مكتوب هنا.
دعونا لا نتعمق كثيرا في التفاصيل، ولكن
سأعود لشرح ذلك في فترة قصيرة.
ولكن على وجه الخصوص،
اسمحوا لي أن ألفت انتباهكم إلى هذا الخط بالذات في ملف.ts الرئيسي.
الذي يقول بلاتفورمبروسيرديناميك () .بوتسترابمودول
ثم لاحظ المعلمة هنا، والتي تقول (أبمودول).
لذلك كما ذكرت، في وقت سابق وحدة التطبيق هو
الاسم النموذجي المعطى لوحدة الجذر في تطبيق Angular.
إذا نظرت إلى التسلسل الهرمي للملفات،
فسترى بالفعل ملفًا هناك يسمى app_module.ts.
نحن ذاهبون لزيارة ذلك الملف في فترة قصيرة لنرى ما يحتوي عليه.
الآن، والعودة إلى هذه الواردات،
يمكنك أن ترى أن دعونا نأخذ مثال الاستيراد الأول هنا.
وتقول استيراد إنابلبرودمود من '@angular /كور'.
لذلك ما يحدده هذا هو أننا سنقوم باستيراد هذه
الوحدة المعينة من مكتبة Angular الأساسية.
وبالمثل، ترى الثاني قائلا استيراد بلاتفورمبروسيرديناميك
من '@angular /منصة متصفح-ديناميكي».
لذلك من هذه المكتبة تقوم باستيراد هذه الوحدة في مكانها.
الآن، وحدة بلاتفورمبروسيرديناميك تمكنك من التمهيد
التطبيق الزاوي الخاص بك عن طريق أخذ وحدة الجذر الخاصة بك كمعلمة.
من الواضح أن هناك العديد من الملفات الأخرى في هذا المجلد والمجلدات الفرعية هناك.
دعونا لا نقلق أنفسنا أكثر من اللازم عنهم في الوقت الراهن.
سوف نتعرف على بعض منهم ونحن نذهب على طول في هذه الدورة.
الآن، يساعد Angular CLI على إنشاء هذا التسلسل الهرمي
للمجلدات والملفات، مع الإعدادات الضرورية
لكي تتمكن من تمهيد التطبيق الزاوي والبدء.
القيام بذلك باليد هو قليلا من مهمة مملة.
لذلك، يبسط CLI Angular إعداد
المجلد لتطبيق Angular الخاص بك.
مرة أخرى، انتقل إلى ملف app_module.ts.
كما ذكرت، هذه هي وحدة الجذر لتطبيق Angular الخاص بك.
الآن عادة، سيتم تسمية وحدة الجذر كملف app.module،
ولكن هذا ليس سوى اسم مقترح في Angular.
سترى أن العديد من الملفات التي تشكل تطبيق Angular،
هناك طرق مقترحة لتسمية تلك الملفات.
ونحن نذهب من خلال الدورة سوف نتعلم على وجه التحديد عن كل واحد من هذه
الملفات.
حتى إلقاء نظرة على محتويات app_module.ts،
داخل هناك ترى مجموعة من عبارات الاستيراد هناك.
إلقاء نظرة سريعة عليها تقول استيراد {BrowserModule} من
'@angular -platform-proser'.
استيراد {ngModule} من '@angular /core'.
و نغمودول هو وحدة الزاوي.
سوف نتعلم أكثر قليلا عن ذلك لفترة قصيرة في وقت لاحق.
بالإضافة إلى ذلك، ترى عبارة استيراد أخرى هنا،
تشير إلى استيراد {AppComponent} من '. /app.component '.
وإلقاء نظرة على الملفات هنا،
ترى بالفعل app.component.tsfileware،
ثم عدة ملفات أخرى هنا، بما في ذلك card.html
app.component.acss، وملفات أخرى.
الآن، يحدد هذا البيان أن وحدة الجذر هذه ستتضمن هذا المكون،
وستشكل مجاملة الجذر لتطبيق Angular الخاص بك.
يتكون تطبيق Angular النموذجي، كما رأينا، من عدد من
الوحدات النمطية مع وحدة الجذر كوحدة أساسية،
مما يساعدك على تمهيد تطبيق Angular الخاص بك.
وحدة الجذر هي وحدة Angular مع ميزة، أو هي فئة.
لذلك هذا هو المكان الذي ترى فيه استخدام فئة TypeScript هنا،
لذلك إذا ذهبت إلى الوحدة الحمراء أسفل هنا سترى
هذا البيان يسمى فئة التصدير AppModule.
يضيف TypeScript فئات إلى شفرة جافا سكريبت النموذجية.
إذا كنت معتادًا على جافا سكريبت ES-5 فقط،
فلن يتم تقديم الفصول الدراسية بعد هناك، ولكن
الإصدارات الأحدث من JavaScript ستقدم دعمًا للفصول الدراسية.
يحتوي TypeScript أيضًا على دعم للفصول الدراسية.
لذلك إذا كان لديك خبرة في البرمجة الموجهة للكائنات،
فأنت بالفعل على دراية بالفصول الدراسية.
لذلك يتم جلب هذا النوع من النهج إلى جافا سكريبت مع إدخال
الطبقات في TypeScript والإصدارات المستقبلية من JavaScript.
بالإضافة إلى ذلك ستلاحظ أن هذه الفئة تحتوي
على ديكور Ngmodule المرتبط بذلك.
لذا فإن الديكور هو، مرة أخرى، وظيفة من
ذلك يعدل فئات جافا سكريبت.
سنرى استخدام الديكور في العديد من الأماكن في تطبيقنا الزاوي.
هذا هو Ngmodule.
الديكور من ذلك تمكنك من تحديد بعض التفاصيل حول
وحدة التطبيق هذه.
لذلك تأخذ وظيفة الديكور هذه مجموعة معينة
من البيانات الوصفية لمساعدتك على وصف هذه الوحدة.
لذلك يحتوي كائن البيانات الوصفية هذا، كما ترون، على
الإعلانات والواردات والمزودين وbootstrap.
وسوف تحتوي أيضًا على صادرات إذا كانت هذه الوحدة تقوم بتصدير شيء يمكن
استخدامه بواسطة وحدة نمطية أخرى.
وبما أن هذا يحدث ليكون وحدة الجذر، ليس لدينا تصدير من هذه الوحدة.
لذلك بدلا من ذلك لدينا فقط الإعلانات، والواردات، ومقدمي، و bootstrap.
حتى هنا هذا واحد هو إلى حد ما مباشرة إلى الأمام لفهم.
وهو يحدد أنه لبوتستراب هذا التطبيق الزاوي،
نحن بحاجة إلى التمهيد أبكومبوننت.
لذا فإن AppComponent هو المكون الجذري لتطبيق Angular الخاص بنا.
بالإضافة إلى ذلك، يحدد جزء الواردات الخصائص،
ورؤية كل هذه الوحدات تحتاج إلى استيراد لاستخدامها مع وحدة التطبيق هذه.
لذلك تعتمد وحدة التطبيق هذه الآن على هذه الوحدات الأخرى.
لذلك هذه هي الوحدات التي سيتم استيرادها إلى وحدة التطبيق
كجزء من التسلسل الهرمي، وبالتالي السبب في استيرادنا هذه الوحدات هنا.
لذلك عند استيراد الوحدات النمطية،
فأنت تحدد هنا قائلا إن وحدة التطبيق ستستفيد من هذه الوحدة.
وبالتالي فإن خاصية الواردات تحدد تلك الوحدات التي تحتاج إلى استيراد أو
تلك الوحدات التي تعتمد عليها هذه الوحدة بالذات.
الإعلانات هنا، خاصية الإعلانات،
هي الخاصية التي تعلن فئات العرض
التي تنتمي إلى هذه الوحدة النمطية معينة.
وبالتالي فإن فئات العرض في حالة وحدة Angular
ستكون في شكل أي من المكونات والتوجيهات والأنابيب.
سنتحدث عن التوجيهات والأنابيب في وقت لاحق قليلاً في هذه الدورة،
سنتحدث عن المكونات في الدرس التالي.
يحدد مقدمو الخدمات جميع الخدمات التي
ستستخدمها هذه الوحدة بالذات.
الخدمات التي سنتحدث عنها بمزيد من التفصيل
في وحدة الأسبوع المقبل.
سنتحدث عن مزيد من التفاصيل حول الخدمات، وكيفية إنشائها،
وكيف يمكننا الاستفادة منها مع تطبيق Angular الخاص بنا.
لتلخيص ما تعلمناه حتى الآن، ندرك أن الوحدة النمطية
في تطبيق Angular يمكن أن تتكون من مجموعة من المكونات
والخدمات التي ستكون مطلوبة من هذه الوحدة عن طريق استيرادها.
وسيتم الإعلان عن هذه باستخدام خاصية الإعلانات الخاصة
بديكور Ngmodule في وحدة التطبيق الخاصة بنا.
الآن، هذه المكونات نفسها يمكن أن تعتمد على
مكونات أخرى، أو خدمات، أو توجيهات
، أو أنابيب، كما سنرى في بقية هذه الدورة بالذات.
لذلك مع هذا لدينا فكرة تقريبية عن كيفية تنظيم تطبيق Angular نموذجي.
بالعودة إلى شفرتنا، حان الوقت الآن للاستخدام لفحص
هذا الملف app.component.ts، وملف app.component.html.
الذي يعلن القالب لمكون لدينا،
وملف app.component.ts،
الذي يحدد جزء TypeScript من المكون لدينا.
الآن، سنفعل ذلك في الدرس التالي، حيث سنتعامل مع المكونات
وكيف يمكننا إنشاء مكونات جديدة وإضافتها إلى تطبيقنا الزاوي.
[ موسيقى]