تعبيرات AngularJS التطبيق الأول لـ AngularJS

تعليمات AngularJS

تعليمات AngularJS تُستخدم لتوسيع HTML. إنها تعليمات خاصة تبدأ بـ ng-. دعونا نتحدث عن هذه التعليمات–

تعليمات ng-app −هذه التعليمة تبدأ تطبيق AngularJS.
تعليمات ng-init −هذه التعليمة تُستخدم لتحديد بيانات التطبيق.
تعليمات ng-model −هذه التعليمة تعرف نموذج المتغيرات المستخدمة في AngularJS.
تعليمات ng-repeat −هذه التعليمة تكرر عناصر HTML لكل عنصر في المجموعة.

تعليمات ng-app

تعليمات ng-app تبدأ تطبيق AngularJS. إنها تعرف العنصر الجذر. عند تحميل صفحة تحتوي على تطبيق AngularJS، يتم تحفيز أو تشغيل التطبيق تلقائيًا. تُستخدم أيضًا لتحميل أنواع مختلفة من وحدات AngularJS في تطبيق AngularJS. في هذا المثال، نستخدم خاصية ng-app لـ عناصر <div> لتعريف تطبيق AngularJS الافتراضي.

<div　ng-app　=　"">
　　　...</div>

تعليمات ng-init

تعليمات ng-init تُستخدم لتحديد بيانات تطبيق AngularJS. تُستخدم لتخصيص قيم المتغيرات. في هذا المثال، قمنا بتحديد مجموعة من البلدان. نستخدم تعريف JSON لتعريف مجموعة البلدان/المناطق.

<div　ng-app　=　""　ng-init　=　"countries　=　[{locale:'en-US',name:'United　States'},　
　　　{locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]
　　　...</div>

تعليمات ng-model

تعليمات ng-model تعرف نموذج/المتغيرات المستخدمة في تطبيق AngularJS. في هذا المثال، نحدد نموذجًا باسمnameنموذج.

<div　ng-app　=　"">
　　　...
　　　<p>ادخل اسمك: <input type="text" ng-model="name"></p></div>

تعليمات ng-repeat

تعليمات ng-repeat تكرر عناصر HTML لكل عنصر في المجموعة. في هذا المثال، نمر على مجموعة البلدان/المناطق.

<div　ng-app　=　"">
　　　...
　　　<p>قائمة البلدان مع اللغة المفضلة:</p>
　　　
　　　<ol>
　　　　　　<li ng-repeat="country in countries">
　　　　　　　　　{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
　　　　　　</li>
　　　</ol>
</div>

مثال عبر الإنترنت

هذا المثال يظهر استخدام جميع التعليمات المذكورة أعلاه.

testAngularJS.htm

مثال

<html>
　　　<head>
　　　　　　<title>تعليمات AngularJS</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h1>مثال على تطبيق</h1>
　　　　　　
　　　　　　<div　ng-app　=　""　ng-init　=　"countries　=　[{locale:'en-US',name:'United　States'},　
　　　　　　　　　{locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]　
　　　　　　　　　<p>أدخل اسمك: <input type="text" ng-model="name"></p>
　　　　　　　　　<p>مرحبًا <span ng-bind="name"></span>!</p>
　　　　　　　　　<p>قائمة البلدان مع المناطق:</p>
　　　　　　
　　　　　　　　　<ol>
　　　　　　　　　　　　<li ng-repeat="country in countries">
　　　　　　　　　　　　　　　{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
　　　　　　　　　　　　</li>
　　　　　　　　　</ol>
　　　　　　</div>
　　　　　　
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>

اختبار لرؤية‹/›