Latest web development tutorials

AngularJS حقن التبعية

ما هو التبعية حقن

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

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

كلمة --- شيء كنت لا تأتي لي، وأنا سوف تجد لك شيئا.

توفير AngularJS آلية جيدة لحقن التبعية. المكونات الأساسية الخمس التالية تستخدم التبعية حقن:

  • قيمة
  • مصنع
  • خدمة
  • مزود
  • ثابت

قيمة

القيمة هي كائن جافا سكريبت بسيط، تمرير قيمة إلى وحدة تحكم (مرحلة التكوين) إلى: 

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...

// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
   
   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

مصنع

المصنع هو دالة تقوم بإرجاع قيمة. إنشاء وحدة تحكم في وقت احتياجات الخدمة.

وعادة ما نستخدم لحساب أو القيم عودة وظيفة المصنع. 

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 

// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...

مزود

AngularJS تم إنشاؤها من قبل مزود الخدمة، مصنع، الخ (مرحلة التكوين).

يوفر مزود والحصول على طريقة مصنع ()، التي ترجع قيمة / خدمة / المصنع. 

// 定义一个模块
var mainApp = angular.module("mainApp", []);
...

// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

ثابت

ثابت (ثابت) تستخدم لتمرير القيم في مرحلة التكوين، والاهتمام المستمر لهذه المرحلة في تكوين غير متوفر. 

mainApp.constant("configParam", "constant value");

أمثلة

تقدم الأمثلة التالية أكثر من عدة حقن التبعية مظاهرة آلية. 

<html>
   
   <head>
      <meta charset="utf-8">
      <title>AngularJS  依赖注入</title>
   </head>
   
   <body>
      <h2>AngularJS 简单应用</h2>
      
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>输入一个数字: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>结果: {{result}}</p>
      </div>
      
      <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.config(function($provide) {
            $provide.provider('MathService', function() {
               this.$get = function() {
                  var factory = {};
                  
                  factory.multiply = function(a, b) {
                     return a * b;
                  }
                  return factory;
               };
            });
         });
			
         mainApp.value("defaultInput", 5);
         
         mainApp.factory('MathService', function() {
            var factory = {};
            
            factory.multiply = function(a, b) {
               return a * b;
            }
            return factory;
         });
         
         mainApp.service('CalcService', function(MathService){
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });
         
         mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
            $scope.number = defaultInput;
            $scope.result = CalcService.square($scope.number);

            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });
			
      </script>
      
   </body>
</html>

محاولة »