تفسير الت模块 في AngularJS والكود الأمثلة

لدي AngularJS عدة خصائص، مثل:

　　1 MVC

　　2 المودولات

　　3 نظام التعليمات

　　4 الترابط الثنائي

إذن، هذا المقال سيركز على مودولات AngularJS

　　أولاً، دعونا نتحدث عن لماذا يجب تحقيق المودولات:

　　1 يزيد من إعادة استخدام المودولات

　　2 من خلال تعريف المودولات، يمكنك تحديد ترتيب التحميل المخصص

　　3 في الاختبارات الوحدوية، لا تحتاج إلى تحميل كل المحتويات

　　في الأمثلة السابقة، كان كود التحكم مكتوب مباشرة داخل علامة script، حيث تكون هذه الدوال عالمية، مما لا يكون خيارًا جيدًا بالتأكيد.

　　هيا نرى كيفية تنفيذ المودولات:　　　　　　　

 <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

angular.module('myApp',[]);

　　المعدل الأول هو اسم التطبيق المربوط، هذا التطبيق يشير إلى نقطة الدخول لـ angular في الصفحة، مشابهة لـ main function.

　　المعدل الثاني [] يشير إلى المودولات المطلوبة.

　　هيا نرى كيفية استخدام المodule!

<!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 | test }}
    </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 يكفي.

　　في script، قمنا بإنشاء ممر ووحدة تحكم من خلال النموذج.

　　يتم استخدامه لإضافة زخرفة للنص.

　　يتم استخدامه للتحضير المتغيرات.

　　نتيجة تشغيل البرنامج كما يلي:

　　　　　　　　　 هذا هو جمع المعلومات حول AngularJS Modular، سيتم إضافة المزيد من المعلومات في المستقبل، شكرًا للدعم الذي يقدمونه للموقع!

البيان: محتويات هذا المقال تم جمعها من الإنترنت، حقوق الطبع والنشر مملوكة للكاتب الأصلي، المحتوى تم إضافته من قبل مستخدمي الإنترنت بتحميلهم بشكل تلقائي، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتوى بشكل إنساني، ولا يتحمل أي مسؤولية قانونية متعلقة بذلك. إذا اكتشفت أي محتوى يشتبه في حقوق الطبع والنشر، يرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@') للإبلاغ، وتقديم الأدلة ذات الصلة، وسيتم حذف المحتوى المشبوه في حال تم التحقق منه.

تعليمات الأساس

سيكون لك