1
00:00:03,950 --> 00:00:06,915
في التمرين السابق،

2
00:00:06,915 --> 00:00:12,510
قمنا بسقالات أول تطبيق أساسي للزاوية.

3
00:00:12,510 --> 00:00:16,430
كما ذكرت، ونحن في طريقنا للعمل على هذا التطبيق الزاوي

4
00:00:16,430 --> 00:00:20,350
وتطويره أكثر طوال بقية هذه الدورة.

5
00:00:20,350 --> 00:00:24,230
الآن، قبل أن نبدأ العمل على تطبيق Angular الخاص بنا،

6
00:00:24,230 --> 00:00:29,509
دعونا تكوين تطبيق Angular الخاص بنا لاستخدام بعض الوحدات الإضافية،

7
00:00:29,509 --> 00:00:34,035
والتي تمكننا من تصميم القوالب لتطبيق Angular الخاص بنا.

8
00:00:34,035 --> 00:00:40,810
سوف نستفيد من وحدة المواد الزاوي لتصميم تخطيطات واجهة المستخدم.

9
00:00:40,810 --> 00:00:47,420
توفر لنا وحدة المواد الزاوي عددًا من مكونات التخطيط المثيرة للاهتمام

10
00:00:47,420 --> 00:00:54,500
التي يمكننا الاستفادة منها في تصميم قوالب المكونات الزاوي الخاصة بنا.

11
00:00:54,500 --> 00:01:01,915
بالإضافة إلى ذلك، سنستفيد من التخطيط المرن الذي يقوم على تخطيط CSS المرن،

12
00:01:01,915 --> 00:01:08,015
والذي يمكننا من القيام بالتصميم المتجاوب داخل تطبيقنا Angular.

13
00:01:08,015 --> 00:01:09,520
لذلك، في هذا التمرين،

14
00:01:09,520 --> 00:01:11,330
سنقوم بعمل هذه التكوينات.

15
00:01:11,330 --> 00:01:17,460
على طول الطريق، سوف نتعلم أول معرفة موجزة لدينا من المكونات،

16
00:01:17,460 --> 00:01:23,980
حتى قبل أن ننتقل إلى فحص المكونات بمزيد من التفصيل في الدرس التالي.

17
00:01:23,980 --> 00:01:31,810
للبدء، دعونا نبدأ رحلتنا مع زيارة سريعة إلى ملف app.component.ts.

18
00:01:31,810 --> 00:01:33,769
هذا هو الملف الذي يدعم

19
00:01:33,769 --> 00:01:38,390
مكون الجذر الذي يشكل جزءًا من تطبيق Angular الخاص بنا.

20
00:01:38,390 --> 00:01:40,765
الآن، مع إلقاء نظرة على هذا المكون الجذري،

21
00:01:40,765 --> 00:01:45,090
هناك عدد قليل من الأشياء التي سوف تصبح واضحة جدا بالنسبة لك حتى من دون الكثير من التفسير.

22
00:01:45,090 --> 00:01:49,715
أول شيء أود أن ألفت انتباهكم إليه هو بيان الاستيراد هذا.

23
00:01:49,715 --> 00:01:56,300
كما ترون، هذا هو استيراد فئة المكون من مكتبة Angular الأساسية.

24
00:01:56,300 --> 00:02:01,185
ثم بعد ذلك، نحن نستعد لدينا فئة AppComponent هنا،

25
00:02:01,185 --> 00:02:03,280
وتصدير هذه الفئة.

26
00:02:03,280 --> 00:02:07,160
لذا، ضمن فئة AppComponent هذه التي

27
00:02:07,160 --> 00:02:12,080
أعلناها، لدينا متغير أعلناه هنا يسمى العنوان،

28
00:02:12,080 --> 00:02:15,330
والذي تم تعيينه حاليًا ليكون سلسلة.

29
00:02:15,330 --> 00:02:17,910
الآن، مع إلقاء نظرة سريعة على هذا المتغير،

30
00:02:17,910 --> 00:02:20,360
تبدأ على الفور في التساؤل،

31
00:02:20,360 --> 00:02:24,740
كيف يرتبط هذا بما رأيناه في المتصفح،

32
00:02:24,740 --> 00:02:29,585
عندما رأيت تطبيق Angular الخاص بنا يظهر في المتصفح،

33
00:02:29,585 --> 00:02:33,740
كان تطبيق Angular يعرض بالضبط هذه الكلمات في المتصفح.

34
00:02:33,740 --> 00:02:38,630
في الواقع، يلعب هذا المتغير دورًا مهمًا في

35
00:02:38,630 --> 00:02:44,250
الخروج بالعرض الذي رأيته في متصفحنا.

36
00:02:44,250 --> 00:02:46,730
الآن، بالإضافة إلى ذلك، ترى أيضًا أن

37
00:02:46,730 --> 00:02:53,790
فئة المكون هذه ملحقة بديكور هنا.

38
00:02:53,790 --> 00:02:58,395
مرة أخرى، هذا هو ديكور آخر ستواجهه في Angular.

39
00:02:58,395 --> 00:03:01,590
لذلك، هذا كما نرى هو ديكور مكون.

40
00:03:01,590 --> 00:03:08,240
يأخذ ديكور المكون داخليًا كائن JavaScript كمعلمة هنا،

41
00:03:08,240 --> 00:03:14,700
والخاصية الأولى التي تراها هنا تسمى selector: جذر التطبيق.

42
00:03:14,700 --> 00:03:19,100
الآن، إذا كنت تتذكر عندما نظرنا إلى ملف index.HTML،

43
00:03:19,100 --> 00:03:23,275
رأينا أننا قمنا بتضمين عنصر هناك يسمى الجذر التطبيق.

44
00:03:23,275 --> 00:03:26,865
الآن، عليك أن تبدأ في رؤية من أين ينشأ هذا التطبيق الجذر.

45
00:03:26,865 --> 00:03:31,250
لذلك، هذا هو محدد للمكون الذي نعلنه هنا،

46
00:03:31,250 --> 00:03:36,020
وهو ما يتم استخدامه داخل فئة القالب لدينا لتحديد مكان

47
00:03:36,020 --> 00:03:41,960
عرض المقابلة لهذا المكون في المتصفح.

48
00:03:41,960 --> 00:03:47,845
الخاصية الثانية التي تقوم بتعريفها هنا هي TemplateUrl.

49
00:03:47,845 --> 00:03:50,890
يشير هذا إلى ملف،

50
00:03:50,890 --> 00:03:53,030
ملف HTML كما ترون،

51
00:03:53,030 --> 00:03:57,945
والذي يحتوي على القالب المقابل لهذا المكون معين.

52
00:03:57,945 --> 00:04:02,335
القالب الذي يحدد طريقة العرض لهذا المكون.

53
00:04:02,335 --> 00:04:07,565
الخاصية الثالثة التي تحددها هنا كما ترون، تقول، StyleUrls،

54
00:04:07,565 --> 00:04:14,450
والتي كما تلاحظ هنا يتم تعيينها إلى ملف app.component.scss.

55
00:04:14,450 --> 00:04:19,130
لذلك، يجب أن يحتوي هذا الملف على جميع التعليمات البرمجية scss التي يمكن

56
00:04:19,130 --> 00:04:24,310
استخدامها لتصميم CSS لقالب المكونات لدينا.

57
00:04:24,310 --> 00:04:29,260
لذلك، هذه زيارة سريعة إلى ملف app.component.ts.

58
00:04:29,260 --> 00:04:33,365
الآن، دعونا نذهب إلى ملف App.Component.html،

59
00:04:33,365 --> 00:04:36,905
ونلقي نظرة سريعة على القالب.

60
00:04:36,905 --> 00:04:40,480
انتقل إلى ملف App.Component.html،

61
00:04:40,480 --> 00:04:43,635
ترى أن هذا الملف app.component،

62
00:04:43,635 --> 00:04:51,384
رمز HTML هنا يحتوي على علامة h1 مع شيء هنا مع الأقواس المزدوجة.

63
00:04:51,384 --> 00:04:58,310
الآن، من الواضح أن هذا ليس شيئًا اعتدت عليه من معرفتك بـ HTML،

64
00:04:58,310 --> 00:05:01,755
أو CSS أو JavaScript التي رأيتها من قبل.

65
00:05:01,755 --> 00:05:04,325
هذا هو بناء الجملة الزاوي.

66
00:05:04,325 --> 00:05:07,055
هذا ما نسميه الاستيفاء.

67
00:05:07,055 --> 00:05:12,350
هذا يستخدم ربط البيانات أحادي الاتجاه في Angular.

68
00:05:12,350 --> 00:05:16,775
أنا أرمي بعض الشروط عليك في هذه اللحظة

69
00:05:16,775 --> 00:05:20,690
تمسك بهذه الشروط سنعود للنظر في هذه المصطلحات

70
00:05:20,690 --> 00:05:25,185
بمزيد من التفصيل في الدروس المتبقية من هذه الدورة.

71
00:05:25,185 --> 00:05:28,140
أول شيء كما ذكرت هو الاستيفاء،

72
00:05:28,140 --> 00:05:33,290
والثاني الذي ذكرته هو ربط البيانات في اتجاه واحد.

73
00:05:33,680 --> 00:05:42,200
أيضا، ترى على الفور أن هذا هو المتغير الذي رأيته في الرفيق،

74
00:05:42,200 --> 00:05:48,560
ملف TypeScript، الذي يحدد رمز TypeScript المقابلة لمكون التطبيق.

75
00:05:48,560 --> 00:05:51,640
لذا، بمجرد تحديد شيء من هذا القبيل هنا،

76
00:05:51,640 --> 00:05:58,970
فإن الإيحاء هو أنه مهما كانت قيمة هذا العنوان سيتم استبدالها

77
00:05:58,970 --> 00:06:08,170
هنا وسيتم استخدامها كرمز HTML الداخلي لهذه العلامة h1 هنا.

78
00:06:08,170 --> 00:06:11,600
هذا هو الغرض من تضمين هذا هنا.

79
00:06:11,600 --> 00:06:15,140
سنمضي الآن في تثبيت بعض

80
00:06:15,140 --> 00:06:22,410
وحدات العلاقة Angular الأخرى التي ستمكننا من تصميم القوالب.

81
00:06:22,410 --> 00:06:25,985
ثم سنعود إلى هذا الملف App.Component.html.

82
00:06:25,985 --> 00:06:31,375
ثم إعادة تصميم هذا القالب قليلا في وقت لاحق في هذا التمرين.

83
00:06:31,375 --> 00:06:38,330
من أجل مساعدتنا في تصميم وجهات النظر استجابة داخل التطبيق الزاوي لدينا،

84
00:06:38,330 --> 00:06:40,340
ونحن في طريقنا للحصول على مساعدة من اثنين من

85
00:06:40,340 --> 00:06:45,360
وحدات ذات الصلة لالزاوي تسمى وحدة المواد الزاوي.

86
00:06:45,360 --> 00:06:49,705
توفر لنا وحدة المواد الزاوي عددًا من المكونات.

87
00:06:49,705 --> 00:06:53,795
مكونات التخطيط التي يمكننا استخدامها في تصميم

88
00:06:53,795 --> 00:06:59,595
القوالب الجديدة لمكونات Angular الخاصة بنا.

89
00:06:59,595 --> 00:07:06,290
وحدة المواد الزاوي إذا كنت ترغب في مقارنة هذا هو إلى حد ما مثل ما

90
00:07:06,290 --> 00:07:14,055
قدمه لنا Bootstrap لتصميم صفحات الويب الخاصة بنا التي فحصناها في الدورة السابقة.

91
00:07:14,055 --> 00:07:19,850
أيضا، سأستخدم وحدة أخرى تسمى وحدة تخطيط المرن الزاوي.

92
00:07:19,850 --> 00:07:26,195
توفر وحدة التخطيط المرن دعمًا لاستخدام تخطيط CSS

93
00:07:26,195 --> 00:07:33,440
المرن داخل قوالب Angular الخاصة بنا لمكونات Angular الخاصة بنا.

94
00:07:33,440 --> 00:07:36,620
الآن، يجب

95
00:07:36,620 --> 00:07:40,195
تثبيت هاتين الوحدتين بشكل صريح ثم استيرادهما في تطبيق Angular الخاص بنا،

96
00:07:40,195 --> 00:07:43,530
وهذا ما سنقوم به في الخطوة التالية.

97
00:07:43,530 --> 00:07:45,645
ولكن قبل

98
00:07:45,645 --> 00:07:48,910
أن نمضي قدما، سؤال واحد قد تتساءل عنه هو،

99
00:07:48,910 --> 00:07:58,350
لماذا لا تستخدم Bootstrap للقيام بتصميم القوالب لتطبيق Angular الخاص بنا؟

100
00:07:58,350 --> 00:08:05,220
في الواقع، يمكنك أيضًا استخدام Bootstrap لتصميم القوالب لتطبيق Angular الخاص بنا.

101
00:08:05,220 --> 00:08:07,310
ولكن يمكنك فقط استخدام

102
00:08:07,310 --> 00:08:12,850
جزء مكونات CSS من Bootstrap داخل تطبيق Angular الخاص بك.

103
00:08:12,850 --> 00:08:16,800
المكونات المستندة إلى jQuery.

104
00:08:16,800 --> 00:08:21,709
لا يمكن استخدام مكونات JavaScript بشكل صريح، قد يكون هناك بعض التعارضات

105
00:08:21,709 --> 00:08:27,870
بين المكونات المستندة إلى jQuery من Bootstrap والرمز الزاوي نفسه.

106
00:08:27,870 --> 00:08:33,800
لذا، من الأفضل تجنب استخدام مكونات JavaScript من Bootstrap

107
00:08:33,800 --> 00:08:40,925
في حال اخترت استخدام Bootstrap كطريقة لتصميم قوالب Angular الخاصة بك.

108
00:08:40,925 --> 00:08:42,980
ولكن من ناحية أخرى،

109
00:08:42,980 --> 00:08:47,000
اعتقدت أيضا أن هذا من شأنه

110
00:08:47,000 --> 00:08:54,350
أن يوفر لنا فرصة جيدة للتعلم الحصول على إطار تخطيط واجهة المستخدم آخر هو الإطار المادي الزاوي.

111
00:08:54,350 --> 00:08:58,640
لذلك، هذا هو السبب في أنني اخترت استخدام إطار المواد الزاوي

112
00:08:58,640 --> 00:09:03,745
والتخطيط المرن الزاوي في هذه الدورة بالذات.

113
00:09:03,745 --> 00:09:07,540
الآن، ونحن نذهب من خلال بقية هذه الدورة،

114
00:09:07,540 --> 00:09:10,450
وأنا لن أشرح صراحة كيفية استخدام

115
00:09:10,450 --> 00:09:14,980
مكونات المواد الزاوي أو كيفية استخدام الزاوي فليكس-لايوت.

116
00:09:14,980 --> 00:09:20,615
بدلا من ذلك، سوف نتعلمها من خلال النظر في الأمثلة.

117
00:09:20,615 --> 00:09:22,620
وسوف نستفيد من هذين،

118
00:09:22,620 --> 00:09:29,135
كل من المكونات الزاوي أفضل المواد والدعم الزاوي فليكس-لايوت،

119
00:09:29,135 --> 00:09:36,715
عندما نقوم بتصميم القوالب لدينا لمكونات الزاوي لدينا في هذه الدورة بالذات.

120
00:09:36,715 --> 00:09:41,495
لذلك، من خلال عملية الاستفادة من هذه المكونات،

121
00:09:41,495 --> 00:09:44,025
سوف

122
00:09:44,025 --> 00:09:47,650
تتعلم أيضا على طول الطريق، كيفية الاستفادة من كل من المواد الزاوي و الزاوي

123
00:09:47,650 --> 00:09:51,495
فليكس-لايوت داخل التطبيق الزاوي الخاص بك.

124
00:09:51,495 --> 00:09:54,685
اعتقدت أنه من خلال القيام التدريبات،

125
00:09:54,685 --> 00:09:57,060
سوف تتعلم الكثير عن المواد الزاوي.

126
00:09:57,060 --> 00:10:01,505
الآن، لشرح الجوانب المفاهيمية لماذا

127
00:10:01,505 --> 00:10:07,440
تعمل مكونات المادة الزاوي بالطريقة التي تعمل بها أو كيف تعمل الشبكة على سبيل المثال،

128
00:10:07,440 --> 00:10:09,915
أو كيف يعمل التصميم المتجاوب،

129
00:10:09,915 --> 00:10:14,150
قمنا بالفعل بفحص بعض تلك الموجودة في الدورة السابقة على Bootstrap.

130
00:10:14,150 --> 00:10:17,935
لذلك، فإن نفس المفاهيم تأتي أيضا لمساعدتنا.

131
00:10:17,935 --> 00:10:23,260
بدلا من ذلك، سوف ننظر في آليات استخدام كل من المواد الزاوي و

132
00:10:23,260 --> 00:10:30,385
الزاوي فليكس-لايوت داخل التطبيق الزاوي لدينا في هذه الدورة بالذات.

133
00:10:30,385 --> 00:10:33,005
للبدء في استخدام مادة الزاوي،

134
00:10:33,005 --> 00:10:37,655
بالطبع أول شيء عليك القيام به هو تثبيت وحدة المواد الزاوي.

135
00:10:37,655 --> 00:10:46,230
لذلك، في موجه نوع npm تثبيت - حفظ @angular /material.

136
00:10:48,950 --> 00:10:51,240
لذلك، كما ترون،

137
00:10:51,240 --> 00:10:55,390
نحدد جميع وحدات ربط Angular مع @angular،

138
00:10:55,390 --> 00:10:58,650
لذلك سترى أيضًا نفس الشيء لـ Flex-Layout.

139
00:10:58,650 --> 00:11:03,980
نحن نقوم بتثبيت الإصدار 6.4.7 من وحدة المواد الزاوي.

140
00:11:03,980 --> 00:11:09,440
بالإضافة إلى ذلك، تتطلب وحدة المواد تركيب CDK.

141
00:11:09,440 --> 00:11:12,730
لذلك، سنقوم أيضًا بتثبيت ذلك عن طريق إجراء

142
00:11:12,730 --> 00:11:21,100
npm install @angular /cdk @6 .4.7 - حفظ،

143
00:11:21,100 --> 00:11:25,035
وتثبيته مع مادة الزاوي.

144
00:11:25,035 --> 00:11:31,495
لذا، فإن المادة الزاوي تستفيد من cdk الزاوي لمكوناته.

145
00:11:31,495 --> 00:11:35,595
بالإضافة إلى ذلك، عندما تستخدم مادة الزاوي،

146
00:11:35,595 --> 00:11:43,035
تحتاج أيضًا إلى استيراد وحدة الرسوم المتحركة الزاوي إلى تطبيق Angular الخاص بك.

147
00:11:43,035 --> 00:11:46,445
بدءًا من الإصدار الزاوي الرابع،

148
00:11:46,445 --> 00:11:49,740
تم استخراج دعم الرسوم المتحركة الزاوي

149
00:11:49,740 --> 00:11:53,695
من الوحدات الأساسية إلى وحدة منفصلة خاصة به.

150
00:11:53,695 --> 00:11:56,130
لذا، مما يعني أنه إذا كنت بحاجة إلى

151
00:11:56,130 --> 00:11:58,900
استخدام الرسوم المتحركة داخل تطبيق Angular الخاص بك،

152
00:11:58,900 --> 00:12:04,370
فستحتاج إلى تثبيت وحدة الرسوم المتحركة Angular بشكل صريح.

153
00:12:04,370 --> 00:12:07,275
لذلك، دعونا المضي قدما وتثبيت ذلك أيضا.

154
00:12:07,275 --> 00:12:08,325
لذا، ستقول

155
00:12:08,325 --> 00:12:18,940
تثبيت npm - حفظ @angular /الرسوم المتحركة @6 .1.7.

156
00:12:20,040 --> 00:12:23,290
أيضا، وحدة أخرى أنني سوف تثبيت

157
00:12:23,290 --> 00:12:33,130
معا يسمى هامرجس.

158
00:12:33,130 --> 00:12:36,940
يتم استخدام وحدة HammerJS بواسطة Angular

159
00:12:36,940 --> 00:12:40,700
لدعم بعض الإيماءات داخل تطبيق Angular الخاص بك.

160
00:12:40,700 --> 00:12:45,750
لذا، هذا هو السبب في تثبيت HammerJS أيضًا داخل تطبيقنا،

161
00:12:45,750 --> 00:12:51,830
والإصدار الحالي من HammerJS الذي نستخدمه هو 2.0.8.

162
00:12:51,830 --> 00:12:56,050
الآن، قمنا الآن بتثبيت كل ما نحتاجه

163
00:12:56,050 --> 00:13:01,185
لوحدة المواد الزاوي لاستخدامها في تطبيق Angular الخاص بنا.

164
00:13:01,185 --> 00:13:04,605
بعد ذلك، سأنتقل إلى تثبيت

165
00:13:04,605 --> 00:13:09,415
Angular Flex-Layout داخل تطبيق Angular الخاص بي.

166
00:13:09,415 --> 00:13:11,460
لذلك، للقيام بذلك، أقوم بوسادة

167
00:13:11,460 --> 00:13:19,000
تثبيت npm الفوري - save @angular /flex-layout

168
00:13:19,000 --> 00:13:22,970
وسنقوم بتثبيت أحدث إصدار من ذلك.

169
00:13:24,760 --> 00:13:31,720
لذلك، الآن بعد أن لدينا جميع القطع التي نحتاجها لتطبيق Angular الخاص بنا مثبتة،

170
00:13:31,720 --> 00:13:36,290
دعنا نمضي قدما ثم نقوم بتكوين تطبيق Angular الخاص بنا

171
00:13:36,290 --> 00:13:41,025
للاستفادة من هذه الوحدات الجديدة التي قمنا بتثبيتها في تطبيق Angular الخاص بنا.

172
00:13:41,025 --> 00:13:46,205
أول شيء سنقوم به هو الذهاب إلى ملف index.HTML،

173
00:13:46,205 --> 00:13:51,975
وبعد ذلك سنقوم بتكوين ملف index.HTML لاستخدام رموز المواد الزاوي.

174
00:13:51,975 --> 00:13:55,800
لذلك، لتضمين رموز المواد الزاوي بحيث يمكن

175
00:13:55,800 --> 00:13:59,580
استخدامها داخل قوالب التطبيق الزاوي الخاص بك، لذلك،

176
00:13:59,580 --> 00:14:04,020
اسمحوا لي أن أذهب هناك الحق في رأس index.HTML،

177
00:14:04,020 --> 00:14:11,905
ومن ثم إنشاء رابط جديد مع

178
00:14:11,905 --> 00:14:47,075
href =» https://fonts.googleapis.com/icon?family=Material+Icons "وهذا هو النمط ورقة.

179
00:14:47,075 --> 00:14:52,110
لذلك، مع هذا، يمكنني الآن الاستفادة من رموز المواد الزاوي داخل

180
00:14:52,110 --> 00:14:58,865
التطبيق الزاوي الخاص بي أينما اخترت القيام بذلك داخل القوالب.

181
00:14:58,865 --> 00:15:04,530
الخطوة التالية هي الانتقال إلى module.ts التطبيق.ts

182
00:15:04,530 --> 00:15:09,825
ثم استيراد الوحدات الثلاث التي قمنا بتثبيتها للتو.

183
00:15:09,825 --> 00:15:14,345
لذلك، يتم استدعاء أول واحد أنني ذاهب استيراد كما

184
00:15:14,345 --> 00:15:29,460
BrowserAnimationsModule التي سأقوم باستيرادها من

185
00:15:38,170 --> 00:15:47,230
@angular /platform-المتصفح/الرسوم المتحركة. لذا، الآن التالي

186
00:15:47,230 --> 00:15:54,115
الذي سأقوم باستيراده هو MaterialToolBarModule.

187
00:15:54,115 --> 00:16:00,370
لذلك، يستورد هذا وحدة @angular /material/شريط الأدوات

188
00:16:00,370 --> 00:16:06,100
التي يمكن استخدامها داخل قوالب تطبيقات Angular الخاصة بنا.

189
00:16:06,100 --> 00:16:14,305
لذلك، الزاوي المواد، وأيضا استيراد

190
00:16:14,305 --> 00:16:26,720
فليكسلايوتمودول من @angular /فليكس-تخطيط.

191
00:16:27,470 --> 00:16:34,050
لذلك، بمجرد أن يكون لدينا كل هذه الوحدات المستوردة ثم تغيير إضافي واحد أحتاج إلى

192
00:16:34,050 --> 00:16:40,035
القيام به هو - أوه اسمحوا لي أيضا استيراد Hammer.JS بينما أنا هناك حق.

193
00:16:40,035 --> 00:16:43,100
لذلك، اسمحوا لي استيراد

194
00:16:45,260 --> 00:16:51,585
Hammer.JS في طلبي.

195
00:16:51,585 --> 00:16:53,830
وبمجرد أن أكون في ذلك،

196
00:16:53,830 --> 00:16:58,400
فإن التغيير الآخر الذي أحتاج إلى القيام به هو تضمين

197
00:16:58,400 --> 00:17:04,165
تلك الوحدات أيضًا في مدخلات مصمم وحدة NG هنا.

198
00:17:04,165 --> 00:17:06,845
لذا، سأذهب إلى هناك وأقول وحدة

199
00:17:06,845 --> 00:17:13,440
المتصفح، وحدة الرسوم المتحركة للمتصفح هناك وبعد ذلك بعد وحدة HTTP،

200
00:17:13,440 --> 00:17:21,009
سأقوم باستيراد وحدة شريط الأدوات المادية وكذلك

201
00:17:21,009 --> 00:17:29,350
وحدة تخطيط المرن كجزء من المدخلات داخل وحدة الديكور NG لوحدة التطبيق الخاصة بي.

202
00:17:29,350 --> 00:17:36,215
لذلك، مع هذا كل ما عندي من تكوينات لاستخدام وحدة شريط الأدوات المادية ووحدة

203
00:17:36,215 --> 00:17:38,975
تخطيط المرن الزاوي وجنبا إلى جنب مع

204
00:17:38,975 --> 00:17:44,680
وحدة الرسوم المتحركة في الزاوي اكتمال.

205
00:17:44,680 --> 00:17:50,270
الآن دعونا خطوة إلى قالب المكونات والاستفادة من

206
00:17:50,270 --> 00:17:54,570
أول مكون المواد الزاوي لدينا في تصميم تخطيط

207
00:17:54,570 --> 00:18:00,110
لمكون التطبيق التطبيقات لدينا.

208
00:18:00,750 --> 00:18:06,020
الذهاب إلى ملف قالب مكونات التطبيق،

209
00:18:06,020 --> 00:18:09,460
وأنا ذاهب لاستبدال هذا الآن مع

210
00:18:09,460 --> 00:18:17,895
عنصر مادة الزاوي

211
00:18:17,895 --> 00:18:21,480
يسمى شريط الأدوات حصيرة.

212
00:18:21,480 --> 00:18:24,645
لذا، يتيح لي شريط أدوات الحصيرة تصميم

213
00:18:24,645 --> 00:18:29,410
شريط أدوات يمكنني استخدامها في تطبيقي الزاوي.

214
00:18:29,410 --> 00:18:35,805
يتم عرض شريط الأدوات عادة في أعلى صفحتك داخل التطبيق الخاص بك.

215
00:18:35,805 --> 00:18:41,395
لذلك، بالنسبة لشريط الأدوات هذا، سأحدد اللون كأساسي.

216
00:18:41,395 --> 00:18:44,145
سنرى ما يعنيه هذا في فترة قصيرة.

217
00:18:44,145 --> 00:18:50,245
وأيضا سنقوم بإغلاق هذا شريط أدوات MD هنا.

218
00:18:50,245 --> 00:18:56,230
الآن داخل هذا أنا ذاهب لاستخدام فترة مع

219
00:18:56,230 --> 00:19:05,790
اسم مطعمي الذي أنا تصميم هذا الموقع.

220
00:19:05,790 --> 00:19:08,150
إذاً، (ريستورانتي كون فيوجن)

221
00:19:08,150 --> 00:19:12,650
الآن ترى لماذا سميت هذا المجلد بالارتباك.

222
00:19:12,650 --> 00:19:19,765
لذا، ما هو التحديث الذي نحتاج إلى القيام به لملف HTML المكون التطبيق.

223
00:19:19,765 --> 00:19:29,315
بينما نحن في ذلك، سنقوم أيضًا بتضمين بعض تحديثات SCSS إلى ملف Styles.scss الخاص بي.

224
00:19:29,315 --> 00:19:32,470
لذلك، إذا ذهبت إلى التعليمات البرمجية الخاصة بك هنا،

225
00:19:32,470 --> 00:19:37,000
وسوف تجد هذا الملف الأنماط. scss هنا.

226
00:19:37,000 --> 00:19:40,450
لذلك، هذا هو المكان الذي يمكنك تضمين جميع الأنماط العالمية في

227
00:19:40,450 --> 00:19:44,810
هذا الملف وهذا سوف يكون متاحا لجميع المكونات للاستفادة من.

228
00:19:44,810 --> 00:19:51,970
يحتوي كل مكون على ملفات SCSS الخاصة به حيث يمكنك تضمين

229
00:19:51,970 --> 00:19:54,620
تخصيص مستوى المكون أو

230
00:19:54,620 --> 00:20:00,280
رمز SCSS مستوى المكون لاستخدامها ضمن هذا المكون المحدد.

231
00:20:00,280 --> 00:20:03,090
سوف نستخدم كلا النهجين ضمن

232
00:20:03,090 --> 00:20:07,980
هذا التطبيق الزاوي الذي نقوم بتطويره في هذه الدورة.

233
00:20:07,980 --> 00:20:13,530
ولكن الآن أنا ذاهب لتحديث

234
00:20:13,530 --> 00:20:20,270
ملف الأنماط الرئيسية. scss مع بعض التعليمات البرمجية التي سوف تكون مفيدة لتطبيق الزاوي كله.

235
00:20:20,270 --> 00:20:22,185
أول شيء سأقوم به،

236
00:20:22,185 --> 00:20:28,160
هو استيراد موضوع مبني مسبقًا متاح من خلال المواد الزاوي.

237
00:20:28,160 --> 00:20:33,380
هذا الموضوع بنيت مسبقا في المواد الزاوي يوفر لنا وسيلة لتحديد

238
00:20:33,380 --> 00:20:36,000
بعض الألوان والطريقة التي

239
00:20:36,000 --> 00:20:39,265
وضعت بعض الأشياء داخل بلدي مكونات المواد الزاوي.

240
00:20:39,265 --> 00:20:44,800
الألوان التي سوف تكون متاحة من خلال الإطار مسبقا اللون الأساسي لدينا،

241
00:20:44,800 --> 00:20:49,050
لون لهجة، ولون التحذير.

242
00:20:49,050 --> 00:20:53,000
الآن يسمى الموضوع المحدد الذي سأستخدمه بنفسجي عميق.

243
00:20:53,000 --> 00:20:56,870
لذلك، في هذه الحالة سيكون اللون الأساسي بيربل عميق.

244
00:20:56,870 --> 00:21:01,860
سيكون لون اللكنة العنبر وسيكون لون التحذير أحمر في هذه الحالة.

245
00:21:01,860 --> 00:21:07,880
الآن يمكنك بناء المواضيع المواد الزاوي الخاصة

246
00:21:07,880 --> 00:21:10,970
بك التي يمكنك استخدامها داخل التطبيق الخاص بك ولكن

247
00:21:10,970 --> 00:21:14,385
سأترك ذلك كممارسة لك لاستكشاف بنفسك.

248
00:21:14,385 --> 00:21:17,930
الآن داخل تطبيقي الزاوي، سأستخدم أحد

249
00:21:17,930 --> 00:21:21,510
الأشياء التي تم بناؤها مسبقًا تسمى العنبر الأرجواني العميق.

250
00:21:21,510 --> 00:21:25,575
لذلك، للقيام بذلك الذهاب إلى ملف Styles.scss،

251
00:21:25,575 --> 00:21:28,870
وسوف استيراد

252
00:21:32,190 --> 00:21:38,080
المواد الزاوي

253
00:21:38,080 --> 00:21:48,640
المواضيع مسبقا عميقة الأرجواني amber.CSS.

254
00:21:48,640 --> 00:21:54,015
لذلك، هذا الموضوع واحد بنيت مسبقا سوف الاستفادة من داخل بلدي التطبيق الزاوي.

255
00:21:54,015 --> 00:21:58,335
سترى قريبًا كيف يعمل هذا الموضوع مسبقًا في

256
00:21:58,335 --> 00:22:03,060
التطبيق الزاوي في القوالب التي قمنا بتصميمها لتطبيقنا الزاوي.

257
00:22:03,060 --> 00:22:08,360
بالإضافة إلى ذلك، سأقوم بتكوين بعض الخصائص

258
00:22:08,360 --> 00:22:16,530
لجسم صفحة index.HTML حتى أقوم بتحديد الحشو كصفر،

259
00:22:16,530 --> 00:22:23,230
الهامش كصفر، ثم عائلة الخط التي

260
00:22:23,230 --> 00:22:30,360
سأستخدمها هي rubato أو sans serif داخل طلبي.

261
00:22:30,360 --> 00:22:34,320
يمكنك اختيار استخدام ما تريد داخل تطبيقاتك الزاويّة.

262
00:22:34,320 --> 00:22:38,095
اخترت استخدام هذين داخل تطبيقي الزاوي.

263
00:22:38,095 --> 00:22:40,130
دعونا حفظ التغييرات،

264
00:22:40,130 --> 00:22:46,495
ودعونا نذهب ونلقي نظرة سريعة على التطبيق الزاوي لدينا في المتصفح.

265
00:22:46,495 --> 00:22:48,040
قبل القيام بذلك،

266
00:22:48,040 --> 00:22:53,080
تأكد من تشغيل خدمة NG في

267
00:22:53,080 --> 00:22:58,940
أحد النوافذ الطرفية في جهاز الكمبيوتر الخاص بك.

268
00:22:58,940 --> 00:23:04,870
يجب أن يكون خادم التطوير قيد التشغيل بشكل مستمر بحيث يقوم

269
00:23:04,870 --> 00:23:07,040
تلقائيًا بإزالة البيانات ثم تحميل

270
00:23:07,040 --> 00:23:11,975
الإصدار المحدث من التطبيق الزاوي في نافذة المتصفح.

271
00:23:11,975 --> 00:23:14,290
الذهاب إلى المتصفح،

272
00:23:14,290 --> 00:23:17,925
ترى الآن التغييرات التي أجريناها على

273
00:23:17,925 --> 00:23:24,090
التطبيق الزاوي تنعكس في طريقة العرض في

274
00:23:24,090 --> 00:23:30,085
المتصفح الخاص بي حتى تتمكن من رؤية أن لدينا الآن شريط أدوات في الجزء العلوي مع

275
00:23:30,085 --> 00:23:37,095
الصيغ التي قمنا بتضمينها في ملف قالب مكونات التطبيق هناك.

276
00:23:37,095 --> 00:23:41,290
ويمكنك رؤية اللون الذي تم تطبيقه على شريط الأدوات.

277
00:23:41,290 --> 00:23:42,580
وبالتالي فإن اللون، اللون الأساسي،

278
00:23:42,580 --> 00:23:46,180
لذلك هذا هو اللون الأرجواني العميق الذي يتم تطبيقه على شريط الأدوات.

279
00:23:46,180 --> 00:23:52,000
الآن السمة التي قمنا بتعريفها سوف تضيف إما اللون الأرجواني العميق أو العنبر،

280
00:23:52,000 --> 00:23:56,590
اعتمادا على ما يتم استخدامه من قبل مكونات المواد الزاوي المحددة

281
00:23:56,590 --> 00:24:01,750
التي نستخدمها في قوالب التطبيقات الزاوي لدينا.

282
00:24:01,750 --> 00:24:05,285
مع هذا نكمل هذا التمرين.

283
00:24:05,285 --> 00:24:09,470
في هذا التمرين، قمنا بتكوين تطبيقنا الزاوي

284
00:24:09,470 --> 00:24:16,410
للاستفادة من المواد الزاوي والتخطيط المرن الزاوي.

285
00:24:16,410 --> 00:24:22,150
استخدمنا أيضًا أول مكون مادة الزاوي في ملف قالب مكونات التطبيق.

286
00:24:22,150 --> 00:24:29,605
واستخدمنا موضوع المدمج في من المواد الزاوي لتطبيقنا الزاوي.

287
00:24:29,605 --> 00:24:34,530
حفظ جميع التغييرات ومن ثم هذا هو الوقت المناسب بالنسبة لك

288
00:24:34,530 --> 00:24:39,880
للقيام جيت الالتزام مع الرسالة تكوين الزاوي.