هل تريد أن تجعل موقعك على 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 CLI
- استراتيجيات الجلب المسبق للمسار في Angular
- تغيير تحسين الرصد في Angular
- إنشاء قوائم افتراضية للقوائم الكبيرة باستخدام Angular CDK
- التحضير المسبق مع عامل خدمات Angular
- عرض المسارات مسبقًا باستخدام Angular CLI
- العرض من جهة الخادم باستخدام Angular Universal
- إضافة بيان تطبيق الويب باستخدام Angular CLI
- تدقيق تسهيل الاستخدام باستخدام برنامج الترميز