English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
AngularJS supporta il concetto di separazione delle preoccupazioni utilizzando l'architettura del sistema di servizi. I servizi sono funzioni JavaScript che si occupano solo di eseguire compiti specifici. Questo li rende entità singole mantenibili e testabili. I controller e i filtri possono chiamarli come necessario. Di solito, i servizi vengono iniettati utilizzando il meccanismo di iniezione di dipendenze di AngularJS.
AngularJS fornisce molti servizi integrati. Ad esempio, $http, $route, $window, $location, ecc. Ogni servizio è responsabile di un compito specifico, come $http per eseguire chiamate ajax per ottenere dati dal server, $route per definire informazioni di routing, ecc. I servizi integrati hanno sempre un prefisso $.
Ci sono due metodi per creare servizi-
Factory (fabbrica)
Service (servizio)
In questo metodo, definiamo prima una fabbrica, quindi assegniamo metodi a essa.
var mainApp = angular.module("mainApp", []);mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;});In questo metodo, definiamo un servizio, quindi assegniamo metodi a esso. Inoltre, iniettiamo servizi già disponibili.
mainApp.service('CalcService', function(MathService) {
this.square = function(a) {
return MathService.multiply(a, a);
}});Di seguito è mostrato l'uso di tutte le istruzioni menzionate sopra-
<html>
<head>
<title>Angular JS Services</title>
<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
</script>
</head>
<body>
<h2>Esempio di applicazione di servizio AngularJS</h2>
<div ng-app="mainApp" ng-controller="CalcController">
<p>Inserisci un numero: <input type="number" ng-model="number" /></p>
<button ng-click="square()">X<sup>2</sup></button>
<p>Risultato: {{result}}</p>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {}}
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
mainApp.service('CalcService', function(MathService) {
this.square = function(a) {
return MathService.multiply(a, a);
}
});
mainApp.controller('CalcController', function($scope, CalcService) {
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
</script>
</body>
</html>测试看看‹/›输出结果
在网络浏览器中打开文件testAngularJS.htm并查看结果。