مقدمة في AngularJS

في الماضي عندما كنا نسأل مطور ويب لتطوير تطبيق ويب فإنه سيسارع لجمع مكتبات جافاسكربت التي يتقنها ويبدأ العمل، وإذا كان العمل يحتاج إلى التواصل مع مخدم فإنه سوف يستعين بإحدى لغات البرمجة التي يفضلها لتساعده. ولكن دعني أخبرك بسر: لقد تطور الويب يا صديقي، وحان الوقت لكي تتعرف إلى أحد عمالقته!

pic_angular

ما هي 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) للمحتوى. فكل ما عليك فعله هو تغير جزء في رابط الصفحة ليتم تحميل المحتوى الجديد وعرضه دون أن يقوم المتصفح بتحديث الصفحة بالكامل.

فمثلاً: إذا قمت بالنظر لرابط صندوق الوارد في Gmail سوف تجد أنه مشابه للتالي:
https://mail.google.com/mail/u/0/#inbox
هل لاحظت inbox# في الرابط السابق , هذا ما جعل Gmail يعرض صندوق الوارد، الآن إذا قمت بتغير inbox# إلى trash# سوف يقوم Gmail يعرض سلة المهملات.

طبعاَ في كل ما سبق لن يتم تحديث الصفحة بأكملها، وهذا هو المقصود من 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.

حيان أبو فخر

مطور ويب سوري. عاشق للموسيقى والبرمجة والكوميديا الارتجالية.

مواضيع الكاتبموقع الكاتب

لمتابعة الكاتب:
TwitterFacebook

4 thoughts on “مقدمة في AngularJS

  1. مقالة رائعة وإستفدت كثيرا من دروسك وصراحة أول مرة أسمع بAngularJS
    لان html كان مقتصر فقط على إنشاء قوالب بسيطة بدون اوامر وتطويرات معقدة كالموجودة في php
    شكرا لكم

  2. السلام عليكم ورحمة الله وبركاته وبعد
    كل الشكر والتقدير لك اخي الفاضل حيان أبو فخر على هذه المقالة الرائعة.

    وبقدر شكري لك أنا نادم أشد الندم على حالنا المتهالك من حيث الاهتمام ب”صناعة ومعرفة” التقنية لا باستخدامها واستهلاكها فقط، فأنا لا أكاد أصدق أن مقالة بهذه الجودة لم تحصل إلا على ثلاثة تعليقات فقط.

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *