Service AngularJS (service)
Dans AngularJS, vous pouvez créer vos propres services ou utiliser des services intégrés.
Qu'est-ce que le service?
Dans AngularJS, un service est une fonction ou un objet qui peut être utilisé dans votre application AngularJS.
AngularJS a plus de 30 services intégrés.
Il existe un service de localisation $ qui peut renvoyer l'adresse URL de la page actuelle.
Exemple
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" ng-contrôleur = "myctrl"> <p> L'URL de la page actuelle: </p> <h3> {{MyUrl}} </h3> </div> <p> Cette instance utilise le service de localisation $ intégré pour obtenir l'URL de la page actuelle. </p> <script> var app = angular.module ('myapp', []); app.Controller ('myctrl', function ($ scope, $ emplacement) {$ scope.myurl = $ localisation.absurl ();}); </ script> </ body> </html>Résultats en cours:
L'URL de la page actuelle:
http://www.runoob.com/try/try.php?filename=try_ng_services
Cette instance utilise le service de localisation $ intégré pour obtenir l'URL de la page actuelle.
Remarque: Le service de localisation $ est passé sous forme de paramètre dans le contrôleur. Si vous souhaitez l'utiliser, vous devez le définir dans le contrôleur.
Pourquoi utiliser le service?
$ http est le service le plus utilisé dans les applications AngularJS. Le service envoie une demande au serveur et l'application répond aux données transmises par le serveur.
AngularJS surveillera toujours les applications et gérera les modifications des événements. Angularjs utilise le service de localisation $ mieux que d'utiliser l'objet Window.Location.
$ HTTP Service
$ http est le service le plus utilisé dans les applications AngularJS. Le service envoie une demande au serveur et l'application répond aux données transmises par le serveur.
Exemple
Utilisez le service $ http pour demander des données au serveur:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </-head> <body> <div ng-app = "MyAppr" ng-Consroller = "MYCTRL"> <p> Bienvenue: </p> <> {{MyWelcome}} <> </div> <p> Le service $ HTTP demande des informations sur le serveur, et la valeur retournée est placée dans la variable "MyWelcome". </p> <script> var app = angular.module ('myapp', []); app.Controller ('myctrl', function ($ scope, $ http) {$ http.get ("welcome.htm"). puis (fonction (réponse) {$ http.get ("wellow.htm.data;});}); </ scriptRésultats en cours:
Message de bienvenue:
Bienvenue à visiter
Le service $ HTTP demande des informations sur le serveur et la valeur renvoyée est placée dans la variable "MyWelcome".
Ce qui précède est une instance de service $ HTTP très simple. Pour plus d'applications de service HTTP $, veuillez consulter le tutoriel AngularJS HTTP.
$ SERVICE DE TIMEUT
Le service AngularJS $ Timeout correspond à la fonction JS Window.SetTimeout.
Exemple
Les informations seront affichées en deux secondes:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </-head> <body> <div ng-app = "MyAppr" ng-Consroller = "MYCTRL"> <p> Les informations s'affichent après deux secondes: </p> <h1> {{MyHeader}} </H1> </div> <p> $ Timeout Access exécute la fonction spécifiée après le nombre spécifié de millisecondes. </p> <script> var app = angular.module ('myapp', []); app.Controller ('myctrl', function ($ scope, $ timeout) {$ scope.myheader = "Hello World!"; 2000);}); </cript> </ body> </html>Résultats en cours:
Les informations seront affichées en deux secondes:
Comment allez-vous aujourd'hui?
$ Timeout Access exécute la fonction spécifiée après le nombre spécifié de millisecondes.
$ service d'intervalle
Le service Interval AngularJS $ correspond à la fonction JS Window.SetInterval.
Exemple
Afficher les informations toutes les deux secondes:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </-head> <body> <div ng-app = "MyAppr" ng-Consroller = "MYCTRL"> <p> L'heure actuelle est: </p> <h1> {{thetime}} </h1> </div> <p> $ L'accès à l'intervalle appelle une fonction ou calcule une expression dans une période spécifiée (en millisecondes). </p> <script> var app = angular.module ('myApp', []); app.Controller ('myctrl', function ($ scope, $ interval) {$ scope.thetime = new Date (). TolocaleTimestring (); $ interal 1000);}); </cript> </ body> </html>Effet de course:
Le moment est maintenant:
15:41:09
$ Interval Access appelle une fonction ou compter dans une période spécifiée (en millisecondes)
Créer un service personnalisé
Vous pouvez créer des accès personnalisés ce lien vers votre module:
Créez un accès nommé Hexafy:
app.service ('hexafy', function () {this.myfunc = function (x) {return x.toString (16);}});Pour utiliser un accès personnalisé, vous devez l'ajouter indépendamment lors de la définition du filtre:
Exemple
Utilisez un service personnalisé Hexafy pour convertir un numéro en hexafy:
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "myctrl"> <p> 255's hexagram est: </p> <h1> {{hex}} </h1> </div> <p> Service personnalisé, utilisé pour convertir les numéros hexagrammes: </p> <cript> var app = angular.module ('myapp', []); app.sservice ('hexafy', fonction () {this.myfunc = function (x) {return x.toString (16);}}); app.Controller ('myctrl', fonction ($ scope, hexafy) {$ scope.hex = hexafy.myfunc (255);}); </script>Résultats en cours:
Le système hexadécimal de 255 est:
ff
Service personnalisé pour convertir les numéros hexadécimaux:
Dans le filtre, utilisez des services personnalisés
Lorsque vous créez un service personnalisé et que vous vous connectez à votre application, vous pouvez l'utiliser dans des contrôleurs, des directives, des filtres ou d'autres services.
Utilisez le service Hexafy dans le filtre Myformat:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </ad> <corps Filtres: <h1> {{255 | myformat}} </h1> </div> <cript> var app = angular.module ('myapp', []); app.service ('hexafy', function () {this.myfunc = function (x) {return x.tostring (16);}}); app.filter ('myformat', ['hexafy', fure Fonction (x) {return hexafy.myfunc (x);};}]); </cript> </ body> </ html>Effet de course:
Utiliser les services dans les filtres:
ff
Lorsque vous obtenez des valeurs dans un tableau d'objets, vous pouvez utiliser des filtres:
Créez un service Hexafy:
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "MYCTRL"> <p> Utilisez des filtres lors de l'obtention des valeurs du tableau [255, 251, 200]: </p> <ul> <li ng-repeat = "x In Counts"> {{x | Myformat}} </li> </ul> <p> Filter utilise un service pour convertir la décimale en hexadécimal. </p> </div> <script> var app = angular.module ('myapp', []); app.service ('hexafy', function () {this.myfunc = function (x) {return x.tostring (16);}}); app.filter ('myformat', ['hexafy', fonction (function) hexafy.myfunc (x);};}]); app.Controller ('myctrl', function ($ scope) {$ scope.couts = [255, 251, 200];}); </cript> </ body> </html>Effet de course:
Utilisez des filtres lors de l'obtention des valeurs du tableau [255, 251, 200]:
Les filtres utilisent des services pour convertir la décimale en hexadécimal.
Ce qui précède est une compilation des informations sur le service AngularJS. Nous continuerons à l'ajouter plus tard. Pour les amis dans le besoin, veuillez y consulter.