من المعتقد أنه في التطوير الأمامي ، فإن ما يعادل "
Hello world " هو تطبيق - قائمة بالمهام. نعم ، يسمح لك هذا بتغطية جانب CRUD في إنشاء تطبيق ، ومع ذلك ، فإن إمكانات إطار العمل أو المكتبة المستخدمة غالباً ما تتأثر بشكل سطحي للغاية.
الزاوي يتغير ويستكمل باستمرار ، لكن يبقى شيء ما كما هو. سأتحدث عن مفاهيم الزاوي الأساسية التي تحتاج إلى معرفة ما إذا كنت تريد استخدام إطار جافا سكريبت هذا بأفضل طريقة.
هناك الكثير لتتعلمه مع Angular ، وغالبًا ما يتعطل الوافدون الجدد في المستوى الأولي لمجرد أنهم لا يعرفون أين وما الذي يبحثون عنه. لذلك ، كتبت دليلًا (يتضمن ملخصًا موجزًا عن أساسيات الزاوي) ، سأكون مفيدًا للغاية عندما بدأت العمل مع Angular 2+.
ترجمت إلى ألكونوست1. بنية وحدات الزاوي
من الناحية النظرية ، يمكنك وضع كل الشفرة الزاوية في صفحة واحدة وفي وظيفة واحدة كبيرة ، ولكن هذا غير مستحسن: هذه طريقة غير فعالة لهيكلة الشفرة التي تمنعك من كشف الغرض من الزاوي.
جزء من بنية هذا الإطار هو الاستخدام النشط لمفهوم الوحدات ، والتي هي رمز له غرض واحد. يتكون التطبيق الزاوي أساسًا من وحدات ، بعضها معزول ، والبعض الآخر شائع.
هناك مجموعة متنوعة من الطرق لتنظيم الوحدات النمطية في تطبيق ما. من خلال استكشاف مختلف الهياكل المعمارية ، يمكنك تحديد كيفية قياس التطبيق أثناء تطويره ، وكذلك تعلم كيفية عزل الكود وتقليل الاعتماد المتبادل.
ما جوجل:- الأنماط المعمارية الزاوي ،
- بنية تطبيق قابلة للتطوير الزاوي.
2. في اتجاه واحد تدفق البيانات وثبات
فازت الرابطة الثنائية بقلوب العديد من مطوري الواجهة الأمامية في أيام Angular 1 - في الواقع ، كانت هذه واحدة من السمات المميزة الرئيسية لهذا الإطار. ومع ذلك ، مع تطور التطبيق ، بدأ هذا النهج في خلق مشاكل من حيث الأداء.
اتضح أن الربط في اتجاهين ليست هناك حاجة في كل مكان
لا يزال تطبيق Angular 2+ يتيح إمكانية تنفيذه ، ولكن يجب أن يتم طلب ذلك صراحةً - لذلك ، يتعين على المطور التفكير في تدفقات البيانات واتجاهها. بالإضافة إلى ذلك ، يسمح هذا للتطبيق بمعالجة البيانات بشكل أكثر مرونة ، حيث يمكنك تحديد كيفية نقلها.
ما جوجل:- العمل مع تدفقات البيانات في الزاوي ،
- تدفق أحادي الاتجاه في الزاوي ،
- فوائد العض في اتجاه واحد.
3. التوجيهات الإنشائية والهيكلية
التوجيه هو امتداد HTML مع عناصر إضافية. تسمح لك توجيهات السمة بتغيير خصائص عنصر. التوجيهات الهيكلية تغير التصميم عن طريق إضافة أو إزالة عناصر DOM.
على سبيل المثال ،
ngSwitch و
ngIf عبارة عن توجيهات هيكلية: حيث يقومون بتقييم المعلمات وتحديد ما إذا كان يجب وجود أجزاء محددة من DOM.
توجيهات السمة هي سلوكيات مخصصة مرفقة بعنصر أو مكون أو توجيهات أخرى.
من خلال تعلم كيفية استخدام توجيهات هذين النوعين ، يمكنك توسيع قدرات التطبيق الخاص بك وتقليل ازدواجية التعليمات البرمجية في المشروع. تساعد تعليمات السمة أيضًا على مركزية السلوك المحدد المستخدم في أجزاء مختلفة من التطبيق.
ما جوجل:- توجيهات السمة الزاوية ،
- التوجيهات الهيكلية الزاوي ،
- قوالب التوجيه الهيكلي الزاوي.
4. مكون معالجات دورة حياة
يحتوي كل تطبيق على دورة حياة تحدد كيفية إنشاء الكائنات ومعالجتها وحذفها. في الإطار الزاوي ، تبدو دورة حياة المكون مثل هذا:
→ → → → → DOM
لدينا الفرصة لمعالجة النقاط الرئيسية لهذه الدورة والتركيز على نقاط محددة في الوقت المناسب أو الأحداث. يتيح لك ذلك إنشاء استجابات مناسبة وتخصيص السلوك وفقًا للمراحل المختلفة للمكون.
على سبيل المثال ، إذا كنت ترغب في تحميل بعض البيانات قبل تقديم الصفحة ، فيمكن القيام بذلك عبر
ngOnInit() . وإذا كنت بحاجة إلى قطع الاتصال من قاعدة البيانات ، فيمكن القيام بذلك في وقت
ngOnDestroy() .
ما جوجل:- معالجات دورة حياة المكون في الزاوي.
- دورة حياة المكون.
5. الخدمات التي تمت ملاحظتها و HTTP
الخدمات التي تمت ملاحظتها ليست ميزة فريدة لـ Angular ، ولكنها شيء من ES7. ومع ذلك ، تم تنفيذ هذه الوظيفة ضمن إطار العمل ، كما يتم نقل الأفكار ذات الصلة جيدًا إلى React و Vue وغيرها من المكتبات والأطر ذات الصلة بـ JavaScript.
ما جوجل:- أنماط مراقبة جافا سكريبت
- الأشياء الملاحظة و HTTP في الزاوي ،
- الأشياء الملاحظة في ES7.
6. بنية مكونات ذكية وغبية
في كثير من الأحيان عند كتابة التطبيقات على Angular ، يتم إلقاء كل شيء في مكون واحد ، لكن هذا ليس هو النهج الأفضل. مفهوم المكونات الذكية والبكم في Angular يستحق بالتأكيد المزيد من الاهتمام ، وخاصة بين المبتدئين.
يتم تحديد دور المكون في الخطة العامة للتطبيق من خلال ما إذا كان "غبي" أو "ذكي". مكونات "سخيفة" عادة لا تتبع الحالة ، وسلوكها من السهل التنبؤ وفهم - إذا كان ذلك ممكنا ، ينبغي أن تكون المكونات بهذه الطريقة.
يصعب فهم المكونات الذكية لأنها تتضمن المدخلات والمخرجات. للاستفادة الكاملة من قدرات Angular ، يجب أن تفهم بنية المكونات الذكية والغبية: وبهذه الطريقة سوف تتقن الأنماط وطرق التفكير التي ستساعدك على كتابة كود أكثر إنتاجية وبناء التفاعل الصحيح داخل التطبيق.
ما جوجل:- مكونات الزاوي ذكية وغبية ،
- مكونات عديمي الجنسية غبية
- مكونات العرض
- مكونات الزاوي الذكية.
7. هياكل التطبيق القياسية
تعتبر القدرة على العمل مع سطر الأوامر في تحديد بنية التطبيق مفيدة ، ولكنها ليست حلاً سحريًا. يشبه إنشاء تطبيق على Angular (وأي تطبيق بشكل عام) بناء منزل: هناك عمليات راسخة تم تحسينها من قبل المجتمع لسنوات عديدة وتتيح لك كتابة تطبيقات أكثر كفاءة وإنتاجية.
والزاوي هنا ليست استثناء.
يمكن سماع معظم الشكاوى حول الزاوي من أولئك الذين يحاولون دراستها دون فهم الهيكل. بناء جملة واضحة وموجزة يتم التقاطها على الطاير ، ومع ذلك ، لفهم بنية التطبيق ، تحتاج إلى معرفة السياق والمتطلبات وكيف يناسب الجميع معًا على مستوى مفاهيمي وعملي. بعد دراستك للعديد من الهياكل الممكنة للتطبيقات الزاوية والتوصيات الخاصة بتطبيقها ، ستحصل على فكرة عن كيفية الكتابة الخاصة بك.
ما جوجل:- تطبيقات الزاوي مع مستودع واحد ،
- مكتبات الزاوي ، الحزم الزاوي ،
- حزم الزاوي
- التطبيقات الدقيقة الزاوي.
- monorepozitorii.
8. بناء الجملة لقالب ملزم
يعد تمييز إطار عمل جافا سكريبت المعني هو الملزم ، وقد أصبح أيضًا أحد أسباب إنشائه. يجمع ربط القالب بين HTML الثابت وجافا سكريبت ، ويعمل بناء جملة قالب القالب Angular كوسيط بين التقنيتين.
إذا تعلمت استخدام هذه الميزات بشكل صحيح وفي الوقت المناسب ، فسيصبح تحويل الصفحة الثابتة إلى شيء تفاعلي أسهل وأكثر متعة. استكشف سيناريوهات الربط المختلفة: ربط الممتلكات ، ربط الحدث ، الاستيفاء ، الربط ثنائي الاتجاه.
ما جوجل:- ملزمة للخصائص في الزاوي ،
- ربط الحدث في الزاوي ،
- الربط في اتجاهين في الزاوي ، الاستيفاء في الزاوي ،
- تمرير الثوابت الزاوي.
9. وحدات التوجيه والوظيفة
في حالة Angular ، عادة ما يتم الاستهانة بالوحدات الوظيفية ، على الرغم من أنها طريقة رائعة لتبسيط وتقييد مجموعة من متطلبات العمل. فهي تساعد على التمييز بين المسؤوليات والمساعدة في منع تلوث الكود على المدى الطويل.
هناك خمسة أنواع من الوحدات الوظيفية (المجال ، التوجيه ، التوجيه ، الخدمة ، والقطعة) ، ولكل منها مجموعة من القدرات الخاصة بها. من خلال تعلم كيفية استخدام الوحدات الوظيفية بالاقتران مع التوجيه ، يمكنك إنشاء مجموعات منفصلة من الوظائف وتوفير فصل مفهومة ومريح لقدرات التطبيق.
ما جوجل:- وحدات وظيفة الزاوي ،
- الهياكل الوظيفية المشتركة في الزاوي ،
- وظيفة وحدة مقدمي.
- تحميل كسول مع وحدات التوجيه وظيفة.
10. النماذج والتحقق من صحة البيانات (أشكال رد الفعل والمدققون)
النماذج هي جزء لا يتجزأ من تطوير الواجهة الأمامية.
وحيث توجد نماذج ، هناك التحقق من البيانات.
يمكنك إنشاء نماذج ذكية تعمل بشكل جيد مع البيانات الموجودة على الإطار الزاوي بطرق مختلفة ، والأشكال التفاعلية هي الطريقة الأكثر شيوعًا. ومع ذلك ، هناك خيارات أخرى ، وهي بالتحقق من القوالب والمخصصات.
من خلال فهم كيفية عمل المدققين و CSS ، يمكنك تسريع سير العمل وإعداد طلبك لمعالجة الأخطاء.
ما جوجل:- التحقق من صحة النموذج في الزاوي ،
- التحقق من صحة البيانات المستندة إلى القالب ،
- التحقق من صحة الأشكال التفاعلية
- مصادقة متزامن وغير متزامن في الزاوي ،
- المصادقون المدمج في
- مصدات مخصصة في الزاوي ،
- عبر الحقول الاختيار.
11. إسقاط المحتوى
يحتوي إطار العمل الزاوي على مفهوم مثل إسقاط المحتوى ، والذي يسمح لك بنقل البيانات بشكل فعال من المكونات الرئيسية إلى المكونات الفرعية. في البداية ، قد يبدو هذا الأمر معقدًا ، ولكن في الواقع ، في هذه الحالة ، يتم وضع المشاهدات داخل طرق عرض أخرى - وهذا يخلق العرض الرئيسي.
غالبًا ما يتم فهم إسقاط المحتوى بشكل سطحي: كما لو أننا ندمج المشاهدات الفرعية في العرض الأصل. ومع ذلك ، من أجل فهم أعمق للإطار ، من الضروري أن نفهم كيف يتم نقل البيانات بين التمثيلات المختلفة - وهذا هو المكان الذي يكون فيه معرفة مفهوم إسقاط المحتوى مفيدًا.
بعد دراسة إسقاط المحتوى ، ستتعلم فهم دفق بيانات التطبيق وتحديد الأماكن التي يخضع فيها للتغيير.
ما جوجل:- إسقاط المحتوى في الزاوي ،
- علاقة الوالدين والطفل وجهات النظر في الزاوي ،
- العلاقات بين البيانات في وجهات النظر الزاوي.
12. تغيير استراتيجية الكشف "onPush"
افتراضيًا ، تستخدم Angular إستراتيجية اكتشاف التغيير القياسية التي يتم فيها فحص المكونات دائمًا. لا حرج في استخدام السلوك الافتراضي ؛ ومع ذلك ، يمكن أن يكون هذا الكشف عن التغييرات غير فعال.
بالنسبة للتطبيقات الصغيرة ، تظل السرعة والأداء مرضيين. ولكن بمجرد وصول التطبيق إلى حجم معين ، يتباطأ إطلاق بعض العناصر ، خاصة في المتصفحات القديمة.
onPush اكتشاف تغيير
onPush تسريع التطبيق بشكل كبير لأنه لا يعتمد على التحقق المستمر ، ولكنه يعتمد على تشغيل مشغلات محددة.
ما جوجل:- الكشف عن التغييرات onPush في الزاوي.
13. المدافعين عن الطريق ، قبل وتأخر التحميل
إذا كان التطبيق لديه تسجيل دخول إلى الحساب ، فستحتاج إلى مدافعين عن الطريق. خلاصة القول هي حماية بعض المشاهدات من المشاهدة غير المصرح بها ، والتي في كثير من الحالات هو شرط إلزامي. يتصرف المدافعون عن الطريق كواجهة بين جهاز التوجيه والطريق المطلوب: فهم يحددون ما إذا كان يجب السماح بالوصول إلى مسار معين أم لا. هذا موضوع موسع إلى حد ما: على سبيل المثال ، يتضمن ذلك مسألة اتخاذ القرارات بشأن التوجيه استنادًا إلى صلاحية الرموز ، ومصادقة أدوار المستخدم وحماية المسارات.
لتسريع عملية تحميل التطبيق وجعل العمل معه أكثر ملاءمة ، سيساعد أيضًا التحميل الأولي والتأخير. تجدر الإشارة أيضًا إلى أن هذه الأدوات لا تسمح فقط بتحديد ما إذا كان سيتم تنزيل مجموعة محددة من الصور: فهي تساعد في تحسين البنية المرتبطة وتحميل أجزاء مختلفة من التطبيق التي قد تكون في مجالات مختلفة ومناطق تعريف.
ما جوجل:- حراس الطريق في الزاوي ،
- أنماط المصادقة في الزاوي ،
- الزاوي قبل الحمل وحدات
- قوالب الطريق آمنة في الزاوي.
14. قنوات مخصصة
تبسط قنوات الإطار الزاوي تنسيق البيانات إلى حد كبير. العديد من أنواع التنسيقات (التواريخ والعملات والنسب المئوية وحالة الأحرف) تمت تغطيتها بالفعل من قبل قنوات جاهزة الإعداد ، ومع ذلك ستحتاج على الأرجح إلى شيء آخر.
وهنا القنوات غير القياسية مفيدة ، والتي تجعل من السهل إنشاء عوامل التصفية الخاصة بك وتحويل تنسيقات البيانات بالطريقة المطلوبة. انها سهلة جدا - جربه.
ما جوجل:- قنوات غير قياسية في الزاوي.
15. DecoratorsViewChild وContentChild
يتم استخدام
ViewChild و
ContentChild للتواصل بين المكونات. يتمثل جوهر الإطار الزاوي في استخدام عدة مكونات مجمعة ، مثل الفسيفساء. ومع ذلك ، لا يمكن لهذا التصميم أن يفعل أي شيء إذا كانت قطعه معزولة عن بعضها البعض.
لهذا
ViewChild ، هناك حاجة إلى
ViewChild و
ContentChild ، بعد أن تعلمت كيفية استخدامها ، ستتمكن من الوصول إلى المكونات ذات الصلة ، وهذا يبسط مهمة تبادل البيانات ، كما يتيح نقل البيانات والأحداث الناجمة عن المكونات ذات الصلة.
ما جوجل:- الديكور الزاوي ،
ViewChild الزاوي ،
- تبادل البيانات بين المكونات في الزاوي.
16. المكونات الديناميكية و "ng-template"
في الإطار الزاوي ، يتم تصميم التطبيقات على أساس المكونات. ومع ذلك ، ليست جميع المكونات ثابتة - يجب إنشاء بعضها بسرعة ، وليس تجميعها مسبقًا.
تسمى المكونات التي أنشأها التطبيق على الطاير ديناميكية. تفترض المكونات الثابتة ثباتًا معينًا: نتوقع قيمًا معينة عند المدخلات والمخرجات والسلوك القابل للتنبؤ المقابل.
يتم تقديم المكونات الديناميكية حسب الحاجة. تكون ملائمة للاستخدام عند إنشاء تطبيقات يمكنها الاستماع إلى المصادر الخارجية أو تغيير حالتها أو تمثيل ردود الفعل على الإجراءات التي حدثت على الصفحة.
ما جوجل:- مكونات ديناميكية في الزاوي ،
- مكونات ديناميكية ونانوغرام القالب.
@Host ،
@HostBinding عبارة عن ديكورات ، و
exportAs هي خاصية خاصة بديكورDirective. والغرض منها هو تمديد تأثير المعلمات التي ترتبط بها. كما أنها توفر القدرة على إنشاء قوالب تصدير صغيرة للاستخدام داخل التطبيق.
إذا كانت الأصوات أعلاه غير مفهومة ، فيجب عليك دراسة التوجيهات الزاوية وفهم الغرض منها.
@Host ،
@HostBinding and
exportAs عناصر مهمة في مفهوم التوجيهات.
ما جوجل:- أنماط استخدام التوجيه الزاوي
@Host ، @HostBinding and exportAs in Angular.
18. إدارة الدولة باستخدام NgRx
تحدد حالة التطبيق في نهاية المطاف البيانات المعروضة للمستخدم. وإذا كان التطبيق عبارة عن مجموعة من السباغيتي ، فهناك فرصة أن تصبح بنية البيانات بأكملها غير موثوق بها وفي حالة حدوث أي تغييرات فقط.
إن فهم سبب الحاجة إلى الحالات في Angular يتيح لك فهم كيف ولماذا تتصرف البيانات بهذه الطريقة وليس بطريقة أخرى.
يحتوي إطار العمل الزاوي على نظام إدارة الحالة الخاص به ، ولكن NgRx يقوم بعمل أفضل بكثير في الولايات المركزية والبيانات المرتبطة بها. قد يتم فقد البيانات في سلسلة العلاقات بين الوالدين والطفل ، ويقوم NgRx بإنشاء مستودع مركزي لهم ويزيل هذه المشكلة.
ما جوجل:- الزاوي NgRx ،
- مبادئ التدفق و الإعادة
- مبادئ إدارة الدولة الزاوي.
19. المناطق وحقن التبعية
يعد حقن التبعية مفهومًا واسع النطاق بشكل عام ، لذا إذا لم تكن في الموضوع تمامًا ، فيجب أن تفهم أكثر. داخل الزاوي ، هناك عدة طرق لحقن التبعيات بعناية ، ولكن يتم ذلك بشكل رئيسي باستخدام المُنشئ. وبالتالي ، لا يمكنك تنزيل كل شيء على التوالي ، ولكن استيراد الأكثر ضرورة - وبالتالي ، زيادة كفاءة التطبيق.
مثل حقن التبعية ، كانت هناك "مناطق" قبل الزاوي. أنها تسمح للتطبيق باكتشاف المهام غير المتزامنة. هذا مهم لأن المهام غير المتزامنة يمكن أن تغير الحالة الداخلية للتطبيق - وبالتالي العرض التقديمي. تسهل المناطق اكتشاف التغييرات.
ما جوجل:- المناطق في الزاوي ،
- حقن التبعية
- الزاوي DI.
استنتاج
الزاوي هو موضوع واسع لاستكشاف. من خلال إنشاء تطبيقات في هذا الإطار ، يمكنك تعلم الكثير ، ولكن في بعض الأحيان يكون من غير الواضح تمامًا ما الذي تبحث عنه وأين تبحث عنه. في البداية ، قد يكون من الصعب التنقل في بيئة غير مألوفة. نأمل أن يكون هذا البرنامج التعليمي القصير قد قدم بعض الأفكار عن المفاهيم التي تتجاوز البرامج التعليمية الزاوية المعتادة وسمح بإلقاء نظرة أوسع على هذا الإطار ككل.
عن المترجمتمت ترجمة المقال من قبل Alconost.
تقوم Alconost بترجمة
الألعاب والتطبيقات والمواقع بـ 70 لغة. مترجمون من اللغة الأم ، واختبار لغوي ، ومنصة سحابة مع واجهة برمجة التطبيقات ، والتعريب المستمر ، ومديري المشاريع على مدار الساعة وطوال أيام الأسبوع ، أي تنسيق لموارد السلسلة.
نحن أيضًا نصنع
مقاطع فيديو للإعلان والتدريب - للمواقع التي تبيع ، الصور ، الإعلانات ، التدريب ، المضايقون ، المستكشفون ، المقطورات لجوجل بلاي ومتجر التطبيقات.
→
اقرأ المزيد