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

Tutoriales básicos de AngularJS

服务ServiceAngularJS

AngularJS admite el concepto de separación de preocupaciones utilizando la arquitectura de servicios. Los servicios son funciones JavaScript que solo se encargan de ejecutar tareas específicas. Esto los hace entidades individuales mantenibles y testables. Los controladores y los filtros pueden llamarlos según sea necesario. Generalmente, se inyectan servicios utilizando el mecanismo de inyección de dependencias de AngularJS.

AngularJS proporciona muchos servicios integrados. Por ejemplo, $http, $route, $window, $location, etc. Cada servicio es responsable de una tarea específica, como $http para realizar llamadas AJAX para obtener datos del servidor, $route para definir información de rutas, etc. Los servicios integrados siempre tienen el prefijo $.

Hay dos métodos para crear servicios-

  • Factory (Fábrica)

  • Service (Servicio)

Uso de método Factory (Fábrica)

En este método, primero definimos una fábrica y luego le asignamos métodos.

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

Uso de métodos del servicio (Service)

En este método, definimos un servicio y luego le asignamos métodos. También le inyectamos servicios ya disponibles.

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

Ejemplo en línea

El siguiente ejemplo muestra el uso de todas las directivas mencionadas anteriormente-

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>Angular JS Services</title>
　　　　　　<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>Ejemplo de aplicación de servicio (Service) AngularJS </h2>
　　　　　　
　　　　　　<div ng-app = "mainApp" ng-controller = "CalcController">
　　　　　　　　　<p>Ingrese un número: <input type = "number" ng-model = "number"　/></p>
　　　　　　　　　<button ng-click = "square()">X<sup>2</sup>/button>
　　　　　　　　　<p>Resulta: {{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作用域ScopeAngularJS