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

2
00:00:04,599 --> 00:00:09,853
لقد أنشأنا للتو أول تطبيق الزاوي لدينا في التمرين السابق.

3
00:00:09,853 --> 00:00:13,758
يجب أن تتساءل، ماذا يبدو تطبيق Angular النموذجي؟

4
00:00:13,758 --> 00:00:16,345
ما هو هيكلها وهندستها المعمارية،

5
00:00:16,345 --> 00:00:18,669
وكيف نقوم ببناء تطبيق Angular؟

6
00:00:19,800 --> 00:00:25,560
دعونا نتحدث عن هذه الأشياء خطوة بخطوة، بدءا من هذه المحاضرة.

7
00:00:27,390 --> 00:00:34,280
إلقاء نظرة سريعة على مجلد التطبيق، في محرر.

8
00:00:34,280 --> 00:00:39,469
تلاحظ على الفور أن Angular CLI قد أنشأ مجموعة كاملة من

9
00:00:40,530 --> 00:00:45,820
الملفات في مجلدات مختلفة في تطبيقنا.

10
00:00:47,260 --> 00:00:50,240
ماذا تحتوي هذه الملفات؟

11
00:00:50,240 --> 00:00:53,930
كيف تشكل تطبيقًا Angular؟

12
00:00:53,930 --> 00:00:58,832
دعونا نفحصها خطوة بخطوة لفهم البنية النموذجية

13
00:00:58,832 --> 00:01:00,556
لتطبيق Angular.

14
00:01:00,556 --> 00:01:03,688
كما أدركنا بالفعل،

15
00:01:03,688 --> 00:01:08,828
يتم بناء تطبيقات Angular كمزيج

16
00:01:08,828 --> 00:01:13,727
من HTML وإما TypeScript أو JavaScript.

17
00:01:13,727 --> 00:01:18,735
في هذه الدورة سوف نستخدم TypeScript كلغة الاختيار

18
00:01:18,735 --> 00:01:21,169
لبناء تطبيق Angular الخاص بنا.

19
00:01:21,169 --> 00:01:25,146
يتكون الزاوي نفسه من عدة مكتبات،

20
00:01:25,146 --> 00:01:30,585
بعضها يسمى المكتبات والبعض الآخر مكتبات اختيارية.

21
00:01:30,585 --> 00:01:35,389
اعتمادًا على نوع من تطبيق Angular الذي تحاول إنشاءه،

22
00:01:35,389 --> 00:01:38,910
ستقوم بتضمين بعض هذه في تطبيقك.

23
00:01:38,910 --> 00:01:44,510
كما تعلمنا بالفعل، Angular هو إطار جافا سكريبت

24
00:01:44,510 --> 00:01:48,610
وسنستفيد منه لبناء تطبيقنا.

25
00:01:49,715 --> 00:01:56,800
لتلخيص، التطبيق الزاوي هو وحدات في طبيعته وسوف تتكون من

26
00:01:56,800 --> 00:02:03,160
عدة مكونات، جنبا إلى جنب مع القوالب الخاصة بهم، التي تشكل التطبيق.

27
00:02:03,160 --> 00:02:09,090
ليس ذلك فقط،

28
00:02:09,090 --> 00:02:13,060
سيتم تنظيم هذه المكونات، وأجزاء أخرى من تطبيق Angular، مثل الخدمات، في وحدات.

29
00:02:13,060 --> 00:02:18,892
وهذه الوحدات، بدورها، سيتم استخدامها من قبل وحدات المستوى الأعلى.

30
00:02:18,892 --> 00:02:23,889
حتى تتمكن من النظر إلى تطبيق Angular كونه

31
00:02:23,889 --> 00:02:27,822
بنية معيارية مع وحدة الجذر في الأعلى،

32
00:02:27,822 --> 00:02:34,966
والتي تأخذ مساعدة من وحدات أخرى منظمة في التسلسل الهرمي للنمذجة الخاص بك.

33
00:02:34,966 --> 00:02:41,170
دعونا نفحص طلبنا لفهم كيفية إنشاء هذا.

34
00:02:41,170 --> 00:02:45,550
قبل المضي قدما، يتم

35
00:02:45,550 --> 00:02:50,810
تسمية وحدة الجذر بشكل افتراضي في Angular وحدة التطبيق.

36
00:02:50,810 --> 00:02:55,970
الذهاب إلى التعليمات البرمجية لدينا، دعونا نبدأ رحلتنا و index.html.

37
00:02:55,970 --> 00:03:03,519
حتى في هذا الملف index.html، يمكنك أن ترى أن لدينا رمز هتمل نموذجي هنا،

38
00:03:03,519 --> 00:03:09,079
جنبا إلى جنب مع هذا الخط معين الذي يقول التطبيق الجذر.

39
00:03:09,079 --> 00:03:15,270
يمكنك التعرف عليها على الفور هذا لا يبدو وكأنه علامة HTML نموذجية.

40
00:03:15,270 --> 00:03:20,130
لذلك دعونا نبدأ بطرح أنفسنا السؤال، ما الذي يمثله هذا،

41
00:03:20,130 --> 00:03:25,970
ولماذا يتم تضمينه في صفحة index.html؟

42
00:03:25,970 --> 00:03:31,090
كما رأينا بالفعل، فإن تطبيق Angular النموذجي

43
00:03:31,090 --> 00:03:35,490
هو تسلسل هرمي للوحدات مع وحدة الجذر.

44
00:03:35,490 --> 00:03:40,660
يتم تشغيل التطبيق الزاوي الخاص بك عن طريق bootstrapping وحدة الجذر

45
00:03:40,660 --> 00:03:42,520
لبدء التطبيق الخاص بك.

46
00:03:42,520 --> 00:03:46,430
فكيف يمكننا التمهيد تطبيق الزاوي؟

47
00:03:46,430 --> 00:03:53,566
رأينا بالفعل صفحة index.html، ورأيت عنصرًا هناك يسمى جذر التطبيق.

48
00:03:53,566 --> 00:03:58,306
لذلك دعونا نسأل أنفسنا بضعة أسئلة أخرى.

49
00:03:58,306 --> 00:04:03,102
رفيق إلى صفحة index.html هو ملف.ts الرئيسي.

50
00:04:03,102 --> 00:04:07,602
إذا قمت بفتح هذا الملف سترى أنه يحتوي على مجموعة

51
00:04:07,602 --> 00:04:12,790
من عبارات الاستيراد في TypeScript، كما هو مكتوب هنا.

52
00:04:12,790 --> 00:04:16,460
دعونا لا نتعمق كثيرا في التفاصيل، ولكن

53
00:04:16,460 --> 00:04:20,160
سأعود لشرح ذلك في فترة قصيرة.

54
00:04:20,160 --> 00:04:21,652
ولكن على وجه الخصوص،

55
00:04:21,652 --> 00:04:27,017
اسمحوا لي أن ألفت انتباهكم إلى هذا الخط بالذات في ملف.ts الرئيسي.

56
00:04:27,017 --> 00:04:31,600
الذي يقول بلاتفورمبروسيرديناميك () .بوتسترابمودول

57
00:04:31,600 --> 00:04:36,277
ثم لاحظ المعلمة هنا، والتي تقول (أبمودول).

58
00:04:36,277 --> 00:04:41,075
لذلك كما ذكرت، في وقت سابق وحدة التطبيق هو

59
00:04:41,075 --> 00:04:45,985
الاسم النموذجي المعطى لوحدة الجذر في تطبيق Angular.

60
00:04:45,985 --> 00:04:48,643
إذا نظرت إلى التسلسل الهرمي للملفات،

61
00:04:48,643 --> 00:04:52,867
فسترى بالفعل ملفًا هناك يسمى app_module.ts.

62
00:04:52,867 --> 00:04:57,131
نحن ذاهبون لزيارة ذلك الملف في فترة قصيرة لنرى ما يحتوي عليه.

63
00:04:57,131 --> 00:04:59,877
الآن، والعودة إلى هذه الواردات،

64
00:04:59,877 --> 00:05:05,250
يمكنك أن ترى أن دعونا نأخذ مثال الاستيراد الأول هنا.

65
00:05:05,250 --> 00:05:10,330
وتقول استيراد إنابلبرودمود من '@angular /كور'.

66
00:05:10,330 --> 00:05:15,740
لذلك ما يحدده هذا هو أننا سنقوم باستيراد هذه

67
00:05:15,740 --> 00:05:19,970
الوحدة المعينة من مكتبة Angular الأساسية.

68
00:05:19,970 --> 00:05:24,820
وبالمثل، ترى الثاني قائلا استيراد بلاتفورمبروسيرديناميك

69
00:05:24,820 --> 00:05:28,040
من '@angular /منصة متصفح-ديناميكي».

70
00:05:28,040 --> 00:05:32,500
لذلك من هذه المكتبة تقوم باستيراد هذه الوحدة في مكانها.

71
00:05:32,500 --> 00:05:37,896
الآن، وحدة بلاتفورمبروسيرديناميك تمكنك من التمهيد

72
00:05:37,896 --> 00:05:44,100
التطبيق الزاوي الخاص بك عن طريق أخذ وحدة الجذر الخاصة بك كمعلمة.

73
00:05:44,100 --> 00:05:51,237
من الواضح أن هناك العديد من الملفات الأخرى في هذا المجلد والمجلدات الفرعية هناك.

74
00:05:51,237 --> 00:05:55,534
دعونا لا نقلق أنفسنا أكثر من اللازم عنهم في الوقت الراهن.

75
00:05:55,534 --> 00:05:59,900
سوف نتعرف على بعض منهم ونحن نذهب على طول في هذه الدورة.

76
00:05:59,900 --> 00:06:05,868
الآن، يساعد Angular CLI على إنشاء هذا التسلسل الهرمي

77
00:06:05,868 --> 00:06:09,848
للمجلدات والملفات، مع الإعدادات الضرورية

78
00:06:09,848 --> 00:06:16,768
لكي تتمكن من تمهيد التطبيق الزاوي والبدء.

79
00:06:16,768 --> 00:06:20,233
القيام بذلك باليد هو قليلا من مهمة مملة.

80
00:06:20,233 --> 00:06:24,811
لذلك، يبسط CLI Angular إعداد

81
00:06:24,811 --> 00:06:29,460
المجلد لتطبيق Angular الخاص بك.

82
00:06:29,460 --> 00:06:36,210
مرة أخرى، انتقل إلى ملف app_module.ts.

83
00:06:36,210 --> 00:06:41,820
كما ذكرت، هذه هي وحدة الجذر لتطبيق Angular الخاص بك.

84
00:06:41,820 --> 00:06:47,912
الآن عادة، سيتم تسمية وحدة الجذر كملف app.module،

85
00:06:47,912 --> 00:06:51,915
ولكن هذا ليس سوى اسم مقترح في Angular.

86
00:06:51,915 --> 00:06:57,627
سترى أن العديد من الملفات التي تشكل تطبيق Angular،

87
00:06:57,627 --> 00:07:01,297
هناك طرق مقترحة لتسمية تلك الملفات.

88
00:07:01,297 --> 00:07:05,889
ونحن نذهب من خلال الدورة سوف نتعلم على وجه التحديد عن كل واحد من هذه

89
00:07:05,889 --> 00:07:06,720
الملفات.

90
00:07:06,720 --> 00:07:11,032
حتى إلقاء نظرة على محتويات app_module.ts،

91
00:07:11,032 --> 00:07:15,790
داخل هناك ترى مجموعة من عبارات الاستيراد هناك.

92
00:07:15,790 --> 00:07:19,213
إلقاء نظرة سريعة عليها تقول استيراد {BrowserModule} من

93
00:07:19,213 --> 00:07:21,740
'@angular -platform-proser'.

94
00:07:21,740 --> 00:07:25,039
استيراد {ngModule} من '@angular /core'.

95
00:07:25,039 --> 00:07:29,550
و نغمودول هو وحدة الزاوي.

96
00:07:29,550 --> 00:07:34,070
سوف نتعلم أكثر قليلا عن ذلك لفترة قصيرة في وقت لاحق.

97
00:07:34,070 --> 00:07:38,532
بالإضافة إلى ذلك، ترى عبارة استيراد أخرى هنا،

98
00:07:38,532 --> 00:07:44,159
تشير إلى استيراد {AppComponent} من '. /app.component '.

99
00:07:44,159 --> 00:07:47,309
وإلقاء نظرة على الملفات هنا،

100
00:07:47,309 --> 00:07:52,141
ترى بالفعل app.component.tsfileware،

101
00:07:52,141 --> 00:07:58,863
ثم عدة ملفات أخرى هنا، بما في ذلك card.html

102
00:07:58,863 --> 00:08:02,972
app.component.acss، وملفات أخرى.

103
00:08:02,972 --> 00:08:10,939
الآن، يحدد هذا البيان أن وحدة الجذر هذه ستتضمن هذا المكون،

104
00:08:10,939 --> 00:08:17,640
وستشكل مجاملة الجذر لتطبيق Angular الخاص بك.

105
00:08:17,640 --> 00:08:22,450
يتكون تطبيق Angular النموذجي، كما رأينا، من عدد من

106
00:08:22,450 --> 00:08:27,330
الوحدات النمطية مع وحدة الجذر كوحدة أساسية،

107
00:08:27,330 --> 00:08:31,360
مما يساعدك على تمهيد تطبيق Angular الخاص بك.

108
00:08:31,360 --> 00:08:38,970
وحدة الجذر هي وحدة Angular مع ميزة، أو هي فئة.

109
00:08:38,970 --> 00:08:44,690
لذلك هذا هو المكان الذي ترى فيه استخدام فئة TypeScript هنا،

110
00:08:44,690 --> 00:08:49,380
لذلك إذا ذهبت إلى الوحدة الحمراء أسفل هنا سترى

111
00:08:49,380 --> 00:08:53,485
هذا البيان يسمى فئة التصدير AppModule.

112
00:08:53,485 --> 00:08:59,550
يضيف TypeScript فئات إلى شفرة جافا سكريبت النموذجية.

113
00:08:59,550 --> 00:09:03,085
إذا كنت معتادًا على جافا سكريبت ES-5 فقط،

114
00:09:03,085 --> 00:09:06,873
فلن يتم تقديم الفصول الدراسية بعد هناك، ولكن

115
00:09:06,873 --> 00:09:11,942
الإصدارات الأحدث من JavaScript ستقدم دعمًا للفصول الدراسية.

116
00:09:11,942 --> 00:09:14,971
يحتوي TypeScript أيضًا على دعم للفصول الدراسية.

117
00:09:14,971 --> 00:09:18,651
لذلك إذا كان لديك خبرة في البرمجة الموجهة للكائنات،

118
00:09:18,651 --> 00:09:21,139
فأنت بالفعل على دراية بالفصول الدراسية.

119
00:09:21,139 --> 00:09:27,106
لذلك يتم جلب هذا النوع من النهج إلى جافا سكريبت مع إدخال

120
00:09:27,106 --> 00:09:31,750
الطبقات في TypeScript والإصدارات المستقبلية من JavaScript.

121
00:09:31,750 --> 00:09:37,028
بالإضافة إلى ذلك ستلاحظ أن هذه الفئة تحتوي

122
00:09:37,028 --> 00:09:42,314
على ديكور Ngmodule المرتبط بذلك.

123
00:09:42,314 --> 00:09:47,312
لذا فإن الديكور هو، مرة أخرى، وظيفة من

124
00:09:47,312 --> 00:09:51,874
ذلك يعدل فئات جافا سكريبت.

125
00:09:51,874 --> 00:09:59,254
سنرى استخدام الديكور في العديد من الأماكن في تطبيقنا الزاوي.

126
00:09:59,254 --> 00:10:00,980
هذا هو Ngmodule.

127
00:10:00,980 --> 00:10:05,850
الديكور من ذلك تمكنك من تحديد بعض التفاصيل حول

128
00:10:05,850 --> 00:10:06,797
وحدة التطبيق هذه.

129
00:10:06,797 --> 00:10:12,398
لذلك تأخذ وظيفة الديكور هذه مجموعة معينة

130
00:10:12,398 --> 00:10:18,295
من البيانات الوصفية لمساعدتك على وصف هذه الوحدة.

131
00:10:18,295 --> 00:10:23,232
لذلك يحتوي كائن البيانات الوصفية هذا، كما ترون، على

132
00:10:23,232 --> 00:10:28,430
الإعلانات والواردات والمزودين وbootstrap.

133
00:10:28,430 --> 00:10:33,080
وسوف تحتوي أيضًا على صادرات إذا كانت هذه الوحدة تقوم بتصدير شيء يمكن

134
00:10:33,080 --> 00:10:35,110
استخدامه بواسطة وحدة نمطية أخرى.

135
00:10:35,110 --> 00:10:41,734
وبما أن هذا يحدث ليكون وحدة الجذر، ليس لدينا تصدير من هذه الوحدة.

136
00:10:41,734 --> 00:10:47,418
لذلك بدلا من ذلك لدينا فقط الإعلانات، والواردات، ومقدمي، و bootstrap.

137
00:10:47,418 --> 00:10:52,243
حتى هنا هذا واحد هو إلى حد ما مباشرة إلى الأمام لفهم.

138
00:10:52,243 --> 00:10:57,280
وهو يحدد أنه لبوتستراب هذا التطبيق الزاوي،

139
00:10:57,280 --> 00:11:00,713
نحن بحاجة إلى التمهيد أبكومبوننت.

140
00:11:00,713 --> 00:11:07,008
لذا فإن AppComponent هو المكون الجذري لتطبيق Angular الخاص بنا.

141
00:11:07,008 --> 00:11:13,595
بالإضافة إلى ذلك، يحدد جزء الواردات الخصائص،

142
00:11:13,595 --> 00:11:22,040
ورؤية كل هذه الوحدات تحتاج إلى استيراد لاستخدامها مع وحدة التطبيق هذه.

143
00:11:22,040 --> 00:11:25,770
لذلك تعتمد وحدة التطبيق هذه الآن على هذه الوحدات الأخرى.

144
00:11:25,770 --> 00:11:30,917
لذلك هذه هي الوحدات التي سيتم استيرادها إلى وحدة التطبيق

145
00:11:30,917 --> 00:11:36,494
كجزء من التسلسل الهرمي، وبالتالي السبب في استيرادنا هذه الوحدات هنا.

146
00:11:36,494 --> 00:11:38,451
لذلك عند استيراد الوحدات النمطية،

147
00:11:38,451 --> 00:11:43,324
فأنت تحدد هنا قائلا إن وحدة التطبيق ستستفيد من هذه الوحدة.

148
00:11:43,324 --> 00:11:48,462
وبالتالي فإن خاصية الواردات تحدد تلك الوحدات التي تحتاج إلى استيراد أو

149
00:11:48,462 --> 00:11:53,040
تلك الوحدات التي تعتمد عليها هذه الوحدة بالذات.

150
00:11:53,040 --> 00:11:58,398
الإعلانات هنا، خاصية الإعلانات،

151
00:11:58,398 --> 00:12:02,940
هي الخاصية التي تعلن فئات العرض

152
00:12:02,940 --> 00:12:06,910
التي تنتمي إلى هذه الوحدة النمطية معينة.

153
00:12:06,910 --> 00:12:10,584
وبالتالي فإن فئات العرض في حالة وحدة Angular

154
00:12:10,584 --> 00:12:15,018
ستكون في شكل أي من المكونات والتوجيهات والأنابيب.

155
00:12:15,018 --> 00:12:20,789
سنتحدث عن التوجيهات والأنابيب في وقت لاحق قليلاً في هذه الدورة،

156
00:12:20,789 --> 00:12:24,416
سنتحدث عن المكونات في الدرس التالي.

157
00:12:24,416 --> 00:12:28,590
يحدد مقدمو الخدمات جميع الخدمات التي

158
00:12:28,590 --> 00:12:31,753
ستستخدمها هذه الوحدة بالذات.

159
00:12:31,753 --> 00:12:36,592
الخدمات التي سنتحدث عنها بمزيد من التفصيل

160
00:12:36,592 --> 00:12:39,235
في وحدة الأسبوع المقبل.

161
00:12:39,235 --> 00:12:42,510
سنتحدث عن مزيد من التفاصيل حول الخدمات، وكيفية إنشائها،

162
00:12:42,510 --> 00:12:46,810
وكيف يمكننا الاستفادة منها مع تطبيق Angular الخاص بنا.

163
00:12:46,810 --> 00:12:52,091
لتلخيص ما تعلمناه حتى الآن، ندرك أن الوحدة النمطية

164
00:12:52,091 --> 00:12:57,373
في تطبيق Angular يمكن أن تتكون من مجموعة من المكونات

165
00:12:57,373 --> 00:13:02,671
والخدمات التي ستكون مطلوبة من هذه الوحدة عن طريق استيرادها.

166
00:13:02,671 --> 00:13:09,461
وسيتم الإعلان عن هذه باستخدام خاصية الإعلانات الخاصة

167
00:13:09,461 --> 00:13:15,220
بديكور Ngmodule في وحدة التطبيق الخاصة بنا.

168
00:13:15,220 --> 00:13:19,845
الآن، هذه المكونات نفسها يمكن أن تعتمد على

169
00:13:19,845 --> 00:13:24,178
مكونات أخرى، أو خدمات، أو توجيهات

170
00:13:24,178 --> 00:13:29,115
، أو أنابيب، كما سنرى في بقية هذه الدورة بالذات.

171
00:13:29,115 --> 00:13:37,212
لذلك مع هذا لدينا فكرة تقريبية عن كيفية تنظيم تطبيق Angular نموذجي.

172
00:13:37,212 --> 00:13:42,247
بالعودة إلى شفرتنا، حان الوقت الآن للاستخدام لفحص

173
00:13:42,247 --> 00:13:48,691
هذا الملف app.component.ts، وملف app.component.html.

174
00:13:48,691 --> 00:13:53,502
الذي يعلن القالب لمكون لدينا،

175
00:13:53,502 --> 00:13:57,022
وملف app.component.ts،

176
00:13:57,022 --> 00:14:02,547
الذي يحدد جزء TypeScript من المكون لدينا.

177
00:14:02,547 --> 00:14:08,157
الآن، سنفعل ذلك في الدرس التالي، حيث سنتعامل مع المكونات

178
00:14:08,157 --> 00:14:13,436
وكيف يمكننا إنشاء مكونات جديدة وإضافتها إلى تطبيقنا الزاوي.

179
00:14:13,436 --> 00:14:16,815
[ موسيقى]