AngularJS يدعم الطرق المعيارية. يتم استخدام الوحدات النمطية لتمثيل خدمات منطقية منفصلة ، وحدات تحكم ، والتطبيقات ، وما إلى ذلك ، والحفاظ على الرمز أنيق. نحدد الوحدة النمطية في ملف JS منفصل وتسميته في شكل ملف module.js. في هذا المثال ، نريد إنشاء وحدتين.
وحدة التطبيق - تستخدم لتهيئة تطبيقات وحدة التحكم
وحدة التحكم - تستخدم لتحديد وحدات التحكم
وحدة التطبيق
mainapp.js
var mainapp = Angular.module ("mainapp" ، []) ؛
هنا ، أعلننا وحدة MainApp للتطبيق باستخدام وظيفة mangular.module. لقد مررنا مجموعة فارغة لها. تحتوي هذه الصفيف عادة على وحدات الرقيق.
وحدة تحكم
mainapp.controller ("studentController" ، function ($ scope) {$ scope.student = {firstName: "Mahesh" ، lastName: "parashar" ، Frees: 500 ، mountss: [{name: 'Physics' ، Marks: 70} ، {name: english '، marks: 75} ، {name:' Hindi '، marks: 67}]هنا ، أعلننا وحدة تحكم تستخدم وظيفة MainApp.controller لوحدة الطالب ConferController.
باستخدام الوحدة النمطية
<div ng-app = "mainapp" ng-controller = "studentController"> .. <script src = "mainapp.js"> </script> <script src = "studentController.js"> </script>
هنا ، نستخدم توجيه NG-App ووحدة التحكم لتطبيق الوحدة النمطية باستخدام توجيه NG-Controller. لقد قمنا باستيراد MainApp.js و StudentController.js في صفحة HTML الرئيسية.
مثال
ستظهر الأمثلة التالية جميع الوحدات النمطية المذكورة أعلاه.
testangularjs.htm
<html> <head> <title> وحدات js الزاوية </title> <style> ، Th ، td {border: 1px Solid Gray ؛ حدود الحدود: الانهيار. Padding: 5px ؛} Table Tr: nth-child (Odd) {background-color: #f2f2f2 ؛} TABLE TR: NTH-child (حتى) ng-controller = "studentController"> <table> <tr> <td> أدخل الاسم الأول: </td> <td> <type type = "text" ng-model = "student.lastname"> </td> </tr> <tr> <td> الاسم: </td> <td> ng-repeat = "الموضوع في student.subjects"> <td> {{thision.name}} </td> <td> {{thision.marks}} </td> </tr> </table> </tr> src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> <script src = "mainapp.js"> </script> <script src = "sustudentcontroller.jsmainapp.js
var mainapp = Angular.module ("mainapp" ، []) ؛
StudentController.JS
mainapp.controller ("studentController" ، function ($ scope) {$ scope.student = {firstName: "Mahesh" ، lastName: "parashar" ، Frees: 500 ، mountss: [{name: 'Physics' ، Marks: 70} ، {name: english '، marks: 75} ، {name:' Hindi '، marks: 67}]الإخراج
افتح textangularjs.htm في متصفح الويب. النتائج كما يلي.
ما سبق هو المعلومات على المعرفة ذات الصلة وحدة AngularJS. سوف نستمر في إضافة المعرفة ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!