English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriel de base AngularJS

AngularJS 服务(Service)

AngularJS supporte le concept de séparation des préoccupations par le biais de l'architecture de système de services. Les services sont des fonctions JavaScript, qui ne s'occupent que de tâches spécifiques. Cela les rend des entités individuelles maintenables et testables. Les contrôleurs et les filtres peuvent les appeler selon besoin. Souvent, les services sont injectés en utilisant le mécanisme d'injection de dépendances d'AngularJS.

AngularJS fournit de nombreux services intégrés. Par exemple, $http, $route, $window, $location, etc. Chaque service est responsable d'une tâche spécifique, par exemple $http est utilisé pour effectuer des appels AJAX pour obtenir des données du serveur, $route pour définir les informations de route, etc. Les services intégrés commencent toujours par le préfixe $.

Il existe deux méthodes pour créer un service-

  • Factory (Usine)

  • Service (Service)

Méthode Factory (Usine)

Dans cette méthode, nous définissons d'abord une usine, puis lui assignons des méthodes.

var mainApp = angular.module("mainApp", []);mainApp.factory('MathService', function() {
　　　var factory = {};
　　　
　　　factory.multiply = function(a, b) {
　　　　　　return a　*　b
　　　}
　　　
　　　return factory;});

Méthode de Service (Service)

Dans cette méthode, nous définissons un service, puis lui assignons des méthodes. Nous avons également injecté des services déjà disponibles.

mainApp.service('CalcService', function(MathService) {
　　　this.square = function(a) {
　　　　　　return MathService.multiply(a, a);
　　　}});

Exemple en ligne

Le following exemple montre l'utilisation de toutes les instructions ci-dessus-

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>Services Angular JS</title>
　　　　　　<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>Exemple d'application de service (Service) AngularJS </h2>
　　　　　　
　　　　　　<div ng-app = "mainApp" ng-controller = "CalcController">
　　　　　　　　　<p>Entrez un nombre: <input type = "number" ng-model = "number"　/></p>
　　　　　　　　　<button ng-click = "square()">X<sup>2</sup>/button>
　　　　　　　　　<p>Résultat: {{result}}</p>/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并查看结果。

AngularJS 依赖注入AngularJS Scope(作用域)