Question

Hola muy buenas tarde comunidad,

Actualmente me encuentro desarrollando un proyecto con AngularJS, y esto intentando consumir un servicio desde un controlador. Ambos se encuentran en archivos diferentes. Acá el código...

El código a continuación representa un controlador, que debe de consumir un servicio existente.

// Controlador Menu - menuCtrl
(function(){
    'use strict';
    angular
        .module('app.menu',['app.menuService'])
        .controller('MenuController',Init)      

    function Init(MenuService){
        var vm = this;
        vm.response = MenuService.publico();
    }
})()

Como se puede apreciar, estoy inyectando el servicio al modulo .module('app.menu',['app.menuService']). En la función init, simplemente estoy captando this en una variable, y llamando al MenuService que es el nombre del servicio, el que muestro a continuación:

// Servicio Menu - MenuService
(function(){
    'use strict';
    angular
        .module('app.menuService',[])
        .service('MenuService', ['$http',ObtenerMenu])

    function ObtenerMenu(){     
    }

    ObtenerMenu.prototype.publico = function($http){
        return $http.get('data/data-menu.json').success(function(data){
            return data;            
        });
    }

    return {
        publico : ObtenerMenu.publico
    };
})()

MI problema está en que cuando hago el llamada en el controlador, me aparece el siguiente error:
TypeError: Cannot read property 'get' of undefined at ObtenerMenu.publico .

Sería fenomenal que pudieran ayudarme a localizar el error...
De antemano muchas gracias.

Answer 1

Hay un poco de lío en la notación que sigues (que sigue algunas buenas prácticas, pero creo que algo has liado).

Ese return del final, en realidad es el return del closure (la función exterior, la que has utilizado muy bien para evitar colisiones de nombres, por ejemplo), que por otro lado, no se necesita. Además, definiendo el servicio con service tampoco se necesitaría un return (cosa diferente es si lo defines con factory, que es como yo lo voy a hacer en la versión modificada que te voy a pegar de tu código)

Como tampoco se necesita que definas la función del service como prototype (de hecho, de ahí procede en parte el error que te aparece, no se está inyectando $http porque angular lo intenta inyectar en la función ObtenerMenu, no en la función ObtenerMenu.publico).

Yo lo definiría así (utilizando más buenas prácticas, como inyectar las dependencias "por fuera", así no te equivocas, definir los servicios como factorías y de la manera que ves, etc.):

(function(){ 
'use strict';

angular
    .module('app.menuService',[])
    .factory('MenuService', ObtenerMenu);

ObtenerMenu.$inject = ['$http'];

function ObtenerMenu($http){     
    var service = {
        publico: publico
    }

    return service;

    ///Aquí la definición de las funciones

    function publico = function($http){
        return $http.get('data/data-menu.json').success(function(data){
            return data;            
        });
    }
}})()