بعد تقديم إطار AngularJS بإيجاز ، تستخدم هذه المقالة مثالًا لإظهار استخدام طريقة الاستيفاء {{}} وتعليم NG-bind.
على عكس jQuery ، وهي مجرد مكتبة صفية تقوي وتبسيط التطوير الأمامي ، يعد AngularJS إطارًا كاملًا للواجهة الأمامية على شبكة الإنترنت ، وبالتالي فإن منحنى التعلم أعلى بكثير.
يعطيني AngularJS شعورًا بأنه يشبه إطار عمل جافا الربيعي ، الذي يملأ المكونات الأخرى في موضع الحاوية المركزية. يمكن للعديد من مكوناتها المدمجة بالفعل تلبية السيناريوهات العامة ، ويمكننا توسيع سيناريوهات خاصة وفقًا لفكرة الإطار.
لنبدأ بالمحتوى الأساسي:
نسخة الكود كما يلي:
<! doctype html>
<html ng-app>
<head>
<meta charset = "utf-8">
<title> NG-Bind Directive </title>
</head>
<body ng-controller = "hellocontroller">
<viv>
<p> إخراج حرفي سلسلة مباشرة </p>
مرحبا بالعالم"}}
<hr>
</div>
<viv>
<p> استخدم العناصر النائبة لإخراج متغيرات </p>
مرحبا {{تحية}}
<hr>
</div>
<viv>
<p> استخدم تعليمات ng-bind لإخراج متغيرات </p>
مرحبًا <span ng-bind = "Greeting"> </span>
<hr>
</div>
<script src = "../ lib/AngularJS/1.2.26/Angular.min.js"> </script>
<script>
وظيفة hellocontroller (نطاق $) {
$ scope.greeting = "world" ؛
}
</script>
</body>
</html>
يعلن NG-App وحدة AngularJS ويقتصر على نطاق إعلان علامات HTML.
NG-Controller هي وحدة تحكم تعلن عن AngularJs في الوحدة النمطية. يمكن أن تحتوي وحدة التحكم على أجهزة تحكم متعددة ، لكن السياق معزول ، ويجب تضييق نطاق وحدة التحكم قدر الإمكان.
{{}} هو بناء جملة الاستيفاء من AngularJs ، على غرار EL Expression $ {} من JSP. الناتج الأول هو أن "العالم" هو قيمة حرفية ، وسيتم إخراج البرنامج مباشرة ؛ الناتج الثاني هو أن التحية هي متغير محدد في وحدة التحكم ، وبالتالي فإن القيمة المقابلة للمتغير ستكون أيضًا إخراج ، وهو أيضًا العالم ؛ يستخدم الإخراج الثالث تعليمات السمة ng-bind المدمجة في AngularJs ، والنتيجة النهائية تعادل {{}} ، ولكن يرجى ملاحظة أن التعليمات = يتبعها سلسلة ، لا تكتبها بشكل غير صحيح.
يتوافق الجحيم في JS مع التعليمات على الجسم. نطاق المعلمة $ $ هي خدمة يقدمها الإطار ، تمثل سياق وحدة التحكم الحالية ، وهناك خدمات أخرى مماثلة. سيتم حقن الإطار تلقائيًا وسنفهمه ببطء لاحقًا. يحتوي الجسم على سطر واحد فقط ، ويحدد متغيرًا على نطاق $ ، وهو المتغير المشار إليه في رمز HTML.
هذه المقالة بسيطة للغاية ، ويمكنك تشغيل الرمز بعد نسخها. لاحظ أن Angular.min.js هو أحدث إصدار من الفرع 1.2. لا يمكن تشغيل نفس الرمز مع الإصدار 1.3.0. السبب غير معروف. قد يكون 1.3.0 ليس إصدار الإصدار النهائي.