AngularJS szolgáltatások
On október 5, 2021 by adminAz AngularJS-ben készíthetsz saját szolgáltatást, vagy használhatod a számos beépített szolgáltatás egyikét.
Mi az a szolgáltatás?
Az AngularJS-ben a szolgáltatás egy olyan funkció vagy objektum, amely az AngularJS alkalmazásod számára elérhető és korlátozódik rá.
AngularJS körülbelül 30 beépített szolgáltatással rendelkezik. Ezek egyike a $location szolgáltatás.
A $location szolgáltatás olyan metódusokkal rendelkezik, amelyek az aktuális weboldal helyéről adnak vissza információt:
Példa
A $location szolgáltatás használata egy vezérlőben:
app.controller(‘customersCtrl’, function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Try it Yourself ”
Megjegyezzük, hogy a $location szolgáltatást argumentumként adjuk át a kontrollernek. Ahhoz, hogy a szolgáltatást a vezérlőben használhassuk, függőségként kell definiálni.
Miért használjuk a szolgáltatásokat?
Sok szolgáltatás esetében, mint például a $location szolgáltatás, úgy tűnik, hogy használhatnánk olyan objektumokat, amelyek már a DOM-ban vannak, mint például a window.location objektum, és meg is tehetnénk, de ennek lenne néhány korlátja, legalábbis az AngularJS alkalmazásunk esetében.
Az AngularJS folyamatosan felügyeli az alkalmazásodat, és ahhoz, hogy megfelelően tudja kezelni a változásokat és eseményeket, az AngularJS inkább a $location szolgáltatást használja a window.location objektum helyett.
A $http szolgáltatás
A $http szolgáltatás az egyik leggyakrabban használt szolgáltatás az AngularJS alkalmazásokban. A szolgáltatás kérést intéz a szerverhez, és az alkalmazásunk kezeli a választ.
Példa
A $http szolgáltatás használatával adatokat kérhetünk a szervertől:
app.controller(‘myCtrl’, function($scope, $http) {
$http.get(“welcome.htm”).then(function (response) {
$scope.myWelcome = response.data;
});
});
});
Try it Yourself ”
Ez a példa a $http szolgáltatás egy nagyon egyszerű használatát mutatja be. A $http szolgáltatásról többet megtudhat az AngularJS Http Tutorialban.
A $timeout szolgáltatás
A $timeout szolgáltatás az AngularJS verziója a window.setTimeout függvénynek.
Példa
Új üzenet megjelenítése két másodperc után:
app.controller(‘myCtrl’, function($scope, $timeout) {
$scope.myHeader = “Hello World!”;
$timeout(function () {
$scope.myHeader = “Hogy vagy ma?”;
}, 2000);
});
Próbáld ki magad ”
A $interval szolgáltatás
A $interval szolgáltatás az AngularJS verziója a window.setInterval függvénynek.
Példa
Az idő másodpercenkénti megjelenítése:
app.controller(‘myCtrl’, function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
Próbáld ki magad ”
Saját szolgáltatás létrehozása
A saját szolgáltatás létrehozásához csatlakoztasd a szolgáltatásod a modulhoz:
Készíts egy hexafy nevű szolgáltatást:
this.myFunc = function (x) {
return x.toString(16);
}
});
A saját készítésű szolgáltatás használatához adja hozzá függőségként a vezérlő definiálásakor:
Példa
A hexafy nevű saját készítésű szolgáltatást használja egy szám hexadecimális számmá alakítására:
$scope.hex = hexafy.myFunc(255);
});
Próbáld ki magad ”
Egyéni szolgáltatás használata egy szűrőn belül
Mihelyt létrehoztál egy szolgáltatást, és csatlakoztattad az alkalmazásodhoz, használhatod a szolgáltatást bármilyen vezérlőben, direktívában, szűrőben, vagy akár más szolgáltatásokon belül is.
A szolgáltatás szűrőn belüli használatához adjuk hozzá függőségként a szűrő definiálásakor:
A szűrőben használt hexafy szolgáltatás myFormat:
Try it Yourself ”
A szűrőt használhatjuk egy objektum vagy egy tömb értékeinek megjelenítésekor:
Készítsen egy hexafy nevű szolgáltatást:
<li ng-repeat=”x in counts”>{{x | myFormat}}</li>
</ul>
Próbálja ki maga ”
Vélemény, hozzászólás?