مع مثال توضيحي Angular نبذة عن

06/01/2019 December 30th, 2021 line, tip, web-dev

Tags:

You May Also Like

في البرمجة Error و Warning ما الفرق بين
الأخطاء هي المشاكل أو الأعطال التي تحدث في البرنامج والتي تجعل سلوك البرنامج غير طبيعي ، ويمكن للمطورين المتمرسين أيضًا ...
Read More
في البرمجة Error و Warning ما الفرق بين
Open Source و Closed Source الفرق بين
شرح الفرق بين البرامج مفتوحة المصدر Open Source و البرامج مغلقة المصدر Closed Source. 🔸 ماهي البرامج مفتوحة المصدر؟ هي ...
Read More
Open Source و Closed Source الفرق بين
pl/sql مقدمة بسيطة في
السلام عليكم المقال ستكون مقدمة بسيطة عن ال  pl/sql هتكون المقدمة بسيطة دي  هنتعرف فيها على : اولا :ماهى pl/sql ...
Read More
pl/sql مقدمة بسيطة في

ال Angular هي عبارة عن مكتبات تم بناءها من لغة java script وتعمل تحت اطار java script ويتم كتابة اكواد Angular ضمن وسوم HTML وقد تم الإعلان عنها من شركة Google سنة 2009 وتم اصدار النسخة 1.0 في سنة 2012
• لاستخدام مكتبات Angular مع وسوم HTML يجب عليك اولآ تضمين المكتبة التالية كالتالي
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
حيث يتم عن طريق هذا الوسم استدعاء مكتبات Angular لاستخدامها مع وسوم HTML

مثال بسيط : مع هذا المثال سوف تشاهد كيفية تكامل Angular مع وسوم HTML
عندما تريد ان تكتب تعليمات Angular ضمن وسوم HTML ينبغي عليك تعريف الجذر ng-app وهذا سيكون العنصر الأساسي بحيث لايمكنك سوى الحصول الا على جذر واحد في مستند HTML
الخاصية الثانية ng-model : ترتبط هذه الخاصية بعناصر تحكم HTML مثل (Text – combo – list ) وهكذا بحيث تستطيع عن طريق خاصية ng-model الحصول على القيمة من عناصر HTML
الخاصية الثالثة ng-bind تستطيع من خلالها الحصول على القيمة من داخل العناصر وعرضها على صفحة الويب
الكود التالي يوضح كيفية بناء مكتبات Angular مع HTML
في هذا الكود يتم بناء نموذج يحتوي على مربع نص ثم نقوم بربط مربع النص بالخاصية ng-mode التي سوف ترسل البيانات من مربع النص الى الخاصية ng-bind التي ستقوم بعرضه مباشرة في صفحة الويب

<!DOCTYPE html>
<html>
<scriptsrc=”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>

Related Posts:

‏حلول تكنولوجيا المعلومات - Information Technology Solutions‏

Last Article

error: Content is protected !!