آموزش AngularJS

آموزش AngularJS – کار با Serviceها

AngularJS با استفاده از معماریِ Serviceها، از مفاهیمِ "جداسازی لایه‌ها" پشتیبانی می‌کنه. Serviceها، توابع جاوا اسکریپت هستن و فقط مسئول  انجام وظایف (tasks) هستن. این امر، Serviceها را تبدیل به موجودیتی منحصر به فرد با قابلیت نگهداری و قابلیت تست کرده. controllerها و فیلترها می‌توانند بر اساس نیازشان serviceها را فراخوانی کنن. معمولا Serviceها با مکانیسم تزریق وابستگیِ AngularJS، تزریق میشن.

AngularJS، سرویس‌های داخلی زیادی ارائه داده، مثل، $http، $route، $window، $location و ... . هر service مسئول یک وظیفه‌ی خاصه، برای مثال، $http ، فراخوانیِ Ajaxای انجام میده تا از سرور اطلاعات بگیره. $route برای تعریف اطلاعات مسیریابی و ... به کار میره. serviceهای داخلی همیشه دارای پیشوندِ $ هستن.

در ادامه دو روش برای ایجاد service آمده.

 

  • factory
  • service

 

استفاده از روشِ factory

برای استفاده از این روش، ابتدا یک factory تعریف می‌کنیم و بعد متدی را به آن تخصیص میدیم.

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   
   return factory;
}); 

 

استفاده از روشِ service

 

برای استفاده از روشِ service، یک service تعریف می‌کنیم و بعد متدی را به آن تخصیص میدیم.

mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});

مثال

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

testAngularJS.htm

<html>

   <head>
      <title>Angular JS Services</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </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>
         var mainApp = angular.module("mainApp", []);
         
         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) {
            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });
      </script>
      
   </body>
</html>

نتیجه

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

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

خبـرنــامه

Newsletters

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

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

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

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

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

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

https://telegram.me/softskill_ir

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

خبـرنــامه

Newsletters

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

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

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

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