آموزش AngularJS

آموزش AngularJS – تزریق وابستگی

تزریقِ وابستگی، یک الگوی طراحی نرم افزار برای اجزاییِه که بجای کد فیزیکی، وابسته هایشان را داخل اجزا میذارن. این الگو، یک جزء را از محل وابستگی جدا می کنه و وابسته ها را قابل تنظیم می کنه. به قابلیت استفاده ی مجدد، قابلیت نگهداری و قابلیت تستِ اجزاء هم کمک می کنه.

AngularJS یک تزریق وابستگی بسیار عالی ارائه میده. AngularJS، اجزای مهم زیر را که می توانند بعنوان وابسته به هم دیگه تزریق بشن، ارائه میده.

  • value
  • factory
  • service
  • provider
  • constant

 

value

value یک شیءِ ساده ی جاوا اسکریپتِه و در فاز پیکربندی، برای پاس دادن مقادیر به controller به کار میره.

//define a module
var mainApp = angular.module("mainApp", []);

//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...

//inject the value in the controller using its name "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);
   }
});

factory

factory یک تابعِه که برای بازگرداندن مقادیر به کار میره. factory، هر زمان که یک service یا یک controller نیازی داشته باشن و درخواستی بکنن، مقادیر را برای آن ها ایجاد می کنه. معمولاً از تابعِ factory برای انجام محاسبات و برگرداندن مقادیر استفاده می کنه.

//define a module
var mainApp = angular.module("mainApp", []);

//create a factory "MathService" which 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;
}); 

//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...

service

service یک شیءِ جاوا اسکریپتِ واحدِه که حاویِ مجموعه ای از توابعِه برای انجام برخی از وظایف (tasks). Serviceها با استفاده از توابعِ service() تعریف میشن و بعد به controllerها تزریق میشن.

//define a module
var mainApp = angular.module("mainApp", []);
...

//create a service which defines a method square to return square of a number.
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a); 
   }
});

//inject the service "CalcService" into the controller
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);
   }
});

provider

provider توسطِ AngularJS، بصورت داخلی در فاز پیکربندی (فازی که در طی آن، AngularJS خودش را bootstrap می کنه)، استفاده میشه تا serviceها، factoryها و ... را ایجاد کنه. می تواند در اشاره گرهای اسکریپتی، برای ایجاد MathService که پیش تر آن را ایجاد کردیم، به کار بره. Provider، یک متدِ factory خاص با متدِ get() است که برای بازگرداندنِ value/service/factory استفاده میشه.

//define a module
var mainApp = angular.module("mainApp", []);
...

//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

constant

با در نظر گرفتن این واقعیت که مقادیر در فاز پیکربندی، قابل پاس دادن نیستن،  constant ها، در فاز پیکربندی، برای پاس دادن مقادیر به کار میرن.

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

مثال

مثال زیر تمام دستورات بالا را نشان میده.

testAngularJS.htm

<html>
   
   <head>
      <title>AngularJS Dependency Injection</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>Enter a number: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>Result: {{result}}</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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>

نتیجه

testAngularJS.htm را در مرورگر وب باز کنین. نتیجه را ببینین.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...