AngularJS Services

আপনার নিজস্ব পরিষেবা তৈরি করুন বা অন্তর্নির্মিত পরিষেবাগুলি ব্যবহার করুন৷

AngularJS পরিষেবা

AngularJS-এ আপনি আপনার নিজস্ব পরিষেবা তৈরি করতে পারেন, বা অনেকগুলি অন্তর্নির্মিত পরিষেবাগুলির মধ্যে একটি ব্যবহার করতে পারেন।

সেবা কি?

AngularJS-এ, একটি পরিষেবা হল একটি ফাংশন বা বস্তু যা আপনার AngularJS অ্যাপ্লিকেশনের জন্য উপলব্ধ এবং সীমাবদ্ধ।

সেবা কি?

AngularJS এর ​​প্রায় 30টি বিল্ট-ইন পরিষেবা রয়েছে।

তাদের মধ্যে একটি হল $location পরিষেবা।

$location পরিষেবার এমন পদ্ধতি রয়েছে যা বর্তমান ওয়েব পৃষ্ঠার অবস্থান সম্পর্কে তথ্য প্রদান করে:

উদাহরণ

একটি কন্ট্রোলারে $location পরিষেবা ব্যবহার করুন:

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

নোট করুন যে $location পরিষেবাটি একটি যুক্তি হিসাবে নিয়ামকের মধ্যে পাস করা হয়।

একটি নিয়ামক একটি পরিষেবা ব্যবহার করার জন্য, এটি একটি নির্ভরতা হিসাবে সংজ্ঞায়িত করা আবশ্যক.

কেন পরিষেবাগুলি ব্যবহার করবেন?

অনেক পরিষেবার জন্য, যেমন $location পরিষেবার জন্য, মনে হতে পারে আপনি ইতিমধ্যেই DOM-এ থাকা বস্তুগুলি ব্যবহার করতে পারেন, যেমন window.location অবজেক্ট, এবং আপনি করতে পারেন, কিন্তু কিছু সীমাবদ্ধতা আছে, অন্তত আপনার AngularJS অ্যাপ্লিকেশনের জন্য।

AngularJS ক্রমাগত আপনার অ্যাপ্লিকেশন নিরীক্ষণ করে, এবং পরিবর্তন এবং ঘটনাগুলি সঠিকভাবে পরিচালনা করতে, AngularJS পছন্দ করে যে আপনি window.location অবজেক্টের পরিবর্তে $location পরিষেবা ব্যবহার করুন।

AngularJS $location

AngularJS ডাইজেস্ট চক্রের সাথে একীভূত

Two-way data binding

পরীক্ষা করা সহজ

window.location

হজম চক্রের বাইরে

No automatic updates

পরীক্ষা করা কঠিন

$http পরিষেবা

অ্যাঙ্গুলারজেএস অ্যাপ্লিকেশনগুলিতে $http পরিষেবাটি সবচেয়ে বেশি ব্যবহৃত পরিষেবাগুলির মধ্যে একটি।

এই পরিষেবাটি সার্ভারের কাছে একটি অনুরোধ করে এবং আপনার অ্যাপ্লিকেশনটিকে প্রতিক্রিয়া পরিচালনা করার অনুমতি দেয়৷

উদাহরণ

সার্ভার থেকে ডেটা অনুরোধ করতে $http পরিষেবা ব্যবহার করুন:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

এই উদাহরণটি $http পরিষেবার একটি খুব সহজ ব্যবহার প্রদর্শন করে।

$http পরিষেবা সম্পর্কে আরও:

$http পরিষেবা সম্পর্কে সম্পূর্ণ তথ্যের জন্য, আমাদের AngularJS HTTP টিউটোরিয়াল দেখুন।

$টাইমআউট পরিষেবা

$timeout পরিষেবা হল window.setTimeout ফাংশনের AngularJS সংস্করণ।

উদাহরণ

দুই সেকেন্ড পরে একটি নতুন বার্তা দেখান:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

$timeout vs setTimeout

$timeout:AngularJS ডাইজেস্ট চক্রের সাথে ইন্টিগ্রেটেড, স্বয়ংক্রিয় সুযোগ আপডেট

setTimeout:নেটিভ জাভাস্ক্রিপ্টকে অবশ্যই $scope.$apply() ম্যানুয়ালি কল করতে হবে

$interval পরিষেবা

$interval পরিষেবা হল window.setInterval ফাংশনের AngularJS সংস্করণ।

উদাহরণ

প্রতি সেকেন্ডে সময় দেখান:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

মূল ফোকাস:

$interval পরিষেবা ব্যবহার করার সময়, আপনি এটি সঠিকভাবে বন্ধ করতে পারেন তা নিশ্চিত করুন৷ পৃষ্ঠা থেকে প্রস্থান করার সময় $interval বন্ধ করতে ভুলবেন না, অন্যথায় একটি মেমরি লিক হতে পারে।

আপনার নিজস্ব সেবা তৈরি করুন

আপনার নিজস্ব পরিষেবা তৈরি করতে, মডিউলে আপনার পরিষেবা লিঙ্ক করুন:

হেক্সাফি নামে একটি পরিষেবা তৈরি করুন:

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

আপনার কাস্টম পরিষেবা ব্যবহার করতে, কন্ট্রোলার সংজ্ঞায়িত করার সময় এটিকে নির্ভরতা হিসাবে যুক্ত করুন:

উদাহরণ

একটি সংখ্যাকে হেক্সাডেসিমেলে রূপান্তর করতে কাস্টম পরিষেবা হেক্সাফি ব্যবহার করুন:

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

একজন নির্মাতার মধ্যে একটি কাস্টম পরিষেবা ব্যবহার করুন

একবার আপনি একটি পরিষেবা তৈরি করেন এবং এটিকে আপনার অ্যাপ্লিকেশনের সাথে সংযুক্ত করেন, আপনি পরিষেবাটি যে কোনও নিয়ামক, নির্দেশিকা, নির্মাতা বা এমনকি অন্যান্য পরিষেবাগুলির মধ্যে ব্যবহার করতে পারেন৷

বিল্ডারের মধ্যে একটি পরিষেবা ব্যবহার করতে, নির্মাতাকে সংজ্ঞায়িত করার সময় এটিকে নির্ভরতা হিসাবে যুক্ত করুন:

হেক্সাফি পরিষেবা মাইফরম্যাট বিল্ডারে ব্যবহৃত হয়:

app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);

একটি বস্তু বা একটি অ্যারে থেকে মান প্রদর্শন করার সময় একটি নির্মাতা ব্যবহার করা যেতে পারে:

<ul>
    <li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

সাধারণ অন্তর্নির্মিত পরিষেবা

সেবা ব্যাখ্যা আবেদন
$http HTTP অনুরোধ প্রসেস করে সার্ভার যোগাযোগ
$location ব্রাউজার ইউআরএল পরিচালনা করে ইউআরএল ম্যানেজমেন্ট
$timeout window.setTimeout wrapper বিলম্ব ফাংশন
$interval window.setInterval wrapper ক্রমাগত অপারেশন
$rootScope সোর্স স্কোপ অবজেক্ট গ্লোবাল ডেটা
$filter বিল্ডারদের কাছে যাচ্ছে ডেটা ডিজাইন
$window ব্রাউজার উইন্ডো অবজেক্ট রেফারেন্স ব্রাউজার API অ্যাক্সেস
$document ব্রাউজার ডকুমেন্ট অবজেক্ট রেফারেন্স DOM অ্যাক্সেস

ব্যায়ামের মাধ্যমে শেখা

একটি নিয়ামক একটি পরিষেবা ব্যবহার কিভাবে?

নিয়ামক ফাংশন যুক্তি হিসাবে পরিষেবা যোগ করুন
✓ ঠিক আছে! পরিষেবাগুলি নিয়ামক ফাংশন আর্গুমেন্ট হিসাবে পাস করা হয়
HTML এ পরিষেবাটি সংজ্ঞায়িত করুন
✗ ভুল! পরিষেবাগুলি জাভাস্ক্রিপ্টে সংজ্ঞায়িত করা হয়
CSS-এ পরিষেবাটি সংজ্ঞায়িত করুন
✗ ভুল! CSS এর সাথে পরিষেবাগুলির কোনও সম্পর্ক নেই
একটি AngularJS মডিউলে পরিষেবাটি নিবন্ধন করুন
✓ ঠিক আছে! পরিষেবাগুলি প্রথমে মডিউলে নিবন্ধিত হতে হবে

পরিষেবার সর্বোত্তম অভ্যাস

Single Responsibility

প্রতিটি পরিষেবার শুধুমাত্র একটি নির্দিষ্ট দায়িত্ব থাকা উচিত

Dependency Injection

পরিষেবাগুলি সরাসরি তৈরি না করেই কন্ট্রোলারগুলিতে ইনজেক্ট করুন৷

কন্ট্রোলারে সরাসরি যুক্তি এড়িয়ে চলুন

সমস্ত পুনঃব্যবহারযোগ্য যুক্তি পরিষেবাগুলিতে সরান৷

Singleton Pattern

AngularJS পরিষেবাগুলি হল Singleton - সমগ্র অ্যাপ্লিকেশন জুড়ে ভাগ করা একটি মডেল৷

Testable Services

ডিজাইন পরিষেবা যা স্বাধীনভাবে পরীক্ষা করা সহজ

পরিষেবা তৈরির পদ্ধতি

.service()

কনস্ট্রাক্টর ফাংশন

নতুন কীওয়ার্ড দিয়ে তাৎক্ষণিক

Properties/methods: this keyword

.factory()

Factory function

ফাংশন থেকে রিটার্ন মান

খুবই নমনীয়

.provider()

অত্যন্ত কনফিগারযোগ্য

কনফিগার পর্বে কনফিগার করা যেতে পারে

খুবই জটিল