إستهلال:
تطورت تقنيات الويب إرتباطاً بتطور تقنيات الحاسوب و مع هذه التطورات ظهر لنا أشكال كثيرة من التقنيات المتخصصة في صناعة الويب وبالتساير مع مبادئ web 2.0 الذي طرح نسق جديد لمطوري الويب و أخرجه من حيز الصفحات الثابتة أو حتى ديناميكية الإنشاء بمساعدة JavaScript إلا أن الثبات في التصميم و التطوير بقيا مطلب أساسي لدى مجتمع مطوري الويب ومن هذا المنطلق حصلنا على تقنيات جديدة ذات كفائة عالية جداً مبنية على JavaScript وهي تقنيات الـAjax التي بنية على JavaScript و مع تعديلات جوهرية على DOM الخاصة بمفسرات HTML لنحصل على تقنيات أكثر تطور وقوة و ثبات من سابقتها و مثلاً على ذلك JQuery و ما سنتحدث عنه بالتفصيل ونشرحه في دروس دورية و مقسمة AngularJS.
مدخل:
لمحة عن Angular
إبتداء مشروع عمل هذا الإطار التقني منذ مطلع 2009 من قبل أحد مطوري شركة Google و إبتداء كمشروع فردي من قبل المطور والهاوي العامل لدى Google السيد / ميسكو هيفيري Mr. Misko Hevery وقد تم إصدار أول نسخة في عام 2012 والتي كانت نسخة بإصدار 1.0 و التي لاقت قبولاً كبير من الشركة الراعية له Google وتم تبني و دعم التطبيق و إطار العمل بشكل كامل من قبلها وحتى يومنا هذا لاتزال هي الراعي و الداعم الرسمي بإدارة السيد / ميسكو هيفيري.
الجانب التقني
تعتبر تقنية AngularJS مختلفة عن جميع التقنيات المكتوبة على نسق Ajax بل إنها تمتاز بثبات أكبر من غيرها ولكن هذا لايعد الأمر الوحيد الذي تنفرد به! بل إنها تعتبر إمتداد للـ HTML بشكل مباشر ولا تعتمد في تطبيقها على قراءة تفاصيلCSS بشكل أساسي, بل أن أمر الـ CSS متروك لتعديل تصميم نص HTML و أيضاً تعتبر تقنية ممتازة لصناعة تطبيق كامل منفصل كملف وحيد SPA/Single Page Application و الأجدر بالذكر من كل هذا إنها تقنية سهلة التعلم و الإكتساب.
سنتعلم سوياً إستخدام AngularJS في سلسلة دروس متتالية منقسمة إلى إطروحات منفردة, لن أطيل في الطرح و لا الأمثلة البرمجية كذلك و سأدع النقاش لمساحة التعليقات لإثراء المحتوى وتفصيله أكثر, سأقوم بإرفاق تعليق عن الدرس القادم.
قبل بداء هذا الدرس يجب أن تكون مُلم بأساسيات ثلاث تقنيات:
- HTML
- CSS
- Java Script
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name : <i*nput type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
لاحظ للسطور المشار أليها بالألوان, قمنا بطلب المكتبة الخاصة التي ستساعدنا على أداء المهام من سيرفرات googleapis وستجد لديهم نسخ للعديد من مكاتب ajax الأخرى, ثم قمنا بتعريف تطبيق في محتوى element div عن طريق كتابة
<div ng-app="">
</pre>
[p] وهنا نقوم بالتركيز على هذا الـ element لتفسير العمليات و المعطيات و الوظائف الخاصة بـ AngularJS.
قمنا بإضافة element خاص في نموذج input تحت مسمى
<input type="text" ng-model="name">
</pre>
[p]وفي أسفله قمنا بكتابة element h1 والذي يحتوي على رمز غريب {{name}} و هو يُفسر من قبل angular كمتغير يجلب محتواه من السطر السابق في محتوى النموذج حوى أيضاً على model بأسم name وهنا نرى أن المكتبة ستقوم بتطبيق النص المكتوب في حقل النموذج على المتغير {{name}} بشكل فوري وسلس
<h1>Hello {{name}}</h1>
</pre>
[p]هذا التطبيق الأول وبإعتقادي أنه يشرح الكثير و الكثير من إستخدام AngularJS و سأقوم بتفصيل بعض الأشياء التي لم ذكرتها فالمثال ولم أفصلها فالشرح.