Jassif Team Institution

AngularJS சர்வீஸ்கள்

AngularJS இல் நீங்கள் உங்கள் சொந்த சர்வீஸை உருவாக்கலாம், அல்லது பல உள்ளமைக்கப்பட்ட சர்வீஸ்களில் ஒன்றைப் பயன்படுத்தலாம்.

சர்வீஸ் என்றால் என்ன?

AngularJS க்கு சுமார் 30 உள்ளமைக்கப்பட்ட சர்வீஸ்கள் உள்ளன.

அவற்றில் ஒன்று $location சர்வீஸ் ஆகும்.

$location சர்வீஸ் தற்போதைய வலைப்பக்கத்தின் இடத்தைப் பற்றிய தகவல்களைத் திருப்பித் தரும் மெதட்களைக் கொண்டுள்ளது:

எடுத்துக்காட்டு

ஒரு கன்ட்ரோலரில் $location சர்வீஸைப் பயன்படுத்தவும்:

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

$location சர்வீஸ் ஒரு argument ஆக கன்ட்ரோலருக்குள் பாஸ் செய்யப்படுகிறது என்பதை கவனிக்கவும்.

கன்ட்ரோலரில் சர்வீஸைப் பயன்படுத்த, அது ஒரு சார்பு என வரையறுக்கப்பட வேண்டும்.

ஏன் சர்வீஸ்களைப் பயன்படுத்த வேண்டும்?

$location சர்வீஸ் போன்ற பல சர்வீஸ்களுக்கு, ஏற்கனவே DOM இல் உள்ள பொருள்களைப் பயன்படுத்தலாம் என்று தோன்றலாம், window.location பொருள் போன்றவை, மேலும் நீங்கள் செய்யலாம், ஆனால் அதற்கு சில வரம்புகள் இருக்கும், குறைந்தபட்சம் உங்கள் AngularJS ஆப்ளிகேஷனுக்கு.

AngularJS உங்கள் ஆப்ளிகேஷனை தொடர்ந்து மேற்பார்வையிடுகிறது, மேலும் மாற்றங்கள் மற்றும் நிகழ்வுகளை சரியாகக் கையாள, AngularJS நீங்கள் window.location பொருளுக்குப் பதிலாக $location சர்வீஸைப் பயன்படுத்த விரும்புகிறது.

$http சர்வீஸ்

$http சர்வீஸ் AngularJS ஆப்ளிகேஷன்களில் மிகவும் பொதுவாகப் பயன்படுத்தப்படும் சர்வீஸ்களில் ஒன்றாகும்.

இந்த சர்வீஸ் சர்வருக்கு ஒரு கோரிக்கையைச் செய்கிறது, மேலும் பதிலைக் கையாள உங்கள் ஆப்ளிகேஷனை அனுமதிக்கிறது.

எடுத்துக்காட்டு

சர்வரில் இருந்து தரவைக் கோர $http சர்வீஸைப் பயன்படுத்தவும்:

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

இந்த எடுத்துக்காட்டு $http சர்வீஸின் மிகவும் எளிய பயன்பாட்டை நிரூபிக்கிறது.

$timeout சர்வீஸ்

$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);
});

$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);
});

உங்கள் சொந்த சர்வீஸை உருவாக்கவும்

உங்கள் சொந்த சர்வீஸை உருவாக்க, உங்கள் சர்வீஸை மாட்யூலுடன் இணைக்கவும்:

hexafy என்ற பெயரில் ஒரு சர்வீஸை உருவாக்கவும்:

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

உங்கள் தனிப்பயன் சர்வீஸைப் பயன்படுத்த, கன்ட்ரோலரை வரையறுக்கும் போது அதை ஒரு சார்பு என சேர்க்கவும்:

எடுத்துக்காட்டு

ஒரு எண்ணை ஹெக்ஸாடெசிமல் எண்ணாக மாற்ற hexafy என்ற தனிப்பயன் சர்வீஸைப் பயன்படுத்தவும்:

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

ஒரு பில்டருக்குள் தனிப்பயன் சர்வீஸைப் பயன்படுத்தவும்

நீங்கள் ஒரு சர்வீஸை உருவாக்கி, அதை உங்கள் ஆப்ளிகேஷனுடன் இணைத்தவுடன், எந்த கன்ட்ரோலர், டைரக்டிவ், பில்டர் அல்லது மற்ற சர்வீஸ்களுக்குள் கூட சர்வீஸைப் பயன்படுத்தலாம்.

ஒரு பில்டருக்குள் சர்வீஸைப் பயன்படுத்த, பில்டரை வரையறுக்கும் போது அதை ஒரு சார்பு என சேர்க்கவும்:

myFormat பில்டரில் பயன்படுத்தப்படும் hexafy சர்வீஸ்:

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

ஒரு பொருளிலிருந்து அல்லது வரிசையிலிருந்து மதிப்புகளைக் காண்பிக்கும் போது பில்டரைப் பயன்படுத்தலாம்:

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

பொதுவான உள்ளமைக்கப்பட்ட சர்வீஸ்கள்

பயிற்சிகள் மூலம் கற்றல்

சர்வீஸ் சிறந்த நடைமுறைகள்

சர்வீஸ் உருவாக்கும் முறைகள்