En AngularJS usted puede hacer su propio servicio, o utilizar uno de los muchos servicios integrados.
¿Qué es un servicio?
En AngularJS, un servicio es una función u objeto, que está disponible para, y limitado a, su aplicación AngularJS.
AngularJS tiene alrededor de 30 servicios integrados. Uno de ellos es el $location de servicio.
La $location servicio tiene métodos que devuelven información sobre la ubicación de la página web actual:
Ejemplo
Utilice el $location servicio en un controlador:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
}); Inténtalo tú mismo " Tenga en cuenta que el $location del servicio se pasa al controlador como un argumento. Con el fin de utilizar el servicio en el controlador, se debe definir como una dependencia.
¿Por qué utilizar los servicios?
Para muchos servicios, como el $location del servicio, parece que usted podría utilizar objetos que ya están en el DOM, como el window.location objeto, y se podía, pero tendría algunas limitaciones, al menos para su aplicación AngularJS.
AngularJS supervisa constantemente su aplicación, y para que le permite manejar los cambios y eventos correctamente, AngularJS prefiere que utilice el $location de servicio en lugar de la window.location objeto.
El Servicio $ http
El $http servicio es uno de los servicios más utilizados en aplicaciones AngularJS. El servicio realiza una solicitud al servidor, y permite que la aplicación manejar la respuesta.
Ejemplo
Utilice el $http servicio para solicitar datos desde el servidor:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
}); Inténtalo tú mismo " Este ejemplo demuestra un uso muy simple de la $http servicio. Más información acerca de la $http servicio en el Http Tutorial AngularJS .
El tiempo de espera de servicio $
El $timeout servicio es la versión de la AngularJS ' window.setTimeout función.
Ejemplo
Mostrar un mensaje nuevo después de dos segundos:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
Inténtalo tú mismo " El intervalo de servicio $
El $interval servicio es la versión de la AngularJS ' window.setInterval función.
Ejemplo
Mostrar la hora cada segundo:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $interval) {
$scope.theTime = new
Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},
1000);
});
Inténtalo tú mismo " A Su Servicio
Para crear su propio servicio, conecte su servicio para el módulo:
Crear un servicio llamado hexafy :
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Para utilizar el servicio de encargo, agregarlo como una dependencia de la hora de definir el filtro:
Ejemplo
Utilizar el servicio por encargo llamado hexafy para convertir un número en un número hexadecimal:
app.controller('myCtrl', function($scope, hexafy ) {
$scope.hex
= hexafy .myFunc(255);
});
Inténtalo tú mismo " Use un servicio personalizado dentro de un filtro
Una vez que haya creado un servicio, y conectarlo a la aplicación, puede utilizar el servicio en cualquier controlador, directiva, filtro, o incluso dentro de otros servicios.
Para utilizar el servicio dentro de un filtro, añadirla como una dependencia de la hora de definir el filtro:
El servicio hexafy utilizado en el filtro myFormat :
app.filter('myFormat',[ 'hexafy' , function( hexafy ) {
return function(x) {
return
hexafy .myFunc(x);
};
}]);
Inténtalo tú mismo " Usted puede utilizar el filtro cuando se muestran los valores de un objeto o una matriz:
Crear un servicio llamado hexafy :
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
Inténtalo tú mismo "