تفسير $injector في AngularJs

الطريقة التفاسيرية

يتم استخدام هذا النوع من الطريقة بضمان تطابق أسماء المعلمات مع أسماء التبعيات. إذا كان الكود يحتاج إلى ضغط أو عمليات أخرى، فقد يؤدي ذلك إلى فشل التبويب.

 app.controller("myCtrl1", function($scope,hello1,hello2){
    $scope.hello = function() {
      hello1.hello();
      hello2.hello();
    }
  });

الطريقة العلامة

يتم استخدام هذا النوع من الطريقة بتحديد مصفوفة التبعيات، التي تحتوي على أسماء الخدمات، في صيغة معلمات الدالة، يمكن تعيين أسماء المعلمات بطرق متعددة، ولكن يجب ضمان تطابق الترتيب

var myCtrl2 = function($scope,hello1,hello2) {}}
    $scope.hello = function() {
      hello1.hello();
      hello2.hello();
    }
  }
  myCtrl2.$injector = ['hello1','hello2'];
  app.controller("myCtrl2", myCtrl2);

الطريقة المدمجة

يتم استخدام هذا النوع من الطريقة بمرور اثنين من المعلمات، واحدة هي الاسم، والأخرى هي مصفوفة. هو آخر عنصر في المصفوفة هو الجسم الحقيقي للطريقة، ولكن يجب ضمان تطابق ترتيب التبعيات مع ترتيب المعلمات (مثل الطريقة العلامة).

app.controller("myCtrl3",['$scope','hello1','hello2',function($scope,hello1,hello2){
    $scope.hello = function() {
      hello1.hello();
      hello2.hello();
    }
  });

طرق استخدام $injector

في angular، يمكن الحصول على المحقن باستخدام angular.injector()

var $injector = angular.injector();

باستخدام $injector.get('serviceName') يمكن الحصول على اسم الخدمة التابع للتبعية

$injector.get('$scope')

باستخدام $injector.annotate('xxx') يمكن الحصول على جميع التبعيات الخاصة بـ xxx

$injector.annotate(xxx)

مثال على الكود

<html>
<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 ng-app="myApp">
  <div ng-controller="myCtrl1">
    <input type="button" ng-click="hello()" value="ctrl1"></input>
  </div>
  <div ng-controller="myCtrl2">
    <input type="button" ng-click="hello()" value="ctrl2"></input>
  </div>
  <div ng-controller="myCtrl3">
    <input type="button" ng-click="hello()" value="ctrl3"></input>
  </div>
  <script type="text/javascript">
  var app = angular.module("myApp",[]);
  app.factory("hello1",function(){
    return {
      hello:function(){
        console.log("hello1 service");
      }
    }
  });
  app.factory("hello2",function(){
    return {
      hello:function(){
        console.log("hello2 service");
      }
    }
  });
  var $injector = angular.injector();
  console.log(angular.equals($injector.get('$injector'),$injector));//true
  console.log(angular.equals($injector.invoke(function($injector) {return $injector;}),$injector));//true
  //inferred
  // $injector.invoke(function(serviceA){});
  app.controller("myCtrl1", function($scope,hello1,hello2){
    $scope.hello = function() {
      hello1.hello();
      hello2.hello();
    }
  });
  //annotated
  // function explicit(serviceA) {};
  // explicit.$inject = ['serviceA'];
  // $injector.invoke(explicit);
  var myCtrl2 = function($scope,hello1,hello2) {}}
    $scope.hello = function() {
      hello1.hello();
      hello2.hello();
    }
  }
  myCtrl2.$injector = ['hello1','hello2'];
  app.controller("myCtrl2", myCtrl2);
  //inline
  app.controller("myCtrl3",['$scope','hello1','hello2',function($scope,hello1,hello2){
  // app.controller("myCtrl3",['$scope','hello1','hello2',function(a,b,c){
    // a.hello = function() {
    // b.hello();
    // c.hello();
    // }
    $scope.hello = function() {
      hello1.hello();
      hello2.hello();
    }
  });
  console.log($injector.annotate(myCtrl2)); // ["$scope","hello1","hello2"]
  </script>
</body>
</html>

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

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

دروس أساسية

توصيات لك