AngularJS soutient le concept de «séparation des préoccupations» dans l'architecture à l'aide de services. Un service est une fonction JavaScript et est responsable de ne faire qu'une seule tâche spécifique. Cela en fait également une entité distincte qui est maintenue et testée. Contrôleurs, les filtres peuvent les qualifier de base aux exigences. Le service utilise le mécanisme d'injection de dépendance d'AngularJS pour l'injecter normalement.
AngularJS fournit de nombreux services intrinsèques, tels que: $ http, $ Route, $ window, $ emplacement, etc. Chaque service est responsable, par exemple, d'une tâche spécifique, $ http est utilisé pour créer des appels Ajax pour obtenir des données de serveur. $ Route est utilisé pour définir les informations de routage, etc. Le service intégré est toujours préfixé avec le symbole $.
Il existe deux façons de créer un service.
usine
Servir
Utilisation de méthodes d'usine
À l'aide de la méthode d'usine, nous définissons d'abord une usine, puis nous y attribuons la méthode.
var mainApp = angular.module ("mainApp", []); mainApp.factory ('mathService', function () {var factory = {}; factory.multiply = function (a, b) {return a * b} return factory;});Comment utiliser le service
À l'aide de la méthode de service, nous définissons un service, puis attribuons la méthode. Injecter également des services qui sont déjà disponibles.
mainApp.Service ('calcService', function (mathService) {this.square = function (a) {return mathService.multiply (a, a);}});exemple
Les exemples suivants montreront toutes les instructions ci-dessus.
testangularjs.html
<html> <éad- head> <ititle> Formulaires JS angulaires </title> </ head> <body> <h2> AngularJS Exemple d'application </h2> <div ng-app = "MainApp" ng-controlller = "CalcController"> <p> Entrez un nombre: <entrée type = "nombre" ng-model = "nombre" /> <bouton ng-click = "square ()"> x <sup> 2 </ sup> </ bouton> <p> Résultat: {{résultat}} </p> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular 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', fonction ($ scope, calcService) {$ scope.square = function () {$ scope.result = calcService.square ($ scope.number);}}); </cript> </ body> </html>résultat
Ouvrez Textangularjs.html dans un navigateur Web. Les résultats sont les suivants.
Ce qui précède est les informations de base pour les services AngularJS. Nous continuerons d'organiser des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!