Servicii AngularJS
On octombrie 5, 2021 by adminÎn AngularJS puteți să vă creați propriul serviciu sau să utilizați unul dintre numeroasele servicii încorporate.
Ce este un serviciu?
În AngularJS, un serviciu este o funcție sau un obiect care este disponibil și limitat la aplicația AngularJS.
AngularJS are aproximativ 30 de servicii încorporate. Unul dintre ele este serviciul $location.
Serviciul $location are metode care returnează informații despre locația paginii web curente:
Exemplu
Utilizați serviciul $locationîntr-un controler:
app.controller(‘customersCtrl’, function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Încearcă tu însuți ”
Rețineți că serviciul $location este trecut în controler ca un argument. Pentru a utiliza serviciul în controler, acesta trebuie să fie definit ca dependență.
De ce să folosiți servicii?
Pentru multe servicii, cum ar fi serviciul $location, se pare că ați putea folosi obiecte care sunt deja în DOM, cum ar fi obiectul window.location, și ați putea, dar ar avea unele limitări, cel puțin pentru aplicația AngularJS.
AngularJS vă supraveghează în mod constant aplicația, iar pentru ca aceasta să gestioneze modificările și evenimentele în mod corespunzător, AngularJS preferă să folosiți serviciul $location în locul obiectului window.location.
Serviciul $http
Serviciul $http este unul dintre cele mai utilizate servicii în aplicațiile AngularJS. Serviciul face o cerere către server și permite aplicației dumneavoastră să gestioneze răspunsul.
Exemplu
Utilizați serviciul $http pentru a solicita date de la server:
app.controller(‘myCtrl’, function($scope, $http) {
$http.get(„welcome.htm”).then(function (response) {
$scope.myWelcome = response.data;
});
});
});
Încearcă și tu ”
Acest exemplu demonstrează o utilizare foarte simplă a serviciului $http. Aflați mai multe despre serviciul $http în AngularJS Http Tutorial.
Serviciul $timeout
Serviciul $timeout este versiunea AngularJS a funcției window.setTimeout.
Exemplu
Afișează un nou mesaj după două secunde:
app.controller(‘myCtrl’, function($scope, $timeout) {
$scope.myHeader = „Hello World!”;
$timeout(function () {
$scope.myHeader = „Cum te simți astăzi?”;
}, 2000);
});
Încearcă și tu ”
Serviciul $interval
Serviciul $interval este versiunea AngularJS a funcției window.setInterval.
Exemplu
Afișează timpul la fiecare secundă:
app.controller(‘myCtrl’, function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
Încearcă și tu ”
Creați-vă propriul serviciu
Pentru a vă crea propriul serviciu, conectați-l la modul:
Creați un serviciu numit hexafy:
this.myFunc = function (x) {
return x.toString(16);
}
});
Pentru a utiliza serviciul personalizat, adăugați-l ca dependență atunci când definiți controlerul:
Exemplu
Utilizați serviciul personalizat numit hexafy pentru a converti un număr într-un număr hexazecimal:
$scope.hex = hexafy.myFunc(255);
}});
Încercați și dumneavoastră ”
Utilizați un serviciu personalizat în interiorul unui filtru
După ce ați creat un serviciu și l-ați conectat la aplicația dumneavoastră, puteți utiliza serviciul în orice controler, directivă, filtru sau chiar în interiorul altor servicii.
Pentru a utiliza serviciul în interiorul unui filtru, adăugați-l ca dependență atunci când definiți filtrul:
Serviciul hexafy utilizat în filtru myFormat:
Încearcă tu însuți ”
Puteți utiliza filtrul atunci când afișați valori dintr-un obiect, sau dintr-un array:
Creați un serviciu numit hexafy:
<li ng-repeat=”x in counts”>{{x | myFormat}}</li>
</ul>
Încearcă și tu ”
.
Lasă un răspuns