هل تريد أن تجعل موقعك الإلكتروني على Angular سريع وسهل الوصول إليه بقدر الإمكان؟ لقد وصلت إلى المكان المناسب.
ما هو Angular؟
Angular هو إطار عمل لإنشاء واجهات المستخدم. ويوفر الوحدات الأساسية لمساعدتك في إعداد تطبيق قابل للصيانة وقابل للتطور بسرعة. يمكّن Angular المطوّرين من إنشاء تطبيقات منشورة على الويب أو على الأجهزة الجوّالة أو أجهزة الكمبيوتر المكتبي.
ماذا تتضمّن هذه المجموعة؟
تركز هذه المجموعة على خمسة مجالات رئيسية لتحسين تطبيق Angular:
- تحسين أداء تطبيقك لزيادة الإحالات الناجحة وتفاعل المستخدمين
- تحسين موثوقية تطبيقك على الشبكات الضعيفة من خلال تخزين الأصول مؤقتًا لدى مشغّل خدمات Angular
- جعل تطبيقك قابلاً للاكتشاف لمحرّكات البحث وبرامج تتبُّع وسائل التواصل الاجتماعي باستخدام العرض المُسبَق والعرض من جهة الخادم
- جعل تطبيقك قابلاً للتثبيت لتوفير تجربة مستخدم مشابهة لتطبيقات iOS/Android
- تحسين تسهيل الاستخدام لتطبيقك لجعله سهل الاستخدام ومفهومًا لجميع المستخدمين
ستصف كل مشاركة في المجموعة الأساليب التي يمكنك تطبيقها مباشرةً على تطبيقاتك الخاصة.
ما العناصر غير المتوفّرة في هذه المجموعة؟
تفترض هذه المجموعة أنك على دراية بـ Angular وTypeScript. في حال عدم الشعور بالثقة بعد، يمكنك مراجعة وثائق TypeScript ودليل بدء استخدام Angular على angular.io.
بدء مشروع
تتيح لك واجهة سطر الأوامر في Angular (CLI) إعداد تطبيق Angular بسيط من جهة العميل بسرعة. تحتوي هذه المشاركة على مقدمة موجزة عن واجهة سطر الأوامر، وتظهر مشاركات أخرى في المجموعة كيفية إضافة المزيد من الميزات المتقدمة مثل دعم العرض والنشر من جهة الخادم.
إعداد واجهة سطر الأوامر
للبدء، ثبِّت واجهة سطر الأوامر على مستوى العالم وتأكَّد من استخدام أحدث إصدار من خلال تنفيذ الأوامر التالية:
npm i -g @angular/cli
ng --version
تأكد من أن الأمر الأخير أخرج الإصدار 8.0.3 أو إصدار أحدث.
من ناحية أخرى، إذا كنت لا تريد تثبيت واجهة سطر الأوامر على مستوى العالم، يمكنك تثبيته على الجهاز وتشغيله باستخدام الأمر npx:
npm i @angular/cli
npx ng --version
إنشاء المشروع
لإنشاء تشغيل مشروع جديد:
ng new my-app
سينشئ هذا الأمر الملفات الأولية وبنية المجلدات لتطبيقك ويثبّت وحدات العقدة التي يحتاجها.
بعد اكتمال عملية الإعداد بنجاح، ابدأ تطبيقك بتشغيل:
cd my-app
ng serve
ومن المفترض أن تتمكّن الآن من الوصول إلى تطبيقك على http://localhost:4200.
ما هي الخطوات التالية؟
ستتعرّف في بقية هذه المجموعة على كيفية تحسين أداء تطبيق Angular وتحسينه وتحسين محرّكات البحث. إليك ما يتم تناوله:
- تقسيم الرمز على مستوى المسار بتنسيق Angular
- ميزانيات الأداء باستخدام واجهة سطر الأوامر Angular
- استراتيجيات الجلب المسبق للمسار في Angular
- تحسين رصد التغييرات في Angular
- محاكاة القوائم الكبيرة باستخدام Angular CDK
- التحضير المسبق مع مشغّل خدمات Angular
- عرض المسارات مسبقًا باستخدام Angular CLI
- العرض من جهة الخادم باستخدام Angular Universal
- إضافة بيان تطبيق ويب باستخدام Angular CLI
- تدقيق تسهيل الاستخدام باستخدام أداة تحليل الرموز