1
00:00:03,920 --> 00:00:10,619
قبل أن نمضي قدما مع بقية التدريبات والمهام في هذه الدورة،

2
00:00:10,619 --> 00:00:13,245
اعتقدت أن هذا سيكون الوقت المناسب بالنسبة لي

3
00:00:13,245 --> 00:00:16,450
لإعطاء طلبي الزاوي بنية لطيفة.

4
00:00:16,450 --> 00:00:19,660
لذا، هذا هو المكان الذي سأضيفه في الرأس والتذييل

5
00:00:19,660 --> 00:00:22,875
للتطبيق الزاوي الخاص بي بحيث تكون الطريقة

6
00:00:22,875 --> 00:00:29,635
التي يتم بها تقديم واجهة المستخدم أكثر جاذبية مما كان عليه حتى الآن.

7
00:00:29,635 --> 00:00:34,010
لذلك، دعونا نرى كيف يمكننا بناء مكونات متعددة

8
00:00:34,010 --> 00:00:38,150
لاحتلال أجزاء مختلفة من الشاشة داخل التطبيق الزاوي لدينا.

9
00:00:38,150 --> 00:00:43,445
لذا، هنا، سترى أن تطبيقي الزاوي الآن سيتكون من رأس،

10
00:00:43,445 --> 00:00:46,830
وهو مكون منفصل، التذييل،

11
00:00:46,830 --> 00:00:48,400
وهو مكون آخر،

12
00:00:48,400 --> 00:00:50,145
ثم بين الاثنين،

13
00:00:50,145 --> 00:00:54,860
سيكون لدي جزء من تطبيقي الزاوي الذي

14
00:00:54,860 --> 00:01:00,080
سيتم التحكم فيه لاحقًا باستخدام جهاز التوجيه الزاوي.

15
00:01:00,080 --> 00:01:06,740
لذا، كما ترون، أنا أقوم بإعداد المسرح لما سيأتي لاحقاً في هذه الدورة.

16
00:01:06,740 --> 00:01:08,840
لذلك، على طول الطريق،

17
00:01:08,840 --> 00:01:14,195
سنقوم أيضا الاستفادة من الرموز الخط رهيبة داخل التطبيق الزاوي لدينا.

18
00:01:14,195 --> 00:01:16,540
أنا فقط مولعا من الرموز رهيبة الخط،

19
00:01:16,540 --> 00:01:18,890
لذلك اعتقدت أن هذا سيكون مكانا جيدا

20
00:01:18,890 --> 00:01:23,005
لإدخال هذه الرموز في بلدي التطبيق الزاوي.

21
00:01:23,005 --> 00:01:28,715
للمضي قدما، دعونا تثبيت الخط رهيبة في التطبيق الزاوي لدينا.

22
00:01:28,715 --> 00:01:31,920
لذلك، للقيام بذلك، سأستخدم الآلية الوقائية الوطنية للذهاب،

23
00:01:31,920 --> 00:01:34,320
وجلب الخط الرائع بالنسبة لي،

24
00:01:34,320 --> 00:01:41,475
لذلك تقوم الآلية الوقائية الوطنية بتثبيت الخط الرائع 4.7.0، وحفظها.

25
00:01:41,475 --> 00:01:44,055
ثم، دعونا يتم تثبيت الخط رهيبة.

26
00:01:44,055 --> 00:01:48,435
لذا، بمجرد دخول الخط الرائع إلى تطبيقنا الزاوي،

27
00:01:48,435 --> 00:01:50,570
ثم يصبح جزءًا من وحدات العقدة

28
00:01:50,570 --> 00:01:53,055
التي يتم تضمينها في تطبيقنا الزاوي،

29
00:01:53,055 --> 00:01:58,465
فإن الخطوة التالية هي جعلها متاحة لتطبيقنا الزاوي.

30
00:01:58,465 --> 00:02:03,355
نحن بحاجة إلى دمج الخط رائع في تطبيقنا الزاوي.

31
00:02:03,355 --> 00:02:04,710
لذلك، للقيام بذلك،

32
00:02:04,710 --> 00:02:06,510
انتقل إلى المجلد المصدر،

33
00:02:06,510 --> 00:02:14,280
ثم قم بإنشاء ملف باسم _variables.scss في المجلد المصدر.

34
00:02:14,280 --> 00:02:18,400
في ملف variables.scss،

35
00:02:18,400 --> 00:02:27,860
أضف في $ fa-font-path:

36
00:02:27,860 --> 00:02:33,810
ثم ضمن علامات الاقتباس، ضع.. /node_modeles/خط رائعة/الخطوط.

37
00:02:38,510 --> 00:02:45,080
لذلك، نحن نحدد مسار الخط لملفاتنا الرائعة هنا.

38
00:02:45,330 --> 00:02:51,245
ثم، افتح ملف Styles.scss،

39
00:02:51,245 --> 00:02:53,995
ثم في ملف Styles.scss،

40
00:02:53,995 --> 00:02:56,720
سنقوم بإضافة بضعة أسطر هناك.

41
00:02:56,720 --> 00:03:05,335
أولاً، سنقوم باستيراد المتغيرات التي أعلناها للتو بقولها @import،

42
00:03:05,335 --> 00:03:08,550
وضمن متغيرات الاقتباس،

43
00:03:08,550 --> 00:03:14,025
ثم سنقوم باستيراد ملفات الخط الرائعة هناك،

44
00:03:14,025 --> 00:03:15,790
ثم سنقول

45
00:03:16,040 --> 00:03:30,020
@import.. /node_modeles/الخط رائعة/SCSS/الخط رائع. نحن نستورد

46
00:03:30,020 --> 00:03:36,540
إصدار SCSS منه لأننا نستخدم SCSS في تطبيقنا الزاوي.

47
00:03:36,670 --> 00:03:41,850
بمجرد تعديل الأنماط لملف CSS،

48
00:03:41,850 --> 00:03:43,680
دعنا نحفظ التغييرات.

49
00:03:43,680 --> 00:03:46,580
عند هذه النقطة، قد نحتاج إلى إعادة تشغيل

50
00:03:46,580 --> 00:03:50,840
الخادم الخاص بنا الذي كان يخدم تطبيقنا الزاوي.

51
00:03:50,840 --> 00:03:53,590
لذا، حيث قمت بكتابة خدمة NG،

52
00:03:53,590 --> 00:03:58,010
قد ترغب في إيقاف الخادم الذي يخدم تطبيقك الزاوي وإعادة

53
00:03:58,010 --> 00:04:03,135
تشغيله بحيث يتضمن هذه التغييرات الجديدة التي تم إجراؤها.

54
00:04:03,135 --> 00:04:05,280
لذلك، الذهاب إلى محطة بلدي،

55
00:04:05,280 --> 00:04:09,110
وأنا ذاهب لوقف الخادم الخاص بي،

56
00:04:09,110 --> 00:04:15,095
ومن ثم إعادة تشغيل الخادم بحيث سوف تأخذ في الاعتبار التغيير الذي قمت به.

57
00:04:15,095 --> 00:04:18,530
سترى الحالة الحالية

58
00:04:18,530 --> 00:04:21,770
للتطبيق الزاوي لدينا من خلال النظر إليها في المتصفح.

59
00:04:21,770 --> 00:04:25,040
لذلك، هذا هو ما لدينا في التطبيق الزاوي لدينا.

60
00:04:25,040 --> 00:04:28,160
أريد أن أكون قادرًا على إضافة رأس وتذييل

61
00:04:28,160 --> 00:04:33,320
لهذا العرض حتى أتمكن من استخدام كل من الرأس والتذييل،

62
00:04:33,320 --> 00:04:36,680
ثم المحتوى الفعلي بين الرأس

63
00:04:36,680 --> 00:04:40,550
والتذييل في الطريقة التي أقوم بها ببناء التطبيق الزاوي الخاص بي.

64
00:04:40,550 --> 00:04:41,690
لذلك، للقيام بذلك،

65
00:04:41,690 --> 00:04:46,135
سأقوم بإنشاء مكونين جديدين يسمى رأس وتذييل الصفحة،

66
00:04:46,135 --> 00:04:51,510
والسماح لهم بإدارة الجزء الخاص بهم من الشاشة التي يتم تخصيصها لهم.

67
00:04:51,510 --> 00:04:56,290
الذهاب إلى المطالبة، اسمحوا لي إنشاء مكون رأس جديد.

68
00:04:56,290 --> 00:04:58,950
يمكنني حتى أن أقول ng g g،

69
00:04:58,950 --> 00:05:02,420
وهذا يكفي بما فيه الكفاية لـ CLI الزاوي

70
00:05:02,420 --> 00:05:06,190
للتعرف على أنه يريد إنشاء مكون.

71
00:05:06,190 --> 00:05:11,310
لذا، أقول رأس مكون ng g g

72
00:05:11,760 --> 00:05:17,370
، وكذلك تذييل مكون ng g.

73
00:05:17,370 --> 00:05:20,900
لذلك، الآن، لدي عنصرين متاحين بالنسبة لي

74
00:05:20,900 --> 00:05:25,030
للاستفادة من داخل بلدي التطبيق الزاوي.

75
00:05:25,030 --> 00:05:28,445
كيف يمكنني الاستفادة من هذين العنصرين؟

76
00:05:28,445 --> 00:05:31,665
دعونا نذهب إلى ملف component.html التطبيق،

77
00:05:31,665 --> 00:05:35,360
ومن ثم الاستفادة من هذين العنصرين في الطريقة التي

78
00:05:35,360 --> 00:05:40,340
يؤلف بها الشاشة بأكملها لتطبيق الزاوي لدينا.

79
00:05:40,340 --> 00:05:43,185
بالعودة إلى

80
00:05:43,185 --> 00:05:48,620
تطبيقنا، نرى أن ملف module.ts التطبيق

81
00:05:48,620 --> 00:05:51,680
يتضمن بالفعل رأس

82
00:05:51,680 --> 00:05:54,965
ومكون تذييل الصفحة وقد تم تضمينها بالفعل في الإعلانات هنا.

83
00:05:54,965 --> 00:05:58,075
لذلك هذا هو ميزة استخدام كلي الزاوي،

84
00:05:58,075 --> 00:06:01,610
فإنه يعتني كل هذا الأساس بالنسبة

85
00:06:01,610 --> 00:06:05,825
لك بحيث يمكنك التركيز على مجرد بناء التطبيق الزاوي الخاص بك.

86
00:06:05,825 --> 00:06:09,340
لذا، هذا هو السبب في أنني أحب CLI

87
00:06:09,340 --> 00:06:13,490
الزاوي كنهج لبناء تطبيقي الزاوي.

88
00:06:13,490 --> 00:06:20,640
حتى الآن، دعونا نذهب إلى مكونات التطبيق ملف HTML.

89
00:06:20,640 --> 00:06:24,530
لذا، هنا، ترى أننا قمنا بتضمين قائمة التطبيق هناك.

90
00:06:24,530 --> 00:06:29,430
سأقوم بإزالة شريط الأدوات هذا من ملف HTML لمكونات التطبيق الخاص بي.

91
00:06:29,430 --> 00:06:37,650
سيصبح شريط الأدوات هذا جزءًا من قالب الرأس لمكون الرأس الخاص بي.

92
00:06:37,650 --> 00:06:45,500
لذا، بدلاً من ذلك،

93
00:06:45,500 --> 00:06:54,310
سيحتوي ملف قالب مكونات التطبيق الخاص بي على الرأس والتذييل في الأسفل فقط.

94
00:06:56,450 --> 00:06:59,065
لذلك، ترون أنه الآن،

95
00:06:59,065 --> 00:07:02,480
لدينا وجهات نظر المكونات الثلاثة.

96
00:07:02,480 --> 00:07:04,370
الرأس والقائمة

97
00:07:04,370 --> 00:07:07,160
والتذييل الذي يشغل الشاشة بأكملها.

98
00:07:07,160 --> 00:07:10,940
لذلك، هذه المكونات الثلاثة الحصول على ذلك الجزء من الشاشة لأنفسهم.

99
00:07:10,940 --> 00:07:16,970
دعونا حفظ التغييرات ونلقي نظرة سريعة على تطبيقنا في المتصفح.

100
00:07:16,970 --> 00:07:19,855
الذهاب إلى التطبيق في المتصفح،

101
00:07:19,855 --> 00:07:22,895
ترى الآن أن الرأس قد احتلت بالفعل انها

102
00:07:22,895 --> 00:07:26,090
جزء من الشاشة هناك، ومن الواضح،

103
00:07:26,090 --> 00:07:28,400
لأننا قد أعدت للتو المكون،

104
00:07:28,400 --> 00:07:30,245
فإنه يقول فقط يعمل رأس،

105
00:07:30,245 --> 00:07:31,879
ثم أسفل هنا،

106
00:07:31,879 --> 00:07:36,180
وقد اتخذت تذييل أيضا مكانها في صفحة الشاشة.

107
00:07:36,180 --> 00:07:41,630
الآن، سنمضي الآن ونقوم بتحديث القوالب لكل من الرأس والتذييل

108
00:07:41,630 --> 00:07:47,625
بحيث يمكننا تحديد واجهة المستخدم الخاصة بنا بشكل جيد للتطبيق الزاوي الخاص بنا.

109
00:07:47,625 --> 00:07:50,735
دعونا نبدأ العمل على تذييلنا.

110
00:07:50,735 --> 00:07:53,180
لذا، للبدء في التذييل،

111
00:07:53,180 --> 00:07:55,780
دعنا نذهب إلى ملف قالب التذييل،

112
00:07:55,780 --> 00:08:02,355
ثم سنقوم باستبدال هذا مع قالب التذييل المصمم حديثًا.

113
00:08:02,355 --> 00:08:03,920
الآن، لراحتك،

114
00:08:03,920 --> 00:08:07,030
لقد قدمت الرمز لك في التعليمات.

115
00:08:07,030 --> 00:08:10,690
سيكون من الحكمة نسخ الشفرة بأكملها من هناك،

116
00:08:10,690 --> 00:08:12,155
ثم لصقها هنا.

117
00:08:12,155 --> 00:08:15,715
ثم قم بفحص ما يفعله هذا التذييل.

118
00:08:15,715 --> 00:08:20,830
حتى هنا، ترى أنني قد لصق في التعليمات البرمجية لقالب تذييل بلدي.

119
00:08:20,830 --> 00:08:24,130
الآن، سأعود إلى هذا الرمز بعد قليل.

120
00:08:24,130 --> 00:08:28,045
إذا كنت قد أجريت الدورة السابقة على Bootstrap،

121
00:08:28,045 --> 00:08:33,580
فسترى أن هذه هي الطريقة المادية الزاوي لتنفيذ

122
00:08:33,580 --> 00:08:40,185
نفس النوع من البنية للتذييل الذي قمنا به في دورة Bootstrap.

123
00:08:40,185 --> 00:08:43,965
بعض هذه الأشياء سوف تكون قابلة للتمييز بالنسبة لك بالفعل،

124
00:08:43,965 --> 00:08:48,260
ولكن اسمحوا لي أن أكمل التحديث إلى قالب التذييل،

125
00:08:48,260 --> 00:08:57,085
وبعد ذلك أيضا سوف نضيف في عدد قليل من التعليمات البرمجية SCSS إلى ملف مكون تذييل الصفحة. scss،

126
00:08:57,085 --> 00:09:02,100
ثم نلقي نظرة على كيفية تشكيل تذييل الآن.

127
00:09:02,100 --> 00:09:05,675
حتى هنا، لقد لصق مرة أخرى في التعليمات البرمجية

128
00:09:05,675 --> 00:09:09,585
من تعليمات التمرين التي تتبع هذا الفيديو،

129
00:09:09,585 --> 00:09:18,880
لإظهار فئات SCSS المختلفة التي قمت بإضافتها إلى تذييل بلدي.

130
00:09:18,880 --> 00:09:23,320
لذلك، لدي بعض الطبقات التي قمت بتعريفها هنا،

131
00:09:23,320 --> 00:09:27,380
سأستخدمها لتحديد جزء من تذييل الصفحة،

132
00:09:27,380 --> 00:09:29,570
ثم الطبقة تذييل هنا،

133
00:09:29,570 --> 00:09:32,765
ولدي خلط SCSS هنا،

134
00:09:32,765 --> 00:09:37,165
وبعض المتغيرات هنا التي

135
00:09:37,165 --> 00:09:41,450
تحدد الألوان المختلفة التي سأستخدمها في تطبيقي الزاوي.

136
00:09:41,450 --> 00:09:44,145
لذلك، دعونا حفظ التغييرات التي قمنا بها.

137
00:09:44,145 --> 00:09:49,755
دعونا نلقي نظرة على التذييل في تجسيده الحالي،

138
00:09:49,755 --> 00:09:55,740
وبعد ذلك سنعود ونقوم بزيارة سريعة إلى الشفرة التي قمت بتضمينها

139
00:09:55,740 --> 00:10:02,345
في ملف قالب مكونات التذييل ورمز SCSS هنا.

140
00:10:02,345 --> 00:10:06,835
الذهاب إلى تطبيقنا الزاوي في المتصفح، wallah،

141
00:10:06,835 --> 00:10:11,545
هناك لديك تذييل جديد لتطبيقنا الزاوي.

142
00:10:11,545 --> 00:10:14,295
لذلك، يمكنك أن ترى أن لدي بعض الأشياء هنا.

143
00:10:14,295 --> 00:10:19,840
هذه الموجودة على الحافة اليسرى هي الروابط المختلفة

144
00:10:19,840 --> 00:10:25,975
للصفحات المختلفة التي ستشكل جزءًا من تطبيق Angular الخاص بي.

145
00:10:25,975 --> 00:10:30,620
سنرى كيف نفعل ذلك كجزء من التدريبات القليلة القادمة.

146
00:10:30,620 --> 00:10:35,110
الآن، هنا أنا الاستفادة من عنصر زر الذي

147
00:10:35,110 --> 00:10:39,795
هو جزء من المواد الزاوي لتحديد هذه الروابط هنا،

148
00:10:39,795 --> 00:10:41,870
ثم لدي عنوان هنا،

149
00:10:41,870 --> 00:10:46,810
ومن ثم أنا أيضا استخدام أزرار مرة أخرى لتحديد هذا التسلسل

150
00:10:46,810 --> 00:10:52,110
من الأزرار لمختلف وصلات وسائل الاعلام الاجتماعية لمطعمي هنا.

151
00:10:52,110 --> 00:10:55,515
لذلك، يمكنك أن ترى أن لدي كل هذه.

152
00:10:55,515 --> 00:10:57,470
لإنشاء هذه، يمكنني استخدام

153
00:10:57,470 --> 00:11:01,820
دعم المواد الزاوي لأزرار العمل العائمة الصغيرة هنا،

154
00:11:01,820 --> 00:11:05,155
والتي تعطي بنية لطيفة لهذا الغرض.

155
00:11:05,155 --> 00:11:07,860
إذا كنت قد رأيت إصدار Bootstrap من هذا،

156
00:11:07,860 --> 00:11:14,205
فأنا أحب هذا أفضل بكثير من إصدار Bootstrap الذي قمت بإنشائه في الدورة السابقة.

157
00:11:14,205 --> 00:11:19,730
لذلك، تذييل لدينا هو الآن في مكان جيد.

158
00:11:19,730 --> 00:11:22,695
دعونا ننظر بسرعة في بعض التعليمات البرمجية في تذييل الصفحة.

159
00:11:22,695 --> 00:11:27,890
الآن، لن أشرح أنه في الكثير من التفاصيل لأن ذلك هو

160
00:11:27,890 --> 00:11:33,665
التعامل مع أكثر مع المادة الزاوي من Angular نفسه،

161
00:11:33,665 --> 00:11:36,780
ولكن على طول الطريق بمجرد النظر

162
00:11:36,780 --> 00:11:39,045
إلى بنية الشفرة، ستبدأ في معرفة كيف

163
00:11:39,045 --> 00:11:45,095
يمكن استخدام مكونات المادة الزاوي هذه لتحديد شيء ما مثل هذا.

164
00:11:45,095 --> 00:11:47,060
الذهاب إلى مكون تذييل،

165
00:11:47,060 --> 00:11:55,795
ترى أن لدي ديف الخارجي هنا الذي قمت بتحديد بعض تخطيط الزاوي،

166
00:11:55,795 --> 00:11:59,280
سمات تخطيط المرن هنا،

167
00:11:59,280 --> 00:12:01,895
لذلك أقول أن صف فكسلايوت،

168
00:12:01,895 --> 00:12:06,075
ثم فكسلايوت سم و xs ليكون العمود.

169
00:12:06,075 --> 00:12:10,160
لذا، بالنسبة لأحجام الشاشة الصغيرة والصغيرة الإضافية،

170
00:12:10,160 --> 00:12:14,380
ستضع كل المحتوى كأعمدة،

171
00:12:14,380 --> 00:12:16,990
ولكن بالنسبة لأحجام الشاشة الأكبر،

172
00:12:16,990 --> 00:12:18,300
ستقوم بوضعها كصف.

173
00:12:18,300 --> 00:12:21,545
لذلك، هذا هو ما يعطيني بنية لطيفة لتذييل بلدي.

174
00:12:21,545 --> 00:12:24,790
كما ترى في ديف واجهة المستخدم،

175
00:12:24,790 --> 00:12:28,810
أنا وضع جميع مركز المحتوى هنا،

176
00:12:28,810 --> 00:12:31,495
وأسفل هنا،

177
00:12:31,495 --> 00:12:33,380
وأنا تحديد أول واحد.

178
00:12:33,380 --> 00:12:40,415
لذلك، هذا تطور الرياضيات هنا الذي أستخدمه يحدد روابطي هنا.

179
00:12:40,415 --> 00:12:46,235
لذلك، في هذا أنا باستخدام حصيرة لعنصر المواد الزاوي،

180
00:12:46,235 --> 00:12:49,425
وداخل هناك أنا باستخدام مع

181
00:12:49,425 --> 00:12:58,990
سمة عنصر زر حصيرة المخصصة لإنشاء هذه الأزرار هنا.

182
00:12:58,990 --> 00:13:02,255
في وقت لاحق، سأعود وأضيف

183
00:13:02,255 --> 00:13:07,665
الرمز الفعلي لهذه الروابط في التدريبات اللاحقة هنا.

184
00:13:07,665 --> 00:13:12,940
هذا ما يساعدني على إنشاء قائمة الروابط على الجانب الأيسر.

185
00:13:12,940 --> 00:13:14,920
هذا هو العنوان الذي ترونه،

186
00:13:14,920 --> 00:13:17,420
وهذا هو واضح إلى حد ما للنظر في.

187
00:13:17,420 --> 00:13:22,080
لذا، هذا هو div الذي أستخدم FxFlex مع 50،

188
00:13:22,080 --> 00:13:24,490
والآخر مع FxFlex مع 40.

189
00:13:24,490 --> 00:13:29,230
لذلك، 40 يعني 40 في المئة و 50 يعني 50 في المئة،

190
00:13:29,230 --> 00:13:33,150
وهنا أنا باستخدام FxFlex إزاحة 20 بكسل.

191
00:13:33,150 --> 00:13:37,410
لذلك، فإنه يتحرك هذا المحتوى الحق بمقدار 20 بكسل.

192
00:13:37,410 --> 00:13:41,830
لذلك، لدي مساحة 20 بكسل اليسار على الجانب الأيسر

193
00:13:41,830 --> 00:13:47,660
لهذا div معين يحتوي على هذه الروابط هنا.

194
00:13:47,660 --> 00:13:49,400
ثم أخيرا أدناه هنا،

195
00:13:49,400 --> 00:13:55,850
لدي هذه المجموعة من الروابط التي أستخدمها

196
00:13:55,850 --> 00:14:02,340
لإنشاء شريط مع جميع وصلات وسائل الاعلام الاجتماعية هناك.

197
00:14:02,340 --> 00:14:06,330
لذلك، أنا باستخدام مع زر رمز حصيرة هنا.

198
00:14:06,330 --> 00:14:14,850
لذلك، هذا هو ما يخلق الأزرار المستديرة التي تراها في التذييل هناك.

199
00:14:14,850 --> 00:14:16,150
الآن، لكل من هذه،

200
00:14:16,150 --> 00:14:18,640
أنا أطبق الطبقة المقابلة هنا.

201
00:14:18,640 --> 00:14:21,745
لذا، يمكنك ملاحظة هذا الزر Google Plus، زر Facebook،

202
00:14:21,745 --> 00:14:27,590
يتم تعريف جميع هذه الفئات في ملف SCSS الخاص بي هناك،

203
00:14:27,590 --> 00:14:31,540
حيث قمت بتحديد الألوان للخلفية وما إلى ذلك،

204
00:14:31,540 --> 00:14:38,025
بحيث يتطابق مع نظام الألوان النموذجي الذي تستخدمه مواقع التواصل الاجتماعي هذه.

205
00:14:38,025 --> 00:14:43,380
لذلك، قضاء قليلا من الوقت في النظر إلى هذا الرمز هنا،

206
00:14:43,380 --> 00:14:49,435
وبعد ذلك سوف تحصل بسرعة على شعور كيف تم تصميم تذييل الصفحة.

207
00:14:49,435 --> 00:14:54,520
وبالمثل، انتقل إلى مكونات تذييل رمز ساس هنا،

208
00:14:54,520 --> 00:14:57,460
حتى تتمكن من رؤية أنني قمت بتعريف ألوان مختلفة هنا.

209
00:14:57,460 --> 00:15:00,970
أنا باستخدام خلط مع الهامش إعداد هنا،

210
00:15:00,970 --> 00:15:02,045
ومن ثم لتذييل بلدي،

211
00:15:02,045 --> 00:15:04,695
وأنا تحديد لون الخلفية بشكل مناسب،

212
00:15:04,695 --> 00:15:10,150
وتلاحظ الطبقات المختلفة التي أنا تعريف هنا

213
00:15:10,150 --> 00:15:12,910
زر الفيسبوك الذي

214
00:15:12,910 --> 00:15:15,910
اللون ولون الخلفية لقد حددت لكل واحد منهم.

215
00:15:15,910 --> 00:15:18,300
لذلك،

216
00:15:18,300 --> 00:15:22,835
يتم استخدام اللون المقابل لهذا الموقع وسائل الاعلام الاجتماعية كلون الخلفية لكل واحد من هذه.

217
00:15:22,835 --> 00:15:25,255
الآن، في دورة Bootstrap في وقت سابق،

218
00:15:25,255 --> 00:15:31,200
كنت قد استخدمت Bootstrap Social لتحقيق نفس الشيء.

219
00:15:31,200 --> 00:15:34,920
هذا لا يعمل بشكل جيد جدا مع المواد الزاوي،

220
00:15:34,920 --> 00:15:41,170
لذلك لهذا السبب أنا مجرد خلق بلدي مجموعة من النظارات ساس هنا،

221
00:15:41,170 --> 00:15:46,380
ومن ثم إضافة في التعليمات البرمجية التي أحتاج إلى إنشاء تلك الأزرار هناك.

222
00:15:46,380 --> 00:15:48,840
إذا كنت بحاجة إلى إضافة المزيد من الأزرار،

223
00:15:48,840 --> 00:15:51,490
فما عليك سوى إنشاء المزيد من الفئات مثل هذه المقابلة

224
00:15:51,490 --> 00:15:54,695
للأزرار التي تريد إضافتها إلى التطبيق الخاص بك.

225
00:15:54,695 --> 00:15:57,355
لذلك، أن يبني تذييلنا.

226
00:15:57,355 --> 00:16:01,995
الآن، العنوان هو الجزء التالي الذي سنستهدفه.

227
00:16:01,995 --> 00:16:04,770
الذهاب إلى الرأس، سيتم فتح

228
00:16:04,770 --> 00:16:09,320
ملف قالب مكونات الرأس وترى ما يحتوي عليه.

229
00:16:09,320 --> 00:16:11,565
سنقوم باستبدال هذا

230
00:16:11,565 --> 00:16:16,115
بالقالب الذي أعطيته لك في التعليمات التالية هنا.

231
00:16:16,115 --> 00:16:19,495
لذلك، فقط المضي قدما وقطع ولصق هذا الرمز في هنا،

232
00:16:19,495 --> 00:16:22,730
لأن هذا لا علاقة له على وجه التحديد مع الزاوي.

233
00:16:22,730 --> 00:16:26,620
لذلك، هذا هو السبب في أنني فقط السماح لك لقطع ولصق التعليمات البرمجية مباشرة من هناك،

234
00:16:26,620 --> 00:16:29,060
ويوفر بعض الوقت بالنسبة لنا.

235
00:16:29,060 --> 00:16:35,300
يمكنك أن ترى أنني قمت الآن باستبدال قالب الرؤوس ببعض التعليمات البرمجية هنا.

236
00:16:35,300 --> 00:16:37,230
وبالمثل، بينما نحن في ذلك،

237
00:16:37,230 --> 00:16:43,100
سوف نضيف أيضا في بعض التعليمات البرمجية سس لبلدي Header.components.scss ملف هنا، ما

238
00:16:43,100 --> 00:16:46,550
عليك سوى الذهاب ونسخ التعليمات البرمجية من التعليمات.

239
00:16:46,550 --> 00:16:48,845
وبالمثل، بينما نحن في ذلك،

240
00:16:48,845 --> 00:16:55,810
سنضيف في عدد قليل من فئات SCSS إلى ملف الأنماط الرئيسية.

241
00:16:55,810 --> 00:16:58,480
لذلك، في هذا الملف الأنماط الرئيسية. scss،

242
00:16:58,480 --> 00:17:03,850
وسوف أضيف في الألوان الفرعية واثنين من أكثر الطبقات في هذا.

243
00:17:03,850 --> 00:17:09,650
لذلك، دعونا لصق في التعليمات البرمجية من التعليمات التي أعطيتك.

244
00:17:09,650 --> 00:17:14,425
لذا، فإن التحديث إلى ملف Styles.scss اكتمل الآن،

245
00:17:14,425 --> 00:17:18,165
لذلك أضفت في بعض الألوان هنا واخلط هناك،

246
00:17:18,165 --> 00:17:23,230
ثم في الجزء السفلي أضفت في عدد قليل من الطبقات الأخرى هنا والتي

247
00:17:23,230 --> 00:17:28,975
تساعدني عندما أقوم بتصميم القوالب الخاصة بي للتطبيق الزاوي.

248
00:17:28,975 --> 00:17:30,680
لذلك، كل هذه التغييرات،

249
00:17:30,680 --> 00:17:32,120
دعونا حفظ التغييرات،

250
00:17:32,120 --> 00:17:36,435
نلقي نظرة سريعة على كيف يبدو رأسي الآن في التطبيق،

251
00:17:36,435 --> 00:17:41,735
وبعد ذلك سوف نعود وسرعان ما إعادة النظر في التعليمات البرمجية التي قمنا بتضمينها هنا فقط.

252
00:17:41,735 --> 00:17:45,775
بالعودة إلى تطبيق Angular الخاص بي في المتصفح،

253
00:17:45,775 --> 00:17:51,820
سترى الآن شريط الأدوات يظهر مرة أخرى في الرأس هنا،

254
00:17:51,820 --> 00:17:56,980
جنبا إلى جنب مع بعض الروابط

255
00:17:56,980 --> 00:18:03,260
هناك ثم صورة تمثل شعار مطعمي،

256
00:18:03,260 --> 00:18:12,095
ثم هنا، لديك شيء نستخدم ملف jumbotron في الدورة السابقة.

257
00:18:12,095 --> 00:18:15,890
أنا ذاهب فقط لاستخدام فئة تسمى jumbotron لإنشاء هذا

258
00:18:15,890 --> 00:18:20,015
في تطبيق Angular أيضا،

259
00:18:20,015 --> 00:18:24,545
لذلك هنا على الجانب الأيسر لدي معلومات مطعمي

260
00:18:24,545 --> 00:18:30,280
وشعار المطعم وترك نفسي بعض المساحة هنا لإضافة شيء في المستقبل.

261
00:18:30,280 --> 00:18:36,610
لذلك، هنا ترى طلبي يتشكل الآن مع رأس،

262
00:18:36,610 --> 00:18:38,745
مع بعض الروابط هناك.

263
00:18:38,745 --> 00:18:41,070
الآن، نحن ذاهبون للاستفادة من هذه الروابط

264
00:18:41,070 --> 00:18:46,145
في التدريبات القليلة القادمة لإعداد بلدي التطبيق الزاوي،

265
00:18:46,145 --> 00:18:52,220
ثم القائمة يجلس بين ثم أسفل هنا تذييل بلدي.

266
00:18:52,220 --> 00:18:55,100
الذهاب إلى ملف قالب مكونات الرأس الخاص بي،

267
00:18:55,100 --> 00:19:00,830
يمكنك الآن أن ترى كيف قمت بإنشاء شريط الأدوات مع أزرار إضافية هنا.

268
00:19:00,830 --> 00:19:03,740
لذلك، تتذكر أن لدينا شريط الأدوات قيد

269
00:19:03,740 --> 00:19:08,035
الاستخدام بالفعل في ملف قالب مكونات التطبيق،

270
00:19:08,035 --> 00:19:16,845
لقد قطعته من هناك وبدلاً من ذلك استخدم شريط الأدوات في قالب الرؤوس هنا.

271
00:19:16,845 --> 00:19:18,915
الآن، داخل شريط الأدوات هذا،

272
00:19:18,915 --> 00:19:26,260
قمت بتضمين بعض الروابط مع فئة الزر المطبقة عليه وهذا ما

273
00:19:26,260 --> 00:19:34,745
يسمح لي بإنشاء تلك الروابط في شريط الأدوات كقائمة لتطبيق الويب الخاص بي.

274
00:19:34,745 --> 00:19:40,855
أدناه هناك، لقد قمت بإنشاء div مع حاوية الصف و jumbotron.

275
00:19:40,855 --> 00:19:46,650
هذا هو السبب في أنني أضفت فئات الحاوية و jumbotron في ملف SCSS الخاص بي،

276
00:19:46,650 --> 00:19:50,480
حتى أتمكن من الاستفادة منها داخل القوالب الخاصة بي هنا.

277
00:19:50,480 --> 00:19:51,910
لذلك، والتي مرة أخرى،

278
00:19:51,910 --> 00:20:01,025
أطبق وبعض سمات التخطيط المرن هنا لمساعدتي في تصميم الشاشة هناك.

279
00:20:01,025 --> 00:20:06,500
ثم يمكنك أن ترى كيف استخدمت اثنين من divs هنا مع

280
00:20:06,500 --> 00:20:13,815
السمة FxFlex المطبقة وفقا لذلك لإنشاء واجهة المستخدم،

281
00:20:13,815 --> 00:20:16,385
لتطبيقي هنا.

282
00:20:16,385 --> 00:20:22,400
لذا، اقضي قليلاً من الوقت هنا لإلقاء نظرة سريعة على هذا الرمز هنا

283
00:20:22,400 --> 00:20:29,130
لفهم كيفية إنشاء تخطيطي لقالب الرأس الخاص بي بسرعة.

284
00:20:29,130 --> 00:20:30,620
انها ليست معقدة،

285
00:20:30,620 --> 00:20:32,825
بمجرد الانتهاء من دورة بوتستراب،

286
00:20:32,825 --> 00:20:35,619
وهذا ليس من الصعب أن نفهم.

287
00:20:35,619 --> 00:20:39,520
على طول الطريق، كنت أيضا تعلم تخطيط المرن الزاوي ثم

288
00:20:39,520 --> 00:20:44,105
أيضا مكونات المواد الزاوي هنا.

289
00:20:44,105 --> 00:20:48,619
الذهاب إلى ملف SCSS لمكون الرأس،

290
00:20:48,619 --> 00:20:52,300
يمكنك أن ترى أنني قد أضفت في بعض الألوان هنا ثم مزيج

291
00:20:52,300 --> 00:20:56,100
في ثم وأضاف أيضا في فئة jumbotron هنا.

292
00:20:56,100 --> 00:20:58,275
الآن، فئة الحاوية ليست هنا،

293
00:20:58,275 --> 00:21:01,315
فئة الحاوية في ملف الأنماط الرئيسية.

294
00:21:01,315 --> 00:21:03,600
لأن فئة الحاوية هي شيء

295
00:21:03,600 --> 00:21:06,010
سأستخدمه للعديد من القوالب هناك.

296
00:21:06,010 --> 00:21:11,800
لذلك، لهذا السبب، أضفت في فئة الحاوية إلى

297
00:21:11,800 --> 00:21:18,020
ملف Styles.scss وهو الملف المشترك للتطبيق الزاوي بأكمله.

298
00:21:18,020 --> 00:21:21,375
لذلك، هناك لقد أضفت في بعض الألوان الإضافية هنا،

299
00:21:21,375 --> 00:21:24,670
وأيضا لقد خلقت مزيجًا هنا،

300
00:21:24,670 --> 00:21:26,759
ثم أضفت في الحاوية،

301
00:21:26,759 --> 00:21:29,980
الخلفية الأساسية، وألوان لهجة الخلفية،

302
00:21:29,980 --> 00:21:33,640
ثم أستخدم أيضًا فئة أخرى تسمى flexes spacer،

303
00:21:33,640 --> 00:21:37,575
والتي سأستخدمها في واحدة من التدريبات اللاحقة.

304
00:21:37,575 --> 00:21:41,400
كل هذه الخطوات في التحضير لما

305
00:21:41,400 --> 00:21:45,150
سيأتي في التدريبات العديدة المقبلة.

306
00:21:45,150 --> 00:21:51,920
لقد اتخذ تطبيق Angular الخاص بي شكلاً جيدًا من حيث الطريقة التي يتم بها وضع واجهة المستخدم،

307
00:21:51,920 --> 00:21:58,155
بحيث يمكنني الآن البدء في إدخال المزيد من الميزات الجديدة للزاوية.

308
00:21:58,155 --> 00:22:02,005
دفع مرة أخرى إلى بلدي تطبيق الزاوي في المتصفح،

309
00:22:02,005 --> 00:22:08,450
اسمحوا لي أن أرى كيف يبدو هذا التطبيق في أحجام الشاشة المختلفة.

310
00:22:08,450 --> 00:22:11,430
لذا، هذا هو حجم شاشة سطح المكتب القياسي،

311
00:22:11,430 --> 00:22:17,020
لذلك دعونا ننتقل إلى حجم شاشة أصغر ثم نرى كيف يبدو التطبيق.

312
00:22:17,020 --> 00:22:21,690
لذا، هذا هو حجم شاشة iPhone 6 Plus،

313
00:22:21,690 --> 00:22:28,865
حتى تتمكن من رؤية كيف يختلف التخطيط لحجم الشاشة الأصغر.

314
00:22:28,865 --> 00:22:35,115
لذا، فإن رأسي موجود هناك وقائمة الطعام الخاصة بي في الأسفل والتذييل هنا،

315
00:22:35,115 --> 00:22:38,955
لاحظ كيف تم

316
00:22:38,955 --> 00:22:43,485
وضع الأجزاء المختلفة للتذييل بشكل مختلف لحجم الشاشة الصغيرة الإضافية.

317
00:22:43,485 --> 00:22:49,950
هذا هو نفس التطبيق في وضع أفقي أو اي فون 6 زائد،

318
00:22:49,950 --> 00:22:58,205
حتى تتمكن من رؤية أن رأسي وضعت من هذا القبيل والقائمة هناك وتذييل.

319
00:22:58,205 --> 00:23:04,230
لذلك، يظهر لك ذلك أنني قد استفادت من تخطيط المرن الزاوي

320
00:23:04,230 --> 00:23:10,510
لتكون قادرة على إنشاء تخطيطات مختلفة لأحجام الشاشة المختلفة.

321
00:23:10,510 --> 00:23:14,395
لذا، مرة أخرى، إذا كنت قد أخذت دورة Bootstrap في وقت سابق،

322
00:23:14,395 --> 00:23:19,420
فستبدأ في معرفة كيف

323
00:23:19,420 --> 00:23:25,950
يمكن أيضًا استخدام التصميم المتجاوب مع التخطيط المرن الزاوي لتحقيق نتائج مماثلة.

324
00:23:25,950 --> 00:23:29,790
لذلك، مع هذا، ونحن استكمال هذا التمرين.

325
00:23:29,790 --> 00:23:35,140
في هذا التمرين، قمنا بإعداد تطبيق Angular الخاص بنا

326
00:23:35,140 --> 00:23:40,645
وجعلناه جاهزًا لبقية التمارين في هذه الدورة.

327
00:23:40,645 --> 00:23:47,300
هذا هو أيضا الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع رأس الرسالة والتذييلات.