Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Como solucionar este tipo de errores?

Estas en el tema de Como solucionar este tipo de errores? en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/12/2015, 03:29
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 21 años, 9 meses
Puntos: 8
Como solucionar este tipo de errores?

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.
__________________
Videotutoriales de Drupal
  #2 (permalink)  
Antiguo 23/12/2015, 11:42
Avatar de nemesis866  
Fecha de Ingreso: julio-2009
Ubicación: Jalisco, Mexico
Mensajes: 643
Antigüedad: 14 años, 8 meses
Puntos: 20
Respuesta: Como solucionar este tipo de errores?

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 original
  1. angular.module('storeAngular',
  2.         [
  3.         'store-products',
  4.         'nav-menus'
  5.         ]
  6.     ).
  7.  
  8.  factory('Product', ['$http', function ProductFactory($http){
  9.     return {
  10.         all: function(){
  11.             return $http({method:'GET', url: '/products-list.json'});  
  12.         }
  13.     }
  14.  }]);

Lo ideal es hacerlo de esta forma.-

Código Javascript:
Ver original
  1. angular.module('storeAngular')
  2.     .factory('Product', ['$http', function ProductFactory($http){
  3.     return {
  4.         all: function(){
  5.             return $http({method:'GET', url: '/products-list.json'});  
  6.         }
  7.     }
  8.  }]);

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.
__________________
Artículos de programación Web
Twitter.- @codeandoclub

Etiquetas: angular
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:41.