Como solucionar este tipo de errores?

Dundee · #1 (**permalink**) 17/12/2015, 03:29

Buenas, llevo apenas una semana con Angular y me he propuesto darle a tope para dominar lo antes posible este magnífico FW , pero me frustra bastante cuando tengo un error y paso horas y horas hasta dar con el. Vengo de trabajar con PHP y con este lenguaje podía debugear paso a paso con Xdebug por ejemplo así localizar de manera más o meno rápida el error lógico o de sintaxis, pero con angular.js (javascript en general) esto no he conseguido hacerlo.

Me he instalado AngularJS Batarang pero no doy con el problema que tengo, y la consola de Chrome solo me muestra este error que no se como "carajo" interpretar para solucionar el problema

Código:

"Error: [ng:areq] http://errors.angularjs.org/1.5.0-rc.0/ng/areq?p0=StoreController&p1=not%20a%20function%2C%20got%20undefined"

.
También he "escrito" el comando "debugger;" en las "partes" que quería analizar y puesto algunos breakpoints en la consola de depuración de Chrome, pero no consigo entender mi error.

Pongo el código por si alguien es tan amable de arrojarme algo de luz.

Basicamente estoy probado los services "Factory" y tengo estos archivos.
Un index.html (html reducido por razones obvias)

Código:

 <body ng-controller = "StoreController as store">
  <div class="container-fluid">
      <nav-menu></nav-menu>
<product-thumb></product-thumb>
</div
   <!-- javascripts -->
    <script type="text/javascript" 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.5.0-rc.0/angular-route.min.js"></script>
    
    <!-- controllers -->
    <script type="text/javascript" src="controllers/store.js"></script>

    <!-- directives -->
    <script type="text/javascript" src="directives/products.js"></script>
    <script type="text/javascript" src="directives/nav-menus.js"></script>

    <!-- services -->
     <script type="text/javascript" src="services/productService.js"></script>
    <script type="text/javascript" src="services/categoryService.js"></script> 
      
    <!-- debuging angular.js -->
    <script type="text/javascript" src="js/debug.js"></script> 
</body>

un controlador "store.js"

Código:

( function () {
    //"use strict";
	angular.module('storeAngular', 
		[
		'store-products', 
		'nav-menus'
		]
	).

	controller('StoreController', ['$scope','Product','Category', 
		function($scope, Product, Category) {

		// Isolate scope.
		$scope.products = {};
		$scope.categories = {};

		// Call factory method from Products.
		Products.all().success(function(data){
			
			$scope.products = data;
			console.log('Products '+$scope.products);
		
		}); 
		// Call factory method from Category.
		Category.all().success(function(data){
			$scope.categories = data;
			console.log('Categories '+$scope.categories);
		
		}); 

	}]);

})();

Los servicios factory (productService.js):

Código:

angular.module('storeAngular', 
		[
		'store-products', 
		'nav-menus'
		]
	).

 factory('Product', ['$http', function ProductFactory($http){
 	return {
 		all: function(){
 			return $http({method:'GET', url: '/products-list.json'});	
		}
 	}
 }]);

Y las directivas (/directives/products.js):

Código:

	// Custom directives.
	// Inyected by storeAngular module
	angular.module('store-products', [ ]).

	directive('productThumb',function(){
		//debugger;
		return {
			restrict: 'E', // Type of Directive (in this case HTML)
			templateUrl: 'partials/product-thumb.html' // Template URL
		};
	}).

	directive('productDetail',function(){
		return {
			restrict: 'E', // Type of Directive (in this case HTML)
			templateUrl: 'partials/product-detail.html' // Template URL
		};
	}).

	directive('rightSidebar',function(){
		return {
			restrict: 'E', // Type of Directive (in this case HTML)
			templateUrl: 'partials/right-sidebar.html' // Template URL
		};
	});

No pego el código de products-list.json' porque es un json con 1000 productos (antes de creare el service funcionaban y cargaban sin problemas).

Nota: el archivo angular.js es un script que he creado para logear en consola determinadas variables como esto:

Código:

var rootEle = document.querySelector("body");
var ele = angular.element(rootEle);

// We can fetch the $scope from the element (or its parent) by using the 
var scope = ele.scope();

Gracias de antemano.

nemesis866 · #2 (**permalink**) 23/12/2015, 11:42

Que tal Dundee, mira a simple vista al definir el servicio Product (productService.js) estas haciendo mal la referencia al modulo "storeAngular".-

Código Javascript:

Ver originalangular.module('storeAngular', 
        [
        'store-products', 
        'nav-menus'
        ]
    ).
 
 factory('Product', ['$http', function ProductFactory($http){
    return {
        all: function(){
            return $http({method:'GET', url: '/products-list.json'});   
        }
    }
 }]);

Lo ideal es hacerlo de esta forma.-

Código Javascript:

Ver originalangular.module('storeAngular')
    .factory('Product', ['$http', function ProductFactory($http){
    return {
        all: function(){
            return $http({method:'GET', url: '/products-list.json'});   
        }
    }
 }]);

No es necesario volver a declarar las dependencias que utiliza el modulo, ya que solo se necesita hacer referencia a el, no se esto sea la causa principal del error.

Por cierto tengo un repositorio en github que es el que utilizo como base para mis proyectos con angular, con el me apoyo para trabajar de una forma más rapida y con ayuda para mostrar errores, te dejo el link por si te sirve.

https://github.com/nemesis866/web-kit-frontend

Saludos.