آموزش گام به گام AngularJS قسمت هشتم : آشنایی با Service و Factory

بازدید کنندگان : 1606 دسته بندی برنامه نویسی , برنامه نویسی سمت کلاینت , شروع کار با AngularJS
در مقاله قبل با ng-include و ng-template آشنا شدید ، در این مقاله Service هارا در انگولار بررسی خواهیم کرد
سرویس ها را میتوان به کلاس ها تشبیه کرد که مجموعه ای از توابع و متدها ( که مطابق  پترن Singleton هستند ) را برای ما فراهم می نماید .
سرویس ها علاوه بر کپسوله سازی کد ها امکان فراخوانی و استفاده از چندیل کنترل را به ما میدهند در صورتی که شما نمیتوانید از یک تابع و یا متغیر در چند کنترل استفاده کنید .
دو روش متداول برای ایجاد یک سرویس وجود دارد ، از طریق متد Service و از طریق متد Factory که به صورت زیر تعریف می شوند :
module.service('MyService', function() {

this.method1 = function() {

//..

}

this.method2 = function() {

//..

}

});
 
module.factory('MyService', function() { 
 
var factory = {};  
 
factory.method1 = function() { 
//.. 
} 
 
factory.method2 = function() { 
//.. 
} 
 
return factory; 
}); 

همانطور که ملاحظه می کنید تفاوت های کوچکی در نحوه ایجاد سرویس ها توسط Service و Factory وجود دارد که خیلی حائز اهمیت نیست ، بنده در این سری مقالات از Service استفاده خواهم کرد .
 
جلسه قبل را به خاطر بیاورید که بحث واکشی ،  درج ، ویرایش و به روزرسانی اطلاعات را توسط چند تابع انجام دادیدم ، همچنین به یاد دارید که کلیه توابع در کنترل GridController قرار گرفت و از آن در صفحه Grid.html استفاده کردیم
اکنون کنترل را به دو بخش GridCintroller و FormController تقسیم میکنیم ، اولی برای نمایش جدول دو دومی برای فرم درج اطلاعات ، یعنی این دو بخش را در دو View و دو Controller جداگانه قرار میدهیم و در نهایت یک سرویس ایجاد کرده و کدهای مربوط به چهار عمل اصلی بانک اطلاعاتی را در سرویس قرار میدهیم :
سرویس ما به شکل زیر خواهد بود :
app.service('UserServices', ['$http', function ($http) { 
 
    this.Fetch = function () { 
        return $http.get("/UserData/Get/"); 
    } 
 
    this.AddUser=function (newData) { 
       return $http({method: "POST",url: "/UserData/Creat/",data: newData}); 
    } 
 
    this.DeleteUser = function (id) { 
        $http({ method: "POST", url: "/UserData/Delete/", data: { id: id } }); 
    } 
 
    this.UpdateUser = function (newData) { 
        $http({ method: "POST", url: "/UserData/Update/", data: newData }); 
    } 
   
 
}]); 
همانطور که میبینید طبق الگو یک سرویس به نام UserServices ایجاد شده و $http نیز در آن در نظر گرفته شده است سپس 4 متد 
مورد نظر را پیاده سازی کردیم . 
اکنون یک کنترلر جدید برای فرم ایجاد کرده و کدهای مربوط به درج اطلاعات را در آن قرار میدهیم :
app.controller('formCtrl', function ($scope, $rootScope, UserServices) { 
 
    $scope.add = function () { 
 
        var newData = { name: $scope.newName, family: $scope.newFamily }; 
 
        $rootScope.myData.push(newData); 
 
        UserServices.AddUser(newData); 
 
        $scope.newName = ''; 
        $scope.newFamily = ''; 
    } 
}); 
ملاحظه میکنید که در این کنترل از $http خبری نیست و به جای آن UserServices اضافه شده  و متد AddUser در آن فراخوانی 
شده است . 
نکته دیگر استفاده از rootScope به جای scope است ، به دلیل اینکه قرار است هم از داخل این کنترل و هم از داخل 

GridContrller به مدل myData دسترسی داشته باشیم بنابراین این مدل باید در داخل rootScope تعریف شود  
کنترلر Grid ما نیز به شکل زیر خواهد بود :
app.controller('gridCtrl', function ($scope, $rootScope, UserServices) { 
 
    $scope.isEditing = false; 
    $scope.myTemplate = 'display'; 
 
    UserServices.Fetch().then(function (response) { 
        $rootScope.myData = response.data; 
    }); 
 
    $scope.delete = function (i) { 
 
        $rootScope.myData.splice(i, 1); 
        UserServices.DeleteUser($scope.myData[i].id); 
    } 
 
    $scope.update = function () { 
        $scope.myTemplate = 'display'; 
        $scope.isEditing = false; 
 
        UserServices.UpdateUser($rootScope.myData); 
 
    } 
  $scope.edit = function () { 
      $scope.isEditing = true; 
      $scope.myTemplate = 'edit'; 
  } 
  $scope.cancel = function () { 
      $scope.myTemplate = 'display'; 
      $scope.isEditing = false; 
  } 
 
}); 
به نحوه استفاده از متد Fetch دقت نمایید ، به دلیل اینکه خروجی متد خود $http بوده از then در این بخش استفاده شده است 
و کدهای HTML ما نیز به شرح زیر خواهد بود :
<html> 
<head> 
    <title>Angular CRUD</title> 
 
    <!-- Angular Libraries--> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
​
    <!-- Application --> 
    <script src="Controllers/Application.js"></script> 
 
    <!-- Controllers --> 
    <script src="Controllers/GridController.js"></script> 
    <script src="Controllers/FormController.js"></script> 
 
    <!-- Services --> 
    <script src="Services/UserService.js"></script> 
 
    <!-- Style Sheets --> 
    <link href="Css/tables.css" rel="stylesheet" /> 
 
</head> 
 
<body ng-app="myApp"> 
 
    <div ng-include="'/Models/Grid.html'"></div> 
    <div ng-include="'/Models/Form.html'"></div> 
     
</body> 
</html> 
آخرین نکته Application.js میباشد که از این پس موارد کلی مربوط به کل َApplication را در آن قرار میدهیم ، فعلا تنها کد داخل این فایل کد تعریف app میباشد :
var app = angular.module('myApp', []); 

در مقالعه بعدی با ngRoute و  ng-view آشنا می شوید.


میتوانید فایل پروژه را از اینجا دانلود نمایید


منابع :

نظرات کاربران

کیوان نصر ۱۳۹۵/۲/۲۸ ۱۵:۳۸

مطلب بیسار مفیدی بود