يحتوي AngularJS على العديد من الميزات الرئيسية ، مثل:
1 MVC
2 وحدات
3 نظام القيادة
4 ربط البيانات ثنائية الاتجاه
لذلك دعونا نلقي نظرة على modularization من AngularJs.
أولاً ، دعنا نتحدث عن سبب حاجتك إلى تنفيذ الوحدة:
1 إضافة قابلية لإعادة الاستخدام للوحدات النمطية
2. تحديد الوحدات النمطية لتحقيق تخصيص ترتيب التحميل
3 في اختبارات الوحدة ، لا يجب تحميل كل شيء
في الأمثلة السابقة ، يتم كتابة رمز وحدة التحكم مباشرة في علامة البرنامج النصي ، بحيث تكون الوظائف المعلنة عالمية ، وهي من الواضح أنها ليست الخيار الأفضل.
دعونا نرى كيفية تعديل:
<script type = "text/javaScript"> var myappmodule = Angular.module ('myapp' ، []) ؛ myappmodule.filter ('test' ، function () {return function (name) {return 'hello ،'+name+'! ؛} ؛}) ؛ myappmodule.controller ('myappctrl' ، ['$ scope' ، function ($ scope) {$ scope.name = 'xingoo' ؛}]) ؛ </script>أولاً ، قم بإنشاء الوحدة النمطية myappmodule من خلال الزاوي المتغير العالمي
Angular.Module ('myapp' ، []) ؛
المعلمة الأولى هي اسم تطبيق التطبيق المرتبط ، والذي يحدد نقطة إدخال الزاوي في الصفحة ، على غرار وظيفة الوظيفة الرئيسية.
المعلمة الثانية [] تحدد الوحدة التابعة.
دعنا نلقي نظرة على كيفية استخدام الوحدة النمطية!
<! doctype html> <html ng-app = "myapp"> <head> <meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" /> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </head> <body> <div ng-controller = "myappctrl"> {{{name | اختبار}} </div> <script type = "text/javaScript"> var myappmodule = Angular.Module ('myapp' ، []) ؛ myappmodule.filter ('test' ، function () {return function (name) {return 'hello ،'+name+'! ؛} ؛}) ؛ myappmodule.controller ('myappctrl' ، ['$ scope' ، function ($ scope) {$ scope.name = 'xingoo' ؛}]) ؛ </script> </body> </html>ما عليك سوى ربط myapp بـ ng-app وهو جيد.
في البرنامج النصي ، نقوم بإنشاء مرشح ووحدة تحكم من خلال الوحدات النمطية.
الغرض من المرشح هو إضافة تعديل السلسلة.
وظيفة وحدة التحكم هي تهيئة المتغير.
نتائج تشغيل البرنامج هي كما يلي:
ما سبق هو فرز المعلومات المعيارية من AngularJs. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لدعمكم لهذا الموقع!