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.