menú
buscar
¡Esta es una revisión vieja del documento!
3.10 Ejemplo servicio
En este tema retornamos ahora el ejemplo del seguro médico para añadir un provider.
Al ver el servicio $http en el tema 3.2 $http vimos que no debía hacerse una llamada a $http en el propio controlador . Ahora vamos a crea un provider que encapsule la llamada a $http.
El servicio será un objeto llamado remoteResource que nos permitirá acceder al servidor para acceder a los datos. Como aun no hemos visto la parte de servidor ni la parte de REST ni las promesas , solo vamos a hacer un único método sencillo que nos permita leer los datos, mas adelante en el curso seguiremos mejorando este servicio. Por lo tanto aun será un poco chapuza el ejemplo.
Nuestro servicio va a ser un provider ya que tenemos que indicar la url a partir de la que se debe bajar los datos. Como hemos hecho en el tema anterior eso lo pondremos en una constante de nuestra aplicación.
app.constant("baseUrl",".");
La contante vale el valor ”.” porque los datos a bajar están en la misma ruta que nuestra página web.
El provider tendrá un único método para configurarlo llamado setBaseUrl por lo que tendremos el siguiente bloque config:
app.config(['baseUrl','remoteResourceProvider',function(baseUrl,remoteResourceProvider){
remoteResourceProvider.setBaseUrl(baseUrl);
}]);
Fijaté como el nombre del provider es “remoteResourceProvider”, es decir que acaba en “Provider” aunque nuestro servicio solo se llama “remoteResource”.
Ahora vamos a definir el provider
function RemoteResourceProvider() {
var _baseUrl;
this.setBaseUrl=function(baseUrl) {
_baseUrl=baseUrl;
}
this.$get=['$http',function($http) {
return new RemoteResource($http,_baseUrl);
}];
}
app.provider("remoteResource",RemoteResourceProvider);
- Línea 1: Definimos el constructor de la clase
RemoteResourceProvider - Línea 3: El método público llamado
setBaseUrlpara configurar el servicio. - Línea 6: Es el factory-provider con la función de factoría a la que se le inyecta el servicio de
$http. - Línea 7: Ahora la función de factoría crea el nuevo objeto de la clase
RemoteResource. Siendo esta clase realmente la que hace todo el trabajo y la que se usará desde el controlador. En el constructor además de pasarle el$httpque necesita, también se le pasa la URL Base para configurar el servicio. - Línea 11: Finalmente se registra el
provider.
Ejemplo
El código completo del ejemplo es el siguiente:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="SeguroController">
<form>
<fieldset>
<legend>Seguro Médico</legend>
<label for="nif">NIF:</label><input id="nif" name="nif" type="text" ng-model="seguro.nif" /><br>
<label for="nombre">Nombre:</label><input id="nombre" name="nombre" type="text" ng-model="seguro.nombre" /><br>
<label for="ape1">1º Apellido:</label><input id="ape1" name="ape1" type="text" ng-model="seguro.ape1" /><br>
<label for="edad">Edad:</label><input id="edad" name="edad" type="text" ng-model="seguro.edad" /><br>
<label for="sexo">Sexo:</label><select id="sexo" name="sexo" type="checkbox" ng-model="seguro.sexo" ><option value="">--Elige opcion--</option><option value="H">Hombre</option><option value="M">Mujer</option></select><br>
<label for="casado">Casado:</label><input id="casado" name="casado" type="checkbox" ng-model="seguro.casado" /><br>
<label for="numHijos">Nº Hijos:</label><input id="numHijos" name="numHijos" type="text" ng-model="seguro.numHijos" /><br>
<label for="embarazada">Embarazada:</label><input id="embarazada" name="embarazada" type="checkbox" ng-model="seguro.embarazada" /><br>
<label for="fechaCreacion">Fecha de creación:</label><input id="fechaCreacion" name="fechaCreacion" type="text" ng-model="seguro.fechaCreacion" /><br>
</fieldset>
<fieldset>
<legend>Coberturas</legend>
<label for="oftalmologia">Oftalmologia:</label><input id="oftalmologia" name="oftalmologia" type="checkbox" ng-model="seguro.coberturas.oftalmologia" /><br>
<label for="dental">Dental:</label><input id="dental" name="dental" type="checkbox" ng-model="seguro.coberturas.dental" /><br>
<label ng-show="seguro.sexo==='M'" for="fecundacionInVitro">Fecundacion In Vitro:</label><input ng-show="seguro.sexo==='M'" id="fecundacionInVitro" name="fecundacionInVitro" type="checkbox" ng-model="seguro.coberturas.fecundacionInVitro" /><br>
</fieldset>
<fieldset>
<legend>Enfermedades</legend>
<label for="corazon">Corazon:</label><input id="corazon" name="corazon" type="checkbox" ng-model="seguro.enfermedades.corazon" /><br>
<label for="estomacal">Estomacal:</label><input id="estomacal" name="estomacal" type="checkbox" ng-model="seguro.enfermedades.estomacal" /><br>
<label for="rinyones">Riñones:</label><input id="rinyones" name="rinyones" type="checkbox" ng-model="seguro.enfermedades.rinyones" /><br>
<label for="alergia">Alergia:</label><input id="alergia" name="alergia" type="checkbox" ng-model="seguro.enfermedades.alergia" /><br>
<label for="nombreAlergia">Nombre de la alergia:</label><input ng-disabled="seguro.enfermedades.alergia===false" id="nombreAlergia" name="nombreAlergia" type="text" ng-model="seguro.enfermedades.nombreAlergia" /><br>
</fieldset>
</form>
</body>
</html>
var app=angular.module("app",[]);
app.constant("baseUrl",".");
function RemoteResourceProvider() {
var _baseUrl;
this.setBaseUrl=function(baseUrl) {
_baseUrl=baseUrl;
}
this.$get=['$http',function($http) {
return {
get:function(fnOK,fnError) {
$http({
method: 'GET',
url: _baseUrl+'/datos.json'
}).success(function(data, status, headers, config) {
fnOK(data);
}).error(function(data, status, headers, config) {
fnError(data,status);
});
}
}
}];
}
app.provider("remoteReource",RemoteResourceProvider);
app.config(['baseUrl','remoteReourceProvider',function(baseUrl,remoteReourceProvider){
remoteReourceProvider.setBaseUrl(baseUrl);
}]);
app.controller("SeguroController",['$scope','remoteReource',function($scope,remoteReource) {
$scope.seguro={
nif:"",
nombre:"",
ape1:"",
edad:undefined,
sexo:"",
casado:false,
numHijos:undefined,
embarazada:false,
coberturas: {
oftalmologia:false,
dental:false,
fecundacionInVitro:false
},
enfermedades:{
corazon:false,
estomacal:false,
rinyones:false,
alergia:false,
nombreAlergia:""
},
fechaCreacion:new Date()
}
remoteReource.get(function(seguro) {
$scope.seguro=seguro;
},function(data,status) {
alert("Ha fallado la petición. Estado HTTP:"+status);
});
}]);
