În AngularJS puteți face propriul serviciu, sau de a folosi una dintre numeroasele servicii integrate.
Ce este un serviciu?
În AngularJS, un serviciu este o funcție sau obiect, care este disponibil pentru, și limitate la acestea, aplicația AngularJS.
AngularJS are aproximativ 30 de servicii integrate. Una dintre ele este $location serviciu.
$location de $location serviciu are metode care returnează informații despre locația paginii web curente:
Exemplu
Utilizați $location serviciu într - un controler:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
}); Încearcă - l singur » Rețineți că $location serviciu este trecut la controlerul ca argument. Pentru a putea utiliza serviciul în controlerul, acesta trebuie să fie definit ca o dependență.
De ce să folosiți serviciile?
Pentru mai multe servicii, cum ar fi $location de window.location $location serviciu, se pare ca ai putea folosi obiecte care sunt deja în DOM, cum ar fi window.location obiect, și ai putea, dar ar avea unele limitări, cel puțin pentru aplicația dumneavoastră AngularJS.
AngularJS supraveghează în mod constant cererea dumneavoastră, și pentru ca acesta să se ocupe de schimbări și evenimente în mod corespunzător, AngularJS preferă să utilizați $location serviciu în loc de window.location obiectului.
Serviciul $ http
$http serviciu este unul dintre serviciile cele mai comune utilizate în aplicații AngularJS. Serviciul face o cerere la server, și permite aplicației dvs. să se ocupe de răspuns.
Exemplu
Utilizați $http serviciu pentru a solicita date de la server:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
}); Încearcă - l singur » Acest exemplu demonstrează o foarte simpla utilizare a $http serviciu. Aflați mai multe despre $http serviciul în AngularJS Http Tutorial .
Serviciul $ timeout
$timeout serviciu este versiunea AngularJS“a window.setTimeout funcției.
Exemplu
Afișează un mesaj nou după două secunde:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
Încearcă - l singur » Serviciul interval de $
$interval serviciu este versiunea AngularJS“a window.setInterval funcției.
Exemplu
Afișarea timpului în fiecare secundă:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $interval) {
$scope.theTime = new
Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},
1000);
});
Încearcă - l singur » Creați-vă propriul serviciu
Pentru a crea propriul serviciu, conectați serviciul la modulul:
Creați un serviciu numit hexafy :
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Pentru a utiliza serviciul personalizat, adăuga ca o dependență la definirea filtrului:
Exemplu
Utilizați serviciul personalizat numit hexafy pentru a converti un număr într - un număr hexazecimal:
app.controller('myCtrl', function($scope, hexafy ) {
$scope.hex
= hexafy .myFunc(255);
});
Încearcă - l singur » Utilizați un serviciu personalizat în interiorul unui filtru
După ce ați creat un serviciu, și conectat-l la cererea 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 ca o dependență la definirea filtrului:
Serviciul hexafy utilizat în filtru myFormat :
app.filter('myFormat',[ 'hexafy' , function( hexafy ) {
return function(x) {
return
hexafy .myFunc(x);
};
}]);
Încearcă - l singur » Puteți utiliza filtrul la afișarea valorilor dintr-un obiect sau o matrice:
Creați un serviciu numit hexafy :
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
Încearcă - l singur »