ما هي AngularJS و أهم ميزات مقدمة في AngularJS
في الماضي عندما كنا نسأل مطور ويب لتطوير تطبيق ويب فإنه سيسارع لجمع مكتبات جافاسكربت التي يتقنها ويبدأ العمل، وإذا كان العمل يحتاج إلى التواصل مع مخدم فإنه سوف يستعين بإحدى لغات البرمجة التي يفضلها لتساعده. ولكن دعني أخبرك بسر: لقد تطور الويب يا صديقي، وحان الوقت لكي تتعرف إلى أحد عمالقته!
ما هي AngularJS؟
أنها بيئة عمل قادرة على توسيع لغة HTML عن طريق تعليمها عناصر جديدة، مما يجعلها مناسبة لبناء تطبيقات ويب عصرية كبيرة ومعقدة (Gmail على سبيل المثال) فذلك ليس بالعمل المستحيل، كن على ثقة .
بإمكانك إنشاء عناصر HTML جديدة، فعلا سبيل المثال يمكن إنشاء عنصر جديد <date-picker/> يقوم بإضافة مكون متكامل لاختيار التاريخ.
أهم ميزات AngularJS
1 – مزامنة البيانات (Data-Binding)
في الحقيقة هذه الميزة هي من أهم الميزات وأكثرها متعة، وهي تعنى بمزامنة المعلومات بين المتغيرات (Varaiables) في جافا سكربت و عرضها في HTML.
فعلا سيبل المثال إذا كان هنا متغير var x = 5 يتم عرضه في مكان في صفحة HTML، وتغيرت قيمة هذا المتغير لتصبح 6 فإن مكان عرض المتغير في صفحة HTML سوف يتم تحديثه تلقائياُ ليعكس القيمة الجديدة للمتغير.
2 – هيكلة منظمة للمشروع
لا تهتم الغالبية العظمة من المبرمجين بكيفية تنظيم ملفات المشروع والأكواد المكتوبه به، فكل ما عليهم فعله هو كتابة الشيفرة ثم تحديث المتصفح، وإذا كان كل شيئ على ما يرام سينتقلون للعمل على شيئ آخر.
ولكن إذا كنت ممن يملكون الخبرة في هذا المجال فعلى الأرجح أنك تعلم أن هذا سيئ على المدى الطويل للمشروع وسوف يجعلك ذلك تترد في إجراء أي تحديث لما كنت قد قمت بكتابته خوفاً من أن تجعل الأمور تسوء. ولكن Angular توفر لك أفضل من هذا بكثير، بحيث تستطيع تنظيم الأكواد في لبنات (Modules) وتسمح لك بتجربة أكوادك باستخدام أي بيئة اختبار تريدها (Jasmine على سبيل المثال) لتحصل على تطبيق ذي أساسات قوية، قادر على الصمود على المدى الطويل للمشروع والتغيرات التي يمكن أن تحدث فيه دون أي قلق. أليس هذا ما يجب توقعه من استخدام بيئات العمل؟
3 – دعم الـ Rotuing
التطبيقات ذات الصفحة الواحدة (Single Page Apps) منتشرة في كل مكان اليوم في عالم الويب، أنها تجعلك تشعر بأنك تقوم باستخدام التطبيق من سطح مكتبك وليس من الويب. ومن أشهر أمثلتها Gmail و Twitter وغيرها الكثير طبعاً. وكل ذلك بفضل القدرة على التحميل الغير متزامن (asynchronous loading) للمحتوى. فكل ما عليك فعله هو تغير جزء في رابط الصفحة ليتم تحميل المحتوى الجديد وعرضه دون أن يقوم المتصفح بتحديث الصفحة بالكامل.
طبعاَ في كل ما سبق لن يتم تحديث الصفحة بأكملها، وهذا هو المقصود من Routing الذي تدعمه Angular بسهولة ومرونة كبيرتين.
4 – Templating
إن Angular تقوم باستخدام HTML كنظام قوالب (Templating)، فبذلك لن تحتاج لتعلم لغة جديدة وسيستطيع المطورون و المصمون أن يعملوا باستقلالية.
فمثلاً يمكن أن يقوم المطور بتطوير خوارزمية غاية في التعقيد لتعيد في النهاية قيمة ولتكن X. إن المصمم في هذا الحالة ليس بحاجة لمعرفة ما حدث للحصول على هذه القيمة الرهيبة ولكن ما زال باستطاعته استخدامها في أي صفحة HTML بالشكل الآتي:
{{ X }}5 – مدعومة من Google
قيل أن تبدأ في استخدام أي تقنية جديدة في مشاريع حقيقة عليك دائماً الاطلاع على المجتمع الذي يعمل على تطوير هذه التقنية للتأكد من أنه يمكنك الحصول على المساعده والدعم. وإن Angular هو مشروع مفتوح المصدر مدعوم من قبل فريق من غوغل ومجتمع كبير من المطورين الذين يعملون على تطويره كل يوم ليصبح أفضل.
تنصيب Angular
كجميع مشاريع جافاسكربت الحديثة يمكن تنصيبها بعدة طرق، والأفضل طبعاً هو باستخدام Bower، ولكن بإمكانك دائماً استخدام الطرق التقليدية عن طريق التحميل من هنا ومن ثم ضم المكتبة لمشروعك أو بإضاقة السطر التالي داخل عنصر <head> في صفحة HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
مثال على مزامنة البيانات في Angular
أفضل الطرق للتعلم هو بمثال جيد. على الأقل هذا ما أؤمن به!
سوف أقوم بهذا المثال ببناء تطبيق بسيط يقوم بعرض الصورة الشخصية للمستخدم من فيس بوك. يمكن تجربة التطبيق مباشرة على الرابط التالي
See the Pen qEGJBy by Hyyan Abo Fakher (@hyyan) on CodePen.
بداية عليك معرفة أن فيس بوك تسمح لك بالحصول على صورة أي مستخدم عن طريق الرابط التالي:
https://graph.facebook.com/[User ID]/picture?type=normal
كل ما عليك فعله هو استبدال [User ID] بمعرف المستخدم على فيس بوك.
والآن لنستعرض الكود لنقوم بشرحه بعد ذلك :
<!doctype html><html dir="rtl" ng-app><head><meta charset="utf-8"><title>مثال على مزامنة البيانات</title><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script></head><body><div><p>قم بإدخال معرف المستخدم :</p><input type="text" ng-model="fbID" /></div><div><img ng-src="https://graph.facebook.com/{{fbID}}/picture?type=normal"/></div></body></html>
كما ترى إن المثال عبارة عن صفحة HTML بسيطة جداً. يبدأ بتحديد المجال الذي يسمح لـ AngularJS بمراقبته عن طريق استخدام السمة ng-app. ومن الجدير بالذكر أنه ليس بالضروري لـ AngularJS أن يقوم بمراقبة كامل التطبيق بل بإمكانه مراقبة جزء منه وذلك يتحدد بمكان ظهور السمة ng-app، وهذه ميزة أخرى في Angular حيث بإمكانك استخدامها مع بيئات عمل أخرى دون مشاكل.
ثم نقوم بتحديد متغير fbID الذي يقوم بحفظ معرف المستخدم على فيس بوك عن طريق استخدام السمة ng-model، هذه السمة ستسمح بمراقبة تغيرات المتغير وتحديث عرضه في أي مكان يظهر فيها بالصفحة، ففي كل مره تكتب فيها في مربع الإدخال يتم تحديث قيمة المتغير fbID تلقائياً وبالتالي أي مكان يتم عرض المتغير فيه.
أخيرأً نقوم بعرض الصورة باستخدام الرابط السابق الذكر ولكن بدلاً من استخدام السمة src قمنا باستخدام السمة ng-src التي تسمح لنا باستخدام المتغير fbID في الرابط كما ترى ليتم تحديث الصورة عند تحديث قيمة المتغير.
كما ترى أن التطبيق يخلو من أكواد جافا سكربت حقيقية أو لنقل بالمعنى التقليدي لأكواد جافاسكربت، ولكننا استطعنا إنجاز تطبيق إذا ما قمنا بإعادة كتابته باستخدام jQuery على سبيل المثال لاحتجنا لأكثر من ذلك من جهد وأسطر.
الملخص
AngularJS بيئة عمل ضخمة لبناء تطبيقات ويب من جميع الأحجام، وبالتأكيد فإن هذه المقالة المتواضعة لم تلق الضوء على Angular بشكل كامل، حيث أنها تحتوي على ميزات تحتاج لكتاب لعرضها فقط دون الخوض في تفاصيلها ولكن أرجو أن يكون في هذه المقالة قليل من التشجيع لمن يرغب في تعلم Angular.
