كما ذكرنا مسبقاً بأنها مكتبة كتبت بلغة الـ JavaScript لتكون إطار عمل و مكتبة ثابتة الأداء لتطوير تطبيقات ويب قوية جداً تعمل بكفائة عالية, وكما لاحظنا في إستهلال الدرس الأول أنها إمتداد للتعامل مع HTML Tags كونها تمرر نفسها عن طريق ng-directives وأن لم يفتك فقد قمت بكتابة تعابير مختلفة مبوبة بالجزء ng-
ng-app
ng-model
ng-bind
سأتطرق لشرح الثلاثة معاً مع توضيح الإستخدامات العامة للأوسمة الثلاثة (أوسمة=Tags) و الأخير والذي قد تم تخصيصة باللون الأحمر لتمييز عدمية إستخدامه في الدرس الأول (الإستهلال) .
<div ng-app="">
<!-- Content HTML + AngularJS -->
</div>
كما ذكرنا في المثال الأول أن هذا يستخدم لتتويج فتح التطبيق أو بالأحرى لإعلام المكتبة الخاصة بتفسير AngularJS بأن من هنا يبتداء تفسير نصوص AngularJS وهو ما يجعل المكتبة تعامله وكأنه تطبيق منفصل وهذه من مزايا الـ AngularJS ومن الأمر التي جعلت هذه المكتبة تتطور لمراحل شاسعة جداً سنتحدث عنها في دروس مستقبلية عن تطوير تطبيقات Native Applications عن طريق Angular.
لنتحدث في الأمر المفيد وبإختصار:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
نرى الوسم (Tag) ng-model في يستخدم في في نموذج الكتابة من نوع نص وهذا الوسم يعطى للتحكم بالمدخل أو النص الذي سيجلب لتتم معالجته كمخرج بياني بحسب ما يلزم التطبيق.
بالنسبة للوسم (Tag) ng-bind يقوم بعرض العنصر المطبق عليه التغيرات الموصوفة في التطبيق ونلاحظ أنه قد تم جلبه بنفس الأسم الذي سلف ذكره في الوسم ng-model وهنا يجب أن يتساوى الإسم في نموذج الإدخال و نموذج العرض لتمييز العنصر المعالج و المقصود.
هذا لايزال شرح ضمن المدخل العام للتقنية, سوف أقوم بشرح المزيد في الدرس القادم و شرح مفاهيم أوسع في المدخل الذي لازلنا قيد التوسع فيه نظراً لكثرة المفاهيم التي يجب شرحها لضمان إنتقالية فعالية في تسلسل الشرح مستقبلاً.
رابط مرجع الطرح
http://algahazi.me/2018/04/18/angular-from-web2app-lesson2/