1
00:00:04,518 --> 00:00:09,098
في التمرين السابق، رأينا استخدام أول توجيه هيكلي لدينا،

2
00:00:09,098 --> 00:00:09,812
NGFor.

3
00:00:09,812 --> 00:00:15,186
دعونا نسأل أنفسنا بعض الأسئلة حول التوجيهات الهيكلية

4
00:00:15,186 --> 00:00:19,970
ومعرفة كيف تكون مفيدة عندما نكتب تطبيقاتنا الزاوي.

5
00:00:22,000 --> 00:00:26,110
التوجيهات الهيكلية هي نوع واحد من التوجيهات.

6
00:00:26,110 --> 00:00:30,628
لذا فإن التوجيهات هي مظلة عامة تحتوي على مكونات،

7
00:00:30,628 --> 00:00:35,847
ثم لديك توجيهات هيكلية، ثم لديك توجيهات سمة.

8
00:00:35,847 --> 00:00:39,015
لذلك دعونا نتعلم أكثر قليلا عن التوجيهات.

9
00:00:39,015 --> 00:00:43,121
لذلك ما ندركه هو أن القوالب الزاوي ديناميكية، لذلك يجب أن

10
00:00:43,121 --> 00:00:47,379
يتم إنشاؤها على الطاير، سيكون هناك الكثير من التلاعب الذي يجب القيام به على DOM.

11
00:00:47,379 --> 00:00:52,721
لذا، ما تساعدنا التوجيهات هو تمكيننا من إعطاء تعليمات

12
00:00:52,721 --> 00:00:57,710
إلى Angular حول كيفية تقديم القوالب إلى DOM.

13
00:00:57,710 --> 00:01:00,900
لذا، يستخدمون التوجيهات لإعطاء التعليمات

14
00:01:00,900 --> 00:01:04,880
إلى Angular لأنه يعرض القوالب على الشاشة.

15
00:01:04,880 --> 00:01:10,120
لذلك، بشكل عام، يمكن تعريف التوجيه مباشرة في Angular باستخدام

16
00:01:10,120 --> 00:01:14,520
فئة مع ديكور @Directive.

17
00:01:14,520 --> 00:01:19,044
ونحن نرى أيضا مثالا على التوجيه الذي يمكننا أنفسنا

18
00:01:19,044 --> 00:01:22,630
خلق قليلا في وقت لاحق في هذه الدورة.

19
00:01:22,630 --> 00:01:25,258
في الوقت الحالي، سنلقي نظرة على توجيهات البناء.

20
00:01:25,258 --> 00:01:26,587
وعلى وجه الخصوص،

21
00:01:26,587 --> 00:01:32,650
واجهنا بالفعل نوعنا الأول من التوجيه، وهو مكون.

22
00:01:32,650 --> 00:01:35,060
المكون هو نوع خاص من التوجيه و

23
00:01:35,060 --> 00:01:39,800
Angular، والذي يحتوي على قالب خاص به مرتبط به.

24
00:01:39,800 --> 00:01:45,700
وقد رأينا بالفعل كيف يمكننا الاستفادة من عنصر لتحديد

25
00:01:45,700 --> 00:01:50,420
أجزاء من تخطيطنا لشاشة التطبيق لدينا.

26
00:01:51,910 --> 00:01:57,610
كما ذكرت، هناك نوعان آخران من التوجيهات في توجيهات Angular

27
00:01:57,610 --> 00:02:00,465
والهيكلية والسمة.

28
00:02:00,465 --> 00:02:05,138
سوف ندرس بسرعة التوجيهات الهيكلية في هذا الدرس.

29
00:02:05,138 --> 00:02:09,359
وبعد ذلك سوف ننظر في توجيهات السمة قليلا في وقت لاحق في

30
00:02:09,359 --> 00:02:10,290
هذه الدورة.

31
00:02:11,400 --> 00:02:15,608
فما هي التوجيهات الهيكلية وكيف تكون مفيدة لنا؟

32
00:02:15,608 --> 00:02:19,590
ما ندركه ونحن نستخدم التوجيهات الهيكلية هو،

33
00:02:19,590 --> 00:02:24,910
أنها تساعدنا على تغيير تخطيط المحتوى لدينا من

34
00:02:24,910 --> 00:02:30,020
خلال مساعدتنا على إضافة وإزالة عناصر من DOM. على

35
00:02:30,020 --> 00:02:33,800
وجه الخصوص، لاحظ استخدام المصطلح إضافة

36
00:02:33,800 --> 00:02:37,460
وإزالة واستبدال العناصر في DOM.

37
00:02:37,460 --> 00:02:41,720
لذلك أنت تستخدم حرفيا التوجيهات الهيكلية للتعامل مع

38
00:02:41,720 --> 00:02:44,640
DOM الخاص بك من صفحة الويب الخاصة بك.

39
00:02:44,640 --> 00:02:51,124
لذلك، يمكنك استخدام التوجيهات الهيكلية عن طريق تطبيقها على عنصر مضيف،

40
00:02:51,124 --> 00:02:56,738
عادة div أو عنصر قائمة في DOM وأيضا إلى أحفاده.

41
00:02:56,738 --> 00:02:59,435
لقد رأينا بالفعل المستخدم،

42
00:02:59,435 --> 00:03:04,840
التوجيه الهيكلي ngFor، في التمرين السابق.

43
00:03:04,840 --> 00:03:11,650
ورأينا كيف نستخدم NgFor لحلقة من خلال مجموعة من الأطباق،

44
00:03:11,650 --> 00:03:17,020
ومن ثم تخطيط كل واحد منهم لبناء القائمة لمطعمنا.

45
00:03:18,480 --> 00:03:22,870
هنا، سوف أذكر بإيجاز بعض التوجيهات الهيكلية المشتركة التي

46
00:03:22,870 --> 00:03:27,180
ستواجهها أثناء كتابة القسم الزاوي الخاص بك.

47
00:03:27,180 --> 00:03:31,520
واحدة من التوجيهات الهيكلية الأكثر شيوعا التي ستراها هو

48
00:03:31,520 --> 00:03:32,620
توجيه NGiF.

49
00:03:32,620 --> 00:03:40,710
عند استخدامه في بناء جملة القالب الخاص بك، ستكتبه كـ * ngif،

50
00:03:40,710 --> 00:03:45,800
لذلك هذه هي الطريقة التي يتم بها استخدام هذا التوجيه في DOM الخاص بك.

51
00:03:45,800 --> 00:03:50,973
لذلك، على سبيل المثال، إذا قمت بتطبيق توجيه NGiF على div مثل

52
00:03:50,973 --> 00:03:56,050
هذا في هذا المثال، ما تحدده هو أنه

53
00:03:56,050 --> 00:04:01,845
إذا لم يكن selectedDish فارغًا، فسيتم إضافة هذا div إلى DOM.

54
00:04:01,845 --> 00:04:05,287
إذا كان هذا SelectedDish فارغًا،

55
00:04:05,287 --> 00:04:10,053
فلن يتم إضافة هذا div، مهما كان موجودًا في هذا div إلى DOM، لذلك

56
00:04:10,053 --> 00:04:15,965
تقوم بإزالة هذا حرفيًا من DOM إذا تبين أن القيمة خاطئة.

57
00:04:15,965 --> 00:04:19,800
إذا اتضح أن يكون صحيحا، ثم يتم إضافته في تفريغ.

58
00:04:19,800 --> 00:04:24,280
وبالمثل، رأينا استخدام التوجيه ngFor.

59
00:04:24,280 --> 00:04:29,580
لذلك، حيث حددنا، على سبيل المثال، لMD-قائمة البند في

60
00:04:29,580 --> 00:04:35,470
التمرين السابق قلنا * ngFor وقال، دعونا طبق من الأطباق.

61
00:04:35,470 --> 00:04:40,750
لذلك هذا يسمح لنا بالتكرار على مجموعة من الأطباق

62
00:04:40,750 --> 00:04:46,925
التي تم تعريفها في معطف البرنامج النصي الخاص بنا.

63
00:04:46,925 --> 00:04:55,570
توجيه هيكلي آخر قد يجد استخدامًا شائعًا هو توجيه ngSwitch.

64
00:04:55,570 --> 00:04:57,840
على الرغم من أنني ليس لدي مثال الآن، في

65
00:04:57,840 --> 00:05:02,940
وقت لاحق في هذه الدورة سوف نواجه استخدام التوجيه نغسويتش.

66
00:05:02,940 --> 00:05:07,080
يسمح لك هذا بإضافة عناصر معينة إلى DOM بشكل انتقائي

67
00:05:07,080 --> 00:05:11,940
عن طريق تحديد شرط، اعتمادًا على ما يتم تقييم الشرط إليه،

68
00:05:11,940 --> 00:05:17,060
ثم ستستخدم أحد هذه العناصر بين القائمة.

69
00:05:17,060 --> 00:05:21,858
إذا كنت معتادًا على بيان التبديل من C ++ أو Java،

70
00:05:21,858 --> 00:05:25,250
فإن ngSwitch يبدو مألوفًا جدًا لك.

71
00:05:25,250 --> 00:05:29,710
لذلك سوف تتصرف على غرار بيان التبديل الذي كنت

72
00:05:29,710 --> 00:05:32,295
تستخدم ل من جافا أو C ++.

73
00:05:32,295 --> 00:05:35,675
مع المناقشة القصيرة حول التوجيهات الهيكلية،

74
00:05:35,675 --> 00:05:40,748
دعونا ننتقل إلى التمرين التالي حيث سنواصل دراسة المكونات.

75
00:05:40,748 --> 00:05:47,459
[ موسيقى]