1
00:00:00,000 --> 00:00:04,549
[MUSIC]

2
00:00:04,549 --> 00:00:08,557
في أول وحدة استعرضنا التوجيهات لفترة وجيزة

3
00:00:08,557 --> 00:00:11,590
وننظر إلى التوجيهات الهيكلية.

4
00:00:11,590 --> 00:00:15,410
لقد رأينا كيف تمكننا التوجيهات الهيكلية من تصميم النماذج.

5
00:00:15,410 --> 00:00:17,880
لمكوناتنا الزاوي.

6
00:00:17,880 --> 00:00:21,160
في هذا الدرس، سنقوم بمراجعة توجيهات السمات.

7
00:00:21,160 --> 00:00:23,770
النوع الثالث من التوجيه

8
00:00:23,770 --> 00:00:28,790
وسوف ننظر أيضا في كيفية تصميم توجيه مخصص

9
00:00:28,790 --> 00:00:31,350
في التمرين الذي يتبع هذه المحاضرة.

10
00:00:33,240 --> 00:00:37,490
لذا وكما أدركنا، فإن التوجيهات هي طريقة

11
00:00:37,490 --> 00:00:42,360
لتصميم كل من القوالب الزاوي وتمكيننا من القيام

12
00:00:42,360 --> 00:00:47,820
بأجزاء مختلفة من معالجة السد مع وجهات نظر تطبيقات R Angular.

13
00:00:47,820 --> 00:00:53,280
لذلك، رأينا استخدام التوجيهات لإعطاء تعليمات للتكرار الزاوي

14
00:00:53,280 --> 00:00:56,750
وكيفية تقديم القوالب في DOM.

15
00:00:56,750 --> 00:01:01,090
وقد تعلمنا بالفعل أنه ضمن تطبيق Angular،

16
00:01:01,090 --> 00:01:06,020
يتيح لنا استخدام التوجيهات الهيكلية في القوالب تصميم

17
00:01:06,020 --> 00:01:10,080
وجهات نظرنا حول تطبيق Angular الخاص بنا. و

18
00:01:10,080 --> 00:01:15,060
علمنا أيضا أن العنصر الذي استخدمناه على نطاق و

19
00:01:15,060 --> 00:01:20,640
اسع في مختلف التدريبات في هذه الدورة.

20
00:01:20,640 --> 00:01:26,410
إنه نوع خاص من التوجيه يحتوي على قالب أو عرض مرتبط به.

21
00:01:27,430 --> 00:01:29,560
وعلمنا أيضا في وقت سابق أن

22
00:01:29,560 --> 00:01:35,330
هناك نوعان آخران من التوجيهات التي يمكننا استخدامها في قوالب لدينا.

23
00:01:35,330 --> 00:01:39,390
التوجيهات الهيكلية والصفات التوجيهات.

24
00:01:39,390 --> 00:01:44,060
نظرنا إلى بعض التوجيهات الهيكلية المضمنة في

25
00:01:44,060 --> 00:01:46,990
الوحدة الأولى من هذه الدورة.

26
00:01:46,990 --> 00:01:52,380
ورأينا كيف يمكننا استخدام التوجيهات الهيكلية مثل NG4 أو NGF

27
00:01:52,380 --> 00:01:59,060
وأكثر في تلك التدريبات في الأجزاء السابقة من هذه الدورة.

28
00:01:59,060 --> 00:02:04,230
الآن سنلقي نظرة على النوع الآخر من التوجيه، توجيه السمة.

29
00:02:04,230 --> 00:02:05,630
ما هو توجيه السمة

30
00:02:05,630 --> 00:02:10,360
وكيف يساعدنا عند تصميم تطبيق Angular الخاص بنا.

31
00:02:10,360 --> 00:02:12,650
إذن ما هي توجيهات السمة؟

32
00:02:12,650 --> 00:02:18,790
يتم استخدام توجيهات السمة كسمات للعناصر في القالب الخاص بك.

33
00:02:18,790 --> 00:02:23,460
لذا تمامًا مثل أن لديك شفرة HTML الخاصة بك التي تكتبها داخل

34
00:02:23,460 --> 00:02:26,900
القالب وعناصر HTML، يمكنك تطبيق توجيه سمة

35
00:02:26,900 --> 00:02:28,410
على عناصر HTML هذه.

36
00:02:28,410 --> 00:02:31,940
رأينا أيضا التوجيه الهيكلي للمستخدم.

37
00:02:31,940 --> 00:02:37,020
ورأينا المكونات يمكن أن تضيف نفسها

38
00:02:37,020 --> 00:02:41,710
عناصر إضافية مثل هتمل التي يمكن استخدامها داخل قوالب التطبيق الزاوي الخاص بك.

39
00:02:41,710 --> 00:02:45,510
لذا فإن الطريقة التي نستخدم بها المكونات مع محدداتها

40
00:02:45,510 --> 00:02:49,850
كانت إحدى الطرق التي استخدمناها التوجيهات داخل تطبيقنا Angular.

41
00:02:49,850 --> 00:02:53,910
عندما رأينا استخدام التوجيهات الهيكلية التي تم تطبيقها

42
00:02:53,910 --> 00:02:58,890
على عناصر HTML المختلفة داخل القالب لدينا.

43
00:02:58,890 --> 00:03:02,590
الآن ننظر إلى توجيهات السمة التي تمكننا من تغيير

44
00:03:02,590 --> 00:03:06,930
خصائص معينة لعناصر HTML لدينا.

45
00:03:06,930 --> 00:03:09,480
فما هو استخدام توجيهات السمة؟

46
00:03:09,480 --> 00:03:15,480
تستمع توجيهات السمات إلى سلوك عناصر HTML أو

47
00:03:15,480 --> 00:03:21,410
سمات أو خصائص أو مكونات أخرى تستخدمها داخل القوالب وتعديلها.

48
00:03:21,410 --> 00:03:25,630
لقد استخدمنا بالفعل بعض

49
00:03:25,630 --> 00:03:30,500
توجيهات السمات المضمنة بالفعل دون التحدث عنها بشكل صريح.

50
00:03:30,500 --> 00:03:34,880
الحديث عن توجيهات السمات المضمنة التي تأتي كجزء من

51
00:03:34,880 --> 00:03:36,260
إطار العمل الزاوي الخاص بك.

52
00:03:36,260 --> 00:03:41,390
لقد واجهت بالفعل نموذج Ng في بعض الدروس السابقة

53
00:03:41,390 --> 00:03:46,410
في هذه الدورة، وتحديدًا في منطقة ربط البيانات

54
00:03:46,410 --> 00:03:52,620
وأيضًا عندما درسنا الخطوط في الوحدة السابقة.

55
00:03:52,620 --> 00:03:55,520
هناك نوعان آخران من توجيهات السمات المضمنة التي

56
00:03:55,520 --> 00:03:59,180
قد نواجهها هي ngClass و ngStyle.

57
00:03:59,180 --> 00:04:03,430
بالاسم نفسه يمكنك تخمين ما هو الغرض منها.

58
00:04:03,430 --> 00:04:07,600
وبالمثل، هناك بعض الوحدات الأخرى التي تستخدمها داخل

59
00:04:07,600 --> 00:04:13,190
تطبيقات Angular الخاصة بك مثل FormsModule وكذلك RouterModule التي تحتوي على

60
00:04:13,190 --> 00:04:18,245
مجموعة خاصة بها من توجيهات السمات المضمنة التي نستخدمها.

61
00:04:18,245 --> 00:04:22,865
في الواقع، لقد استخدمنا بالفعل عندما نحدد النماذج

62
00:04:22,865 --> 00:04:28,645
وأيضا استخدام جهاز التوجيه داخل تطبيق Angular الخاص بنا في وقت سابق.

63
00:04:28,645 --> 00:04:33,005
الآن، في هذه المرحلة، قد تتساءل، كيف أذهب نحو إنشاء

64
00:04:33,005 --> 00:04:37,985
توجيه السمة الخاص بي إذا كنت مهتمًا بإنشاء توجيه مخصص، لذلك

65
00:04:37,985 --> 00:04:44,950
هذا هو المكان الذي سننظر فيه في كيفية اشتقاق توجيه مخصص.

66
00:04:44,950 --> 00:04:50,470
دعونا استكشاف التوجيهات المخصصة في الشريحة التالية لفترة وجيزة

67
00:04:50,470 --> 00:04:53,040
وفي التمرين الذي يلي.

68
00:04:53,040 --> 00:04:57,280
لذا في التوجيهات المخصصة توقعك هو أنك ستتمكن من تنفيذ

69
00:04:57,280 --> 00:04:58,990
ما تهتم به. على

70
00:04:58,990 --> 00:05:03,310
وجه الخصوص، لذلك هذا هو المكان الذي يمكننا إنشاء توجيهاتنا المخصصة الخاصة.

71
00:05:03,310 --> 00:05:08,660
باستخدام CLI Angular، يمكنك إزالة رمز العظام العارية للتوجيه

72
00:05:08,660 --> 00:05:13,130
ثم تعديل هذا الرمز من أجل تنفيذ التوجيه المخصص الخاص بك.

73
00:05:13,130 --> 00:05:17,860
لذلك عند تنفيذ توجيه مخصص باستخدام Angular CLI،

74
00:05:17,860 --> 00:05:19,920
ستقوم بإنشاء توجيه لك.

75
00:05:19,920 --> 00:05:24,490
وبعد ذلك ستلاحظ على الفور أنه ضمن التوجيه،

76
00:05:24,490 --> 00:05:29,880
ستستخدم

77
00:05:29,880 --> 00:05:35,290
فئة الديكور المزخرفة هذه من أجل تحويل الفصل إلى توجيه

78
00:05:35,290 --> 00:05:39,410
وسنواجه واحدًا من هذا القبيل في التمرين التالي.

79
00:05:39,410 --> 00:05:45,120
بالإضافة إلى ذلك، مع المدير، خاصة عندما تستخدم توجيهات السمات

80
00:05:45,120 --> 00:05:50,490
وتريد تعديل أي من العناصر المستخدمة داخل القوالب الخاصة بك.

81
00:05:50,490 --> 00:05:55,560
فئة أخرى مفيدة بالنسبة لنا تسمى ElementRef.

82
00:05:55,560 --> 00:06:00,740
هذا مهم أيضًا من الكود الزاوي، ويتم حقنه في

83
00:06:00,740 --> 00:06:06,130
مُنشئ التوجيهات الخاص بك، وكتب فئة التوجيه الخاصة بك.

84
00:06:06,130 --> 00:06:10,940
ثم يتيح لك هذا الوصول إلى عناصر DOM

85
00:06:10,940 --> 00:06:13,580
ثم إجراء تعديلات عليها.

86
00:06:13,580 --> 00:06:18,137
لذلك مع هذا الفهم السريع لكيفية إنشاء توجيهات مخصصة،

87
00:06:18,137 --> 00:06:22,351
دعونا ننظر إلى مثال في التمرين الذي يتبع هذه المحاضرة.

88
00:06:22,351 --> 00:06:28,469
[ موسيقى]