SPA باستخدام AngularJS



منشور المدونة هذا هو مقدمة موجزة عن بناء SPA باستخدام AngularJS. يحاول تزويدك بالمعلومات اللازمة لدمج مكونات SPA في التطبيقات.

اليوم ، أصبح AngularJS أحد أكثر أطر التطوير شيوعًا نظرًا لقدرته على مساعدة المطورين على إنشاء تطبيقات صفحة واحدة (SPA) بسهولة. في تطبيقات الويب التقليدية ، يبدأ العميل (المستعرض) قناة اتصال مع الخادم عن طريق طلب صفحة. يستجيب الخادم من خلال معالجة الطلب وإرسال HTML للصفحة مرة أخرى إلى العميل. إذا طلب المستخدم صفحة جديدة ، يرسل الخادم صفحة HTML أخرى. حتى إذا طلب العميل تغييرًا بسيطًا ، على سبيل المثال نموذجًا يحتوي على تفاصيل أساسية ، يجب تحميل الصفحة بأكملها مرة أخرى بواسطة الخادم وإرسالها مرة أخرى إلى العميل.

طلبات HTML و Ajax

في تطبيقات الصفحة الواحدة ، يتم تحميل الصفحة بأكملها في لقطة واحدة ، ويتم إجراء الاتصالات اللاحقة بواسطة الخادم باستخدام طلبات Ajax. يجب على المتصفح تحديث الجزء الذي تم تغييره من الصفحة فقط ولا داعي لإعادة تحميل الصفحة بأكملها في كل مرة يقدم فيها المستخدم طلبًا جديدًا.
نظرًا لأن نهج SPA يقلل من الوقت الذي يستغرقه الخادم للاستجابة لطلبات المستخدم ، فإن تطبيقات الويب تعمل بشكل أسرع ، وتستخدم طاقة حوسبة أقل ، وتسمح لمطوري واجهة المستخدم (UI) بإنشاء صفحات ويب أكثر جاذبية ورشاقة.





إنشاء صفحات شل

تشير 'الصفحة الفردية' في SPA إلى صفحة shell التي تستجيب لطلبات البحث في شكل HTML أو CSS أو JavaScript. يتم عرض صفحة shell بشكل غير متزامن باستخدام HTML ، مما يلغي الحاجة إلى الانتقال ذهابًا وإيابًا إلى الخادم. لا تحتاج صفحة shell سوى مرجع إلى مكتبة AngularJS JavaScript وتوجيه ng-view (حاوية افتراضية تسمح لمطوري واجهة المستخدم بالتبديل بين طرق العرض) لإخبار AngularJS بالمكان المطلوب عرض صفحات المحتوى فيه على صفحة shell.
ضمن نفس الصفحة 'المنفردة' ، تسمح AngularJS للمطورين بتقديم طرق عرض متعددة مضمنة في نفس عنوان URL. يمكن أن تظهر مجموعات مختلفة من طرق العرض - واحدة تلو الأخرى - داخل نفس صفحة shell ، ويتم تحميل كل عرض ديناميكيًا عندما يقوم المستخدم بالتمرير خلال الصفحة.

SPA-using-AngularJS-multiple-views



يسمح توجيه AngularJS المدمج - تطبيق ng - للمطورين بتهيئة التطبيق ، مع خيار إضافة توجيهات الجهات الخارجية أيضًا. من ناحية أخرى ، يسمح لك توجيه النموذج ng بإضافة تعبيرات ربط البيانات في الذاكرة. الق نظرة هنا:

كيفية البحث عن حرف في جافا

على الصعيد العالمي ، اعتمد المطورون SPA باستخدام AngularJS وفي جميع الاحتمالات ، من المتوقع أن يستمر هذا الاتجاه لفترة من الوقت.



لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات وسنعاود الاتصال بك.

المنشورات ذات الصلة: مهنة تطوير الويب الناجحة مع AngularJS