0

estoy adentrándome en el mundo de angular, y tratando de inyectar un service o factory en un controller, pero me salen errores.

Hago un llamado $http.post usando un controller

var app;     

app = angular.module('AppUPC',[]);

app.controller('formulario', ['$scope', '$http', '$httpParamSerializer', 
    function ($scope, $http, $httpParamSerializer){

    $scope.login = function(){

        var datos;

        datos = {

            Usuario: $scope.usuariotxt,
            Password: $scope.passwordtxt

        };

        console.log(datos);          

        var url, method;

        url = 'http://190.109.185.138/Apipedro/api/login';
        method = 'POST';

        $http.post(url, $httpParamSerializer(datos), {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

        }).then(function success(response) {

            $scope.persons = response.data;
            console.log($scope.persons);

        }, function error(response) {

            $scope.status = response.status;
            console.log($scope.status);

        });

     }; 

 }]);

Luego dividí responsabilidades de esta forma usando un service

controller

var app;     

    app = angular.module('AppUPC',[]);

    app.controller('formulario', ['$scope', 'ObtenerDatos', function ($scope, ObtenerDatos){

        $scope.login = function(){

            var datos, usuario;

            datos = {

                Usuario: $scope.usuariotxt,
                Password: $scope.passwordtxt

            };

            usuario = ObtenerDatos;

            console.log(usuario);     

       };         

    }]);

service

app.service('ObtenerDatos',['$scope', '$http', '$httpParamSerializer', function ($scope, $http, $httpParamSerializer){

        $scope.peticion = function (datos){

            var url, method;

            url = 'http://190.109.185.138/Apipedro/api/login';
            method = 'POST';

            $http.post(url, $httpParamSerializer(datos), {
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

            }).then(function success(response) {

                return response.data;

            }, function error(response) {

                return response.status;

            });

        };

}]);

Error

Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- ObtenerDatos

2 respuestas 2

1

Lo que noto es que ademas que inyectar el scope al servicio lo cual seria incorrecto, no defines bien como devuelve los datos el servicio.

Analiza como cambie la implementacion del servicio

app.service('ObtenerDatos',['$http', '$httpParamSerializer', function ($http, $httpParamSerializer){

        function Autenticacion(datos){

            var url = 'http://190.109.185.138/Apipedro/api/login';

            return $http.post(url, $httpParamSerializer(datos), {
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

            });

        };

        return {
            Autenticacion: Autenticacion
        };

}]);

Es importante como se define el return del final del servicio indicando la funcionalidad que expone Tambien veras como se devuelve un promise del http para usarla desde el controller

var app = angular.module('AppUPC',[]);

app.controller('formulario', ['$scope', 'ObtenerDatos', function ($scope, ObtenerDatos){

    $scope.login = function(){

        var datos = {
            Usuario: $scope.usuariotxt,
            Password: $scope.passwordtxt
        };

        var usuario = ObtenerDatos.Autenticacion(datos)
                                .then(function(result){
                                    console.log(result);
                                }, function(err){
                                    console.log(err);
                                }});



   };         

}]);

En el controller es que defines las funciones del then obteniendo la respuesta de la invocacion al servicio

1
1

No puedes inyectar el scope en un servicio. Un servicio se inicializa una vez al entrar en la página, y en ese momento no existe el scope que quieres inyectar. Podrías inyectar $rootScope, pero no ayudaría en tu caso. Cambia tu servicio a:

app.service('ObtenerDatos',['$http', '$httpParamSerializer', function ($http, $httpParamSerializer){

            return function (datos){

                var url, method;

                url = 'http://190.109.185.138/Apipedro/api/login';
                method = 'POST';

                return $http.post(url, $httpParamSerializer(datos), {
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

                }).then(function success(response) {

                    return response.data;

                }, function error(response) {

                    return response.status;

                });

            };

    }]);

Y el código con el que llamas al servicio cámbialo a:

ObtenerDatos(datos).then(function (resultado) {
    console.log(resultado);
});

También te recomendaría que el nombre del servicio empezara con minúscula (es la convención habitual en angular), y probablemente necesites repasar el uso de promesas por lo que he visto que has hecho en el código (el motivo por el que he usado .then cuando he llamado al servicio).

3
  • Gracias @Pablo, voy a probar, aunque un poco confuso con lo de los service and factory en angular, pero poco a poco tratando de aprender. Commented el 22 feb. 2016 a las 21:11
  • Lo probe me aparece esto TypeError: Cannot read property 'then' of undefined Commented el 22 feb. 2016 a las 21:28
  • @PedroMiguelPimientaMorales Se ma había pasado poner un return antes de $http.post. No he tenido tiempo de hacer una prueba, pero debería funcionar ahora. Cuando pueda más tarde lo probaré.
    – Pablo
    Commented el 23 feb. 2016 a las 8:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.