هل تريد جعل موقعك الإلكتروني المستند إلى Angular سريعًا وسهل الاستخدام قدر الإمكان؟ لقد وصلت إلى المكان المناسب.
ما هو Angular؟
Angular هو إطار عمل لإنشاء واجهات مستخدم. وتوفّر هذه البنية وحدات أساسية لمساعدتك في إعداد تطبيق قابل للصيانة وقابل للتوسيع بسرعة. يمكّن Angular المطوّرين من إنشاء تطبيقات منشورة على الويب أو على الأجهزة الجوّالة أو أجهزة الكمبيوتر المكتبي.
ما هي العناصر المضمّنة في هذه المجموعة؟
تركّز هذه المجموعة على خمسة مجالات رئيسية لتحسين تطبيق Angular:
- تحسين أداء تطبيقك لزيادة الإحالات الناجحة وتفاعل المستخدمين
- تحسين موثوقية تطبيقك على الشبكات ذات الأداء المنخفض من خلال ذاكرة التخزين المؤقت المُسبَق لملفات الأصول باستخدام مشغّل خدمات Angular
- جعل تطبيقك قابلاً للاكتشاف لمحرّكات البحث وبرامج تتبُّع وسائل التواصل الاجتماعي باستخدام العرض المُسبَق والعرض من جهة الخادم
- إتاحة تثبيت تطبيقك لتقديم تجربة مستخدم مشابهة لتجربة استخدام تطبيق iOS/Android
ستصف كل مشاركة في المجموعة تقنيات يمكنك تطبيقها مباشرةً على تطبيقاتك.
ما هي العناصر غير المضمّنة في هذه المجموعة؟
تفترض هذه المجموعة أنك على دراية بـ Angular وTypeScript. إذا لم تكن واثقًا من استخدامهما بعد، يمكنك الاطّلاع على مستندات TypeScript ودليل البدء باستخدام Angular على angular.io.
بدء مشروع
تتيح لك واجهة سطر أوامر Angular (CLI) إعداد تطبيق Angular بسيط من جهة العميل بسرعة. يقدّم هذا المنشور مقدّمة قصيرة عن واجهة برمجة التطبيقات، بينما توضّح المشاركات الأخرى في المجموعة كيفية إضافة ميزات أكثر تقدمًا، مثل العرض من جهة الخادم ودعم عمليات النشر.
إعداد واجهة سطر الأوامر
للبدء، ثبِّت "واجهة برمجة التطبيقات لنظام التشغيل Linux" على مستوى النظام وتأكَّد من تثبيت أحدث إصدار من خلال تنفيذ الأوامر التالية:
npm i -g @angular/cli
ng --version
تأكد من أن الأمر الأخير أخرج الإصدار 8.0.3 أو إصدار أحدث.
بدلاً من ذلك، إذا كنت لا تريد تثبيت واجهة برمجة التطبيقات (CLI) على مستوى النظام، يمكنك تثبيتها على الجهاز وتشغيلها باستخدام الأمر 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
- العرض من جهة الخادم باستخدام Angular Universal
- إضافة بيان تطبيق ويب باستخدام Angular CLI