وحدة AngularJS
تحدد الوحدة التطبيق.
الوحدة النمطية هي حاوية لأجزاء مختلفة من التطبيق.
الوحدة النمطية هي حاوية لوحدة تحكم التطبيق.
عادة ما تنتمي وحدة التحكم إلى وحدة نمطية.
إنشاء وحدات
يمكنك إنشاء وحدات من خلال وظيفة الزاوي.
<div ng-app = "myapp"> ... </div> <script> var app = Angular.Module ("myapp" ، []) ؛ </script>تتوافق المعلمة "myApp" مع عنصر HTML الذي ينفذ التطبيق.
يمكنك الآن إضافة وحدات التحكم ، والتعليمات ، والمرشحات ، وما إلى ذلك في تطبيق AngularJS.
إضافة وحدة تحكم
يمكنك استخدام توجيه NG-Controller لإضافة وحدة تحكم التطبيق:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> {{firstName + "" + lastName}}} </div> <script> var app = Angular.Module ("myApp" ، [] "doe" ؛}) ؛ </script> </body> </html>تأثير الجري:
جون دو
يمكنك معرفة المزيد عن وحدات التحكم في ChangularJS Controller Chapter.
أضف الأمر
يوفر AngularJS الكثير من الإرشادات المدمجة التي يمكنك استخدامها لإضافة وظائف إلى تطبيقك.
للحصول على تعليمات كاملة ، يرجى الرجوع إلى دليل مرجع AngularJS.
بالإضافة إلى ذلك ، يمكنك استخدام الوحدات النمطية لإضافة تعليماتك الخاصة لتطبيقك:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js runoob-diRective> </viv> <script> var app = Angular.Module ("myapp" ، []) ؛ app.directive ("runOobDirective" ، function () {return {template: "لقد قمت بإنشائها في مُنشئ التوجيه!"} ؛نتائج التشغيل:
لقد أنشأته في مُنشئ التوجيه!
يمكنك معرفة المزيد عن التوجيهات في ChangularJS Chiterives Chapter.
يتم تضمين الوحدات النمطية ووحدات التحكم في ملفات JS
عادة ، تتضمن تطبيقات AngularJS وحدات وحدات تحكم في ملفات JavaScript.
في المثال التالي ، يحتوي "myapp.js" على مقررة وحدة التطبيق ، ويحتوي ملف "myctrl.js" على وحدة التحكم:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> {{firstName + "" + lastName}} </div> <script src = "myapp.js"> </script> <script src = "myctrl.js"> </script> </html>نتائج التشغيل:
جون دو
myapp.js
var app = Angular.module ("myapp" ، []) ؛
ملاحظة في تعريف الوحدة النمطية ، يتم استخدام المعلمة [] لتحديد تبعيات الوحدة.
تشير الأقواس [] إلى أن الوحدة لا تحتوي على تبعيات. إذا كان هناك تبعية ، فسيتم كتابة اسم التبعية في الأقواس.
myctrl.js
App.Controller ("myctrl" ، function ($ scope) {$ scope.firstName = "John" ؛ $ scope.lastname = "doe" ؛}) ؛تؤثر الوظائف على مساحة الاسم العالمية
يجب تجنب الوظائف العالمية في JavaScript. لأنها يتم الكتابة عليها بسهولة بواسطة ملفات نصية أخرى.
تتيح وحدة AngularJS أن تكون جميع الوظائف محاطًا بموجب هذه الوحدة ، وتجنب هذه المشكلة.
متى سيتم تحميل المكتبة؟
ملاحظة: في مثيلنا ، يتم تحميل جميع مكتبات AngularJS على رأس مستند HTML.
بالنسبة لتطبيقات HTML ، يوصى عمومًا بوضع جميع البرامج النصية في أسفل عنصر <Body>.
سيؤدي ذلك إلى زيادة سرعة تحميل صفحة الويب ، لأن تحميل HTML لا يخضع لتحميل البرنامج النصي.
في مثيلات AngularJS المتعددة ، سترى أن مكتبة AngularJS يتم تحميلها في منطقة <Head> من المستند.
في مثيلنا ، يتم تحميل AngularJS في عنصر <head> ، لأنه لا يمكن إجراء مكالمة إلى Angular.module إلا بعد تحميل المكتبة.
حل آخر هو تحميل مكتبة AngularJS في العنصر <Body> ، ولكن يجب وضعه أمام نص AngularJS:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> {{firstName + "" + lastName}}} </div> <script> var app = Angular.Module ("myApp" ، [] "doe" ؛}) ؛ </script> </body> </html>نتائج التشغيل:
جون دو
ما سبق هو عبارة عن مجموعة من معلومات وحدة AngularJS ، وسنستمر في إضافتها لاحقًا. آمل أن يساعد ذلك في برمجة الأصدقاء.