express rest

17-nodejs-promesas-y-modulos/1-modulos-propios/1-app.js

@@ -8,6 +8,8 @@ billetero.ingresar("10");
 ratilla.ingresar(12.8);
 ratilla.retirar(2.4);
 billetero.retirar("1");
+billetero.retirar("1");
+ratilla.ingresar(5);
 
 console.log(ratilla.propietario + " tiene " + ratilla.saldo + " euros");
 console.log(billetero.propietario + " tiene " + billetero.saldo + " euros");

19-rutas-con-express/rutas.md

@@ -5,7 +5,7 @@
 ## Parámetros
 	- /:parametro/
 ## Variantes con patrones de cadenas y expresiones regulares
-	- se usan tando en las rutas como sobre todo en los parámetros
+	- se usan tanto en las rutas como sobre todo en los parámetros
 
 	
 	

21-rest-advance/client/app.js

@@ -1,35 +0,0 @@
-angular.module('controlCajaApp', ['ui.router','ngCookies', 'ngResource']);
-
-angular.module('controlCajaApp').config(function ($stateProvider,$locationProvider) {
-	$stateProvider
-        .state('total', {
-			url: '/',
-            controller: 'CajaCtrl as caja',
-            templateUrl: 'total.html'
-        })
-        .state('nuevo', {
-			url: '/nuevo',
-			controller: 'CajaCtrl as caja',
-            templateUrl: 'nuevo.html'
-        })
-        .state('lista', {
-        	url: '/lista',
-			controller: 'CajaCtrl as caja',
-            templateUrl: 'lista.html'
-        })
-		.state('movimiento', {
-        	url: '/movimiento/:id', // declaracion de parametros en rutas
-			controller: 'MovimientoCtrl as vm',
-            templateUrl: 'movimiento.html'
-        })
-        .state('registro', {
-        	url: '/registro',
-			controller: 'RegistroCtrl as registro',
-            templateUrl: 'registro.html'
-        })
-        .state('not-found', {
-        	url: '*path',
-            controller: 'CajaCtrl as caja',
-            templateUrl: 'total.html'
-        });
-});

21-rest-advance/client/app/app.js

@@ -0,0 +1,14 @@
+(function () {
+
+	/** original */
+	//angular.module('cashFlow', ['ngResource', 'seguridad', 'ngCookies', 'ui.router', 'registro', 'lista', 'total', 'nuevo', 'abComponentes', 'abMenuNavegacion']);
+
+	/** estructura modular jerárquica */
+	angular.module('cashFlow', ['terceros', 'componentes', 'estados']);
+	angular.module('terceros', ['ngResource', 'ngCookies', 'ui.router']);
+	angular.module('componentes', ['seguridad', 'abComponentes', 'abMenuNavegacion']);
+	angular.module('estados', ['registro', 'lista', 'total', 'nuevo']);
+
+	/** módulos para cada componente */
+
+}());

21-rest-advance/client/app/common/appSecurity.js

@@ -1,29 +1,37 @@
 (function () {
+
+	angular.module('seguridad', []).config(configuradorInterceptores);
+
 	function configuradorInterceptores($httpProvider) {
+		/** la configuración de $http sirve para $resource */
 		$httpProvider.interceptors.push(funcionInterceptoraSeguridad);
 	}
 
-	function funcionInterceptoraSeguridad($q, $injector, $cookieStore, $rootScope) {
+
+	function funcionInterceptoraSeguridad($injector, $q, $cookies, $rootScope) {
 
 		var interceptor = {};
+
 		interceptor.request = function (request) {
-			request.headers["sessionId"] = $cookieStore.get("sessionId");
-			return request || $q.when(request);
+			request.headers["sessionId"] = $cookies.get("sessionId");
+			return request;
 		};
+
 		interceptor.responseError = function (response) {
 			var state = $injector.get('$state');
-            if (response.status === 401) {
+			if (response.status === 401) {
 				$rootScope.mensaje = "No hay derecho!!!";
 				state.go('registro');
 			} else if (response.status === 419) {
 				$rootScope.mensaje = "Estoy caduco!!!";
-				$cookieStore.remove("sessionId")
+				$cookies.remove("sessionId")
 				state.go('registro');
 			};
 			return $q.reject(response);
 		}
+
 		return interceptor;
 	}
 
-	angular.module('controlCajaApp').config(configuradorInterceptores);
+
 }());

21-rest-advance/client/app/common/directivas.js

@@ -0,0 +1,25 @@
+(function () {
+
+	//cambios en las rutas relativas de las plantillas
+
+	angular.module('abDirectivas', [])
+        .value("seleccionadoLink",seleccionadoLink )
+		.directive('abSeleccionado', seleccionado)
+		.directive('input', seleccionado);
+
+    function seleccionadoLink(scope, element, attrs) {
+        element.bind('mouseenter', function () {
+            element.css('background-color', 'yellow');
+        });
+        element.bind('mouseleave', function () {
+            element.css('background-color', 'white');
+        });
+    }
+	function seleccionado(seleccionadoLink) {
+		return {
+			link: seleccionadoLink
+		};
+	}
+
+
+}());

21-rest-advance/client/app/common/filtros.js

@@ -0,0 +1,71 @@
+(function () {
+
+	angular.module('abFiltros', [])
+		.filter('abLimpiarCadena', limpiarCadena)
+		.filter('abRecortar', recortar)
+		.filter('abRellenarVacios', rellenarVacios)
+		.filter('abGranImporte', granImporte);
+
+	function limpiarCadena() {
+		var funcionFiltro = function (cadena) {
+			if (cadena) {
+				var resultado = cadena.toLowerCase();
+				var patron = /[^-A-Za-z0-9]+/g;
+				return resultado.replace(patron, '_');
+			}
+		};
+		return funcionFiltro;
+	}
+
+	function recortar() {
+		var funcionFiltro = function (cadena, largo, quitarInicio) {
+			if (!cadena) {
+				return ''
+			}
+			if (!largo) {
+				largo = 10
+			}
+			if (cadena.length <= largo) {
+				return cadena
+			}
+			if (quitarInicio) {
+				return '...' + cadena.substring(cadena.length - largo)
+			} else {
+				return cadena.substring(0, largo) + '...'
+			}
+		};
+		return funcionFiltro;
+	}
+
+	function rellenarVacios() {
+		var funcionFiltro = function (cadena) {
+			try {
+				if (!cadena || cadena === undefined || cadena.trim() === "") {
+					return '---';
+				};
+			} catch (err) {
+				return '---';
+			}
+			return cadena;
+		}
+		return funcionFiltro;
+	}
+
+	function granImporte() {
+		var funcionFiltro = function (movimientos, valorCorte) {
+			if (valorCorte) {
+				var filtrados = [];
+				for (var i = 0; i < movimientos.length; i++) {
+					var mov = movimientos[i];
+					if (mov.importe >= valorCorte) {
+						filtrados.push(mov);
+					}
+				}
+				return filtrados;
+			} else {
+				return movimientos;
+			}
+		};
+		return funcionFiltro;
+	}
+}());

21-rest-advance/client/app/common/states.js

@@ -0,0 +1,9 @@
+// SÓLO PARA LOS ESTADOS NO CONTROLADOS.
+// los demás se autogestionan en cada componente
+angular.module('cashFlow').config(function ($stateProvider) {
+	$stateProvider
+		.state('not-found', {
+			url: '*path',
+			templateUrl: './app/states/not-found.html'
+		});
+});

21-rest-advance/client/app/components/cabecera/cabecera.html

@@ -0,0 +1,6 @@
+<div class="panel panel-primary">
+    <div class="panel-heading">Cash Flow</div>
+    <div class="panel-body">
+        <div class="lead" ng-transclude></div>
+    </header>
+</div>

21-rest-advance/client/app/components/cabecera/cabecera.js

@@ -0,0 +1,12 @@
+(function () {
+	angular.module('abCabecera', [])
+		.directive('abCabecera', cabecera);
+
+	function cabecera() {
+		return {
+			transclude: true,
+			templateUrl: './app/components/cabecera/cabecera.html'
+		};
+	};
+
+}());

21-rest-advance/client/app/components/componentes.js

@@ -0,0 +1,21 @@
+(function () {
+	//cambios en las rutas relativas de las vistas
+
+	angular.module('abComponentes', [])
+		.directive('abPiePagina', piePagina)
+		.directive('abContenido', contenido);
+
+	function piePagina() {
+		return {
+			template: '<footer class="container"><hr/><p class="text-center">Desarrollado con AngularJS by Google. Por Alberto Basalo - <a href="http://agorabinaria.com">Ágora Binaria SL</a></p></footer>'
+		};
+	};
+
+	function contenido() {
+		return {
+			template: '<div class="container text-center" style="padding-top:60px;" ui-view></div>'
+		};
+	};
+
+
+}());

21-rest-advance/client/app/components/menuNavegacion/menu-navegacion.html

@@ -0,0 +1,17 @@
+<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
+	<div class="navbar-inner">
+		<div class="container">
+			<ul class="nav navbar-nav">
+				<li ng-class="{ active: menu.isActive('total') }">
+					<a ui-sref="total">Totales</a>
+				</li>
+				<li ng-class="{ active: menu.isActive('nuevo') }">
+					<a ui-sref="nuevo">Nuevo</a>
+				</li>
+				<li ng-class="{ active: menu.isActive('lista') }">
+					<a ui-sref="lista">Lista</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+</nav>

21-rest-advance/client/app/components/menuNavegacion/menuCtrl.js

@@ -0,0 +1,10 @@
+(function () {
+	angular.module('abMenuNavegacion').controller('MenuCtrl', menuCtrl);
+
+	function menuCtrl($state) {
+		this.isActive = function (estado) {
+			return $state.is(estado);
+		}
+	}
+
+}());

21-rest-advance/client/app/components/menuNavegacion/menuNavegacion.js

@@ -0,0 +1,12 @@
+(function () {
+	angular.module('abMenuNavegacion', [])
+		.directive('abMenuNavegacion', menuNavegacion);
+
+	function menuNavegacion() {
+		return {
+			templateUrl: './app/components/menuNavegacion/menu-navegacion.html',
+			controller: "MenuCtrl as menu"
+		};
+	}
+
+	}());

21-rest-advance/client/app/components/valoracion/tpl-valoracion.html

@@ -0,0 +1,8 @@
+<span ng-repeat="estrella in valoracion.estrellas" ng-click="valoracion.marcar($index)">
+        <span class="lead"
+                ng-class=
+                "{'text-danger h3': estrella.marcada,
+                'text-muted small': !estrella.marcada}">
+                <b><u>*</u></b>
+        </span>
+</span>

21-rest-advance/client/app/components/valoracion/valoracion.js

@@ -0,0 +1,46 @@
+(function () {
+	angular.module('abValoracion', [])
+		.directive('abValoracion', valoracion);
+
+	function valoracion() {
+		return {
+			restrict: 'AE',
+			templateUrl: './app/components/valoracion/tpl-valoracion.html',
+			scope: {
+				valor: '=',
+				max: '@',
+				soloLectura: '@'
+			},
+			bindToController: true,
+			controllerAs: "valoracion",
+			controller: valoracionCtrl
+		}
+	}
+
+	function valoracionCtrl() {
+		var vm = this;
+
+		vm.marcar = function (indice) {
+			if (vm.soloLectura && vm.soloLectura === 'true') {
+				return;
+			}
+			vm.valor = indice + 1;
+			actualizar();
+		};
+
+		actualizar();
+
+		function actualizar() {
+			if (!vm.valor) vm.valor = 1;
+			vm.estrellas = [];
+			for (var i = 0; i < vm.max; i++) {
+				var estrella = {
+					marcada: (i < vm.valor)
+				};
+				vm.estrellas.push(estrella);
+			}
+		};
+	}
+
+
+}());

21-rest-advance/client/app/states/_abstate/abstate.html

@@ -0,0 +1,3 @@
+<div>
+	{{ state.title }}
+</div>

21-rest-advance/client/app/states/_abstate/abstate.js

@@ -0,0 +1,56 @@
+"use strict";
+(function () {
+    var componentName = "state";
+    angular
+        .module(componentName, ['ui.router', 'ngResource'])
+        .config(stateConfig)
+        .directive(componentName, directive)
+        .service("servicio_"+componentName, service)
+
+    function stateConfig($stateProvider) {
+        $stateProvider
+            .state(componentName, {
+                url: '/' + componentName,
+                template: '<' + componentName + '></' + componentName + '>'
+            });
+    }
+
+    function directive() {
+        return {
+            templateUrl: 'app/states/' + componentName + '/' + componentName + '.html',
+            controller: controller,
+            controllerAs: componentName,
+            bindToController: true,
+            scope: {}
+        }
+    }
+
+    function controller(servicio_state) {
+        var vm = this;
+        vm.title = "Mi Estado";
+		vm.dato = servicio_state.Recurso;
+    }
+
+    function service($resource) {
+		var url = '/api/' + componentName + 's/:id'
+        this.Recurso = $resource(
+            url,
+            {
+                id: '@_id'
+            },
+            {
+                'update':
+                {
+                    method: 'PUT'
+                }
+            });
+    }
+})();
+
+
+
+
+
+
+
+

21-rest-advance/client/app/states/lista/fila-movimiento/fila-movimiento.html

@@ -0,0 +1,9 @@
+<td class="text-left">{{movimiento.fecha | date}}</td>
+<td class="text-left">{{movimiento.tipo}}</td>
+<td class="text-left">{{movimiento.categoria}}</td>
+<td class="text-left" ng-class="{'text-success': movimiento.tipo=='Ingreso', 'text-danger' : movimiento.tipo=='Gasto'}">
+	{{movimiento.importe | number:2}} €
+</td>
+<td class="text-left">
+	<ab-valoracion valor="movimiento.valoracion" max="10" solo-lectura="true"></ab-valoracion>
+</td>

21-rest-advance/client/app/states/lista/fila-movimiento/fila-movimiento.js

@@ -0,0 +1,18 @@
+(function () {
+
+	angular.module('lista')
+		.directive('filaMovimiento', filaMovimiento);
+
+
+	function filaMovimiento() {
+		return {
+			restrict: 'A',
+			templateUrl: './app/states/lista/fila-movimiento/fila-movimiento.html',
+			scope: {
+				movimiento: "="
+			}
+		};
+	}
+
+
+}());

21-rest-advance/client/app/states/lista/lista.html

@@ -0,0 +1,26 @@
+<section name="Lista">
+	<div ab-cabecera>Estos son tus movimientos recientes.</div>
+	<br>
+	<label class="control-label" for="importe">Filtrar:</label>
+	<input type="text" name="filtro" placeholder="qué buscas?" class="input" ng-model="lista.valorBuscado">
+	<button class="btn-primary" ng-click="lista.valorCorte=0">Ver todos los movimientos</button>
+	<button class="btn-danger" ng-click="lista.valorCorte=1000">Sólo grandes movimientos</button>
+	<table class="table">
+		<thead>
+			<tr>
+				<th><a href="" ng-click="lista.campo = 'fecha'; lista.sentido = !lista.sentido ">Fecha</a>
+				</th>
+				<th>Tipo</th>
+				<th>Categoría</th>
+				<th><a href="" ng-click="lista.campo = 'importe'; lista.sentido = !lista.sentido ">Importe</a>
+				</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr ng-repeat="movimiento in lista.movimientos | abGranImporte:lista.valorCorte | filter:lista.valorBuscado | orderBy:lista.campo:lista.sentido"
+			fila-movimiento movimiento="movimiento"
+			ab-seleccionado>
+			</tr>
+		</tbody>
+	</table>
+</section>

21-rest-advance/client/app/states/lista/lista.js

@@ -0,0 +1,36 @@
+"use strict";
+(function () {
+    var componentName = "lista";
+    angular
+        .module(componentName, ['ui.router', 'ngResource', 'abDirectivas', 'abValoracion', 'abFiltros', 'abCabecera' ])
+        .config(stateConfig)
+        .directive(componentName, directive)
+        .service("servicio_"+componentName, service)
+
+    function stateConfig($stateProvider) {
+        $stateProvider
+            .state(componentName, {
+                url: '/' + componentName,
+                template: '<' + componentName + '></' + componentName + '>'
+            });
+    }
+
+    function directive() {
+        return {
+            templateUrl: 'app/states/' + componentName + '/' + componentName + '.html',
+            controller: controller,
+            controllerAs: componentName,
+            bindToController: true,
+            scope: {}
+        }
+    }
+
+    function controller(servicio_lista) {
+        this.movimientos = servicio_lista.Movimientos.query();
+    }
+
+    function service($resource) {
+        this.Movimientos = $resource("/api/priv/movimientos/");
+    }
+})();
+

21-rest-advance/client/app/states/not-found.html

@@ -0,0 +1,3 @@
+<section name="total">
+	<ab-cabecera>No se ha encontrado lo que buscabas</ab-cabecera>
+</section>

21-rest-advance/client/app/states/nuevo/nuevo.html

@@ -0,0 +1,68 @@
+<section name="nuevoMovimiento" class="row-fluid">
+    <ab-cabecera>Introduce tus movimientos</ab-cabecera>
+    <form class="form-horizontal text-left">
+        <fieldset>
+            <div class="row-fluid">
+                <div class="col-xs-12 col-sm-6">
+                    <div class="control-group">
+                        <label class="control-label" for="tipo">Tipo</label>
+                        <div class="controls">
+                            <div class="btn-group">
+                                <button type="button" class="btn btn-success" ng-class="{'active':nuevo.nuevoMovimiento.esIngreso}" ng-click="nuevo.nuevoMovimiento.esIngreso=1; nuevo.nuevoMovimiento.esGasto=0">
+                                    <span ng-class="{'small':nuevo.nuevoMovimiento.esGasto}">+ Ingreso</span>
+                                </button>
+                                <button type="button" class="btn btn-danger" ng-class="{'active':nuevo.nuevoMovimiento.esGasto}" ng-click="nuevo.nuevoMovimiento.esIngreso=0; nuevo.nuevoMovimiento.esGasto=1">
+                                    <span ng-class="{'small':nuevo.nuevoMovimiento.esIngreso}">- Gasto</span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <label class="control-label" for="categ">Categoría</label>
+                        <div class="controls">
+                            <select ng-show="nuevo.nuevoMovimiento.esIngreso" name="categoria" ng-model="nuevo.nuevoMovimiento.categoria" ng-options="categoria for categoria in nuevo.maestros.categoriasIngresos"></select>
+                            <select ng-show="nuevo.nuevoMovimiento.esGasto" name="categoria" ng-model="nuevo.nuevoMovimiento.categoria" ng-options="categoria for categoria in nuevo.maestros.categoriasGastos"></select>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-6">
+                    <div class="control-group">
+                        <label class="control-label" for="fecha">Fecha</label>
+                        <div class="controls">
+                            <input type="date" name="fecha" placeholder="" class="input" ng-model="nuevo.nuevoMovimiento.fecha">
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <label class="control-label" for="importe">Importe</label>
+                        <div class="controls">
+                            <input type="number" name="importe" placeholder="" class="input" ng-model="nuevo.nuevoMovimiento.importe">
+                        </div>
+                    </div>
+                </div>
+                <div class="row-fluid">
+				<div class="col-xs-12 col-sm-6">
+					<div class="control-group">
+						<label class="control-label" for="texto">Texto</label>
+						<div class="controls">
+							<input type="text" name="texto" class="input" ng-model="nuevo.nuevoMovimiento.texto">
+						</div>
+					</div>
+				</div>
+				<div class="col-xs-12 col-sm-6">
+					<div class="control-group">
+						<label class="control-label" for="valoracion">Valoración</label>
+						<div class="controls">
+							<div ab-valoracion valor="nuevo.nuevoMovimiento.valoracion" max="10" solo-lectura="false"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+            </div>
+            <div class="text-right">
+                <button style="margin-top: 20px" type="button" class="btn btn-lg btn-primary" ng-click="nuevo.guardarMovimiento()">
+                    <span>Guardar {{ nuevo.tipo(nuevo.nuevoMovimiento) }}</span>
+                </button>
+            </div>
+        </fieldset>
+    </form>
+</section>

21-rest-advance/client/app/states/nuevo/nuevo.js

@@ -0,0 +1,53 @@
+"use strict";
+(function () {
+    var componentName = "nuevo";
+    angular
+        .module(componentName, ['ui.router', 'ngResource', 'abDirectivas','abValoracion', 'abCabecera'])
+        .config(stateConfig)
+        .directive(componentName, directive)
+        .service("servicio_"+componentName, service)
+
+    function stateConfig($stateProvider) {
+        $stateProvider
+            .state(componentName, {
+                url: '/' + componentName,
+                template: '<' + componentName + '></' + componentName + '>'
+            });
+    }
+
+    function directive() {
+        return {
+            templateUrl: 'app/states/' + componentName + '/' + componentName + '.html',
+            controller: controller,
+            controllerAs: componentName,
+            bindToController: true,
+            scope: {}
+        }
+    }
+
+    function controller(servicio_nuevo, $state) {
+        var vm = this;
+        vm.maestros = servicio_nuevo.Maestros.get();
+
+		vm.nuevoMovimiento = new servicio_nuevo.Movimientos();
+		vm.nuevoMovimiento.esIngreso = 1;
+		vm.nuevoMovimiento.fecha = new Date();
+
+        vm.guardarMovimiento = function () {
+			vm.nuevoMovimiento.tipo = vm.tipo(vm.nuevoMovimiento);
+			vm.nuevoMovimiento.$save()
+				.then(function (result) {
+					$state.go('lista');
+				});
+		};
+
+		vm.tipo = function (movimiento) {
+			return movimiento.esIngreso && 'Ingreso' || 'Gasto'
+		}
+    }
+
+    function service($resource) {
+        this.Maestros = $resource("/api/pub/maestros/");
+        this.Movimientos =  $resource("/api/priv/movimientos/");
+    }
+})();

21-rest-advance/client/app/states/registro/registro.html

@@ -0,0 +1,37 @@
+<div class="container">
+	<div class="row">
+		<div class="span12">
+			<form class="form-horizontal">
+				<fieldset>
+					<div id="legend">
+						<legend class="">Login</legend>
+					</div>
+					<div class="control-group">
+						<!-- email -->
+						<label class="control-label" for="email">Email</label>
+						<div class="controls">
+							<input type="email" ng-model="registro.usuario.email" name="email" class="input-xlarge">
+						</div>
+					</div>
+					<div class="control-group">
+						<!-- Password-->
+						<label class="control-label" for="password">Password</label>
+						<div class="controls">
+							<input type="password" ng-model="registro.usuario.password" name="password" class="input-xlarge">
+						</div>
+					</div>
+					<div class="control-group">
+						<!-- Button -->
+						<div class="controls">
+							<button class="btn btn-primary" ng-click="registro.entrar()">Login</button>
+						</div>
+						<!-- Button -->
+						<div class="controls">
+							<button class="btn btn-success" ng-click="registro.registrar()">Registro</button>
+						</div>
+					</div>
+				</fieldset>
+			</form>
+		</div>
+	</div>
+</div>

21-rest-advance/client/app/states/registro/registro.js

@@ -0,0 +1,50 @@
+"use strict";
+(function () {
+    var componentName = "registro";
+    angular
+        .module(componentName, ['ui.router', 'ngResource','abDirectivas', 'abCabecera'])
+        .config(stateConfig)
+        .directive(componentName, directive);
+
+    function stateConfig($stateProvider) {
+        $stateProvider
+            .state(componentName, {
+                url: '/' + componentName,
+                template: '<' + componentName + '></' + componentName + '>'
+            });
+    }
+
+    function directive() {
+        return {
+            templateUrl: 'app/states/' + componentName + '/' + componentName + '.html',
+            controller: controller,
+            controllerAs: componentName,
+            bindToController: true,
+            scope: {}
+        }
+    }
+
+    function controller($state, $http, $cookies,$rootScope) {
+        var urlBase = "http://localhost:3000/api/";
+		var vm = this;
+		vm.usuario = {};
+		vm.registrar = function () {
+			$http.post('/api/usuarios/', vm.usuario)
+				.success(function (data) {
+					$rootScope.nombre = vm.usuario.email;
+					$rootScope.mensaje = 'recién creado';
+					$cookies.put("sessionId", data);
+					$state.go("total");
+				});
+		}
+		vm.entrar = function () {
+			$http.post('/api/sesiones/', vm.usuario)
+				.success(function (data) {
+					$rootScope.nombre = vm.usuario.email;
+					$rootScope.mensaje = 'recién entrado';
+					$cookies.put("sessionId", data);
+					$state.go("total");
+				});
+		}
+    }
+})();

21-rest-advance/client/app/states/total/total.html

@@ -1,15 +1,11 @@
-<!-- Cada sección tendrá su propia plantilla -->
-<!-- No se especifíca el controlador, que será asignado por el enrutador -->
 <section name="total">
-<!-- Pero se supone un viweModel llamado caja-->
-    <h1>{{ caja.titulo }}</h1>
-    <p class="lead">Comprueba de dónde viene y a dónde va tu dinero.</p>
+    <ab-cabecera>Comprueba de dónde viene y a dónde va tu dinero.</ab-cabecera>
     <div class="row-fluid">
         <div class="row placeholders">
             <div class="col-xs-8 col-sm-4 placeholder">
                 <h1>
                     <span class="label label-success">
-                        {{ caja.total.ingresos | number:2 }} €
+                        {{ total.total.ingresos | number:2 }} €
                     </span>
                 </h1>
                 <h4>Total ingresos</h4>
@@ -18,7 +14,7 @@
             <div class="col-xs-8 col-sm-4 placeholder">
                 <h1>
                     <span class="label label-danger">
-                        {{ caja.total.gastos | number:2 }} €
+                        {{ total.total.gastos | number:2 }} €
                     </span>
                 </h1>
                 <h4>Total gastos</h4>
@@ -26,8 +22,8 @@
             </div>
             <div class="col-xs-8 col-sm-4 placeholder">
                 <h1>
-                    <span class="label " ng-class="{'label-success': caja.balance()>=0 , 'label-danger' : caja.balance()<0}">
-                        {{ caja.balance() | number:2 }} €
+                    <span class="label " ng-class="{'label-success': total.balance()>=0 , 'label-danger' : total.balance()<0}">
+                        {{ total.balance() | number:2 }} €
                     </span>
                 </h1>
                 <h4>Balance</h4>

21-rest-advance/client/app/states/total/total.js

@@ -0,0 +1,44 @@
+"use strict";
+(function () {
+    var componentName = "total";
+    angular
+        .module(componentName, ['ui.router', 'ngResource', 'abCabecera'])
+        .config(stateConfig)
+        .directive(componentName, directive)
+        .service("servicio_"+componentName, service)
+
+    function stateConfig($stateProvider) {
+        $stateProvider
+            .state(componentName, {
+                url: '/' + componentName,
+                template: '<' + componentName + '></' + componentName + '>'
+            });
+    }
+
+    function directive() {
+        return {
+            templateUrl: 'app/states/' + componentName + '/' + componentName + '.html',
+            controller: controller,
+            controllerAs: componentName,
+            bindToController: true,
+            scope: {}
+        }
+    }
+
+    function controller(servicio_total) {
+        var vm = this;
+        vm.total = {
+			ingresos: 0,
+			gastos: 0
+		};
+        vm.total = servicio_total.Total.get();
+
+        vm.balance = function () {
+			return vm.total.ingresos - vm.total.gastos
+		}
+    }
+
+    function service($resource) {
+        this.Total = $resource("/api/priv/total/");
+    }
+})();

21-rest-advance/client/appHttpLog.js

@@ -1,23 +0,0 @@
-(function () {
-
-    function configuradorInterceptores($httpProvider) {
-        $httpProvider.interceptors.push(funcionInterceptoraLog);
-    }
-
-    // Esta función se especializa en escribir en la consola
-    // información sobre llamadas http
-    function funcionInterceptoraLog($log) {
-
-        var interceptor = {};
-        interceptor.request = function (request) {
-            $log.info('request:' + request.url);
-            return request ;
-        };
-        interceptor.responseError = function (response) {
-            $log.error("excepción: " + response.status + " de :" + response.config.url);
-        }
-		return interceptor;
-    }
-
-    angular.module('controlCajaApp').config(configuradorInterceptores);
-}());

21-rest-advance/client/cajaCtrl.js

@@ -1,34 +0,0 @@
-(function () {
-    var cajaCtrl = function (maestrosFactory, movimientosFactory) {
-        var vm = this;
-
-        vm.titulo = "Controla tu Cash Flow";
-
-		vm.maestros = maestrosFactory.get();
-
-		vm.nuevoMovimiento = new movimientosFactory.movimientos();
-		vm.nuevoMovimiento.esIngreso =1;
-		vm.nuevoMovimiento.fecha = new Date();
-
-		vm.movimientos = movimientosFactory.movimientos.query();
-
-		vm.total = movimientosFactory.total.get();
-
-        vm.guardarMovimiento = function () {
-            vm.nuevoMovimiento.tipo = vm.tipo(vm.nuevoMovimiento);
-			vm.nuevoMovimiento.$save()
-			.then(function(postedData){
-				vm.movimientos = movimientosFactory.movimientos.query();
-				vm.total = movimientosFactory.total.get();
-                vm.nuevoMovimiento.importe = 0;
-			});
-        }
-        vm.balance = function () {
-            return vm.total.ingresos - vm.total.gastos
-        }
-        vm.tipo = function (movimiento) {
-            return movimiento.esIngreso && 'Ingreso' || 'Gasto'
-        }
-    }
-    angular.module('controlCajaApp').controller('CajaCtrl', cajaCtrl);
-}());

21-rest-advance/client/index.html

@@ -1,53 +1,48 @@
-<html lang="es" ng-app="controlCajaApp">
-<head>
-    <title>Control de Caja</title>
-    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
-    <meta charset="utf-8" />
-    <meta lang="es" />
-    <meta name="description" content="Ejemplo Control de Caja en AngularJS por Alberto Basalo" />
-    <meta name="author" content="Alberto Basalo @ Ágora Binaria" />
-    <meta name="application-name" content="ControlAngularJS" />
-    <meta name="Keywords" content="AngularJS, ejemplo, tutorial, curso" />
-    <link rel="author" href="https://plus.google.com/+AlbertoBasalo71" />
-    <!-- Bootstrap core CSS -->
-    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
-</head>
-<body>
-    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="MenuCtrl as menu">
-        <div class="navbar-inner">
-            <div class="container">
-                <ul class="nav navbar-nav">
-                    <li ng-class="{ active: menu.isActive('total') }">
-                        <a ui-sref="total">Totales</a>
-                    </li>
-                    <li ng-class="{ active: menu.isActive('nuevo') }">
-                        <a ui-sref="nuevo">Nuevo</a>
-                    </li>
-                    <li ng-class="{ active: menu.isActive('lista') }">
-                        <a ui-sref="lista">Lista</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-    <div class="container text-center" style="padding-top:50px;" ui-view >
+<html lang="es" ng-app="cashFlow">
 
-    </div>
-    <!-- JavaScript References -->
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-cookies.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>
+<head>
+	<title>Control de Caja</title>
+	<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
+	<meta charset="utf-8" />
+	<meta lang="es" />
+	<meta name="description" content="Ejemplo Control de Caja en AngularJS por Alberto Basalo" />
+	<meta name="author" content="Alberto Basalo @ Ágora Binaria" />
+	<meta name="application-name" content="ControlAngularJS" />
+	<meta name="Keywords" content="AngularJS, ejemplo, tutorial, curso" />
+	<link rel="author" href="https://plus.google.com/+AlbertoBasalo71" />
+	<!-- Bootstrap core CSS -->
+	<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
+</head>
+
+<body>
+	<ab-menu-navegacion></ab-menu-navegacion>
+
+	<ab-contenido></ab-contenido>
+
+	<ab-pie-pagina></ab-pie-pagina>
+
+	<!-- JavaScript References -->
+	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
 	<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
-    <script src="app.js"></script>
-    <!-- Necesitamos colocar delante el configurador del Log, para saber que ocurre pase lo que pase -->
-    <script src="appHttpLog.js"></script>
-    <script src="appSecurity.js"></script>
-    <script src="registroCtrl.js"></script>
-    <script src="menuCtrl.js"></script>
-    <script src="cajaCtrl.js"></script>
-    <!-- El controlador del estado movimiento -->
-    <script src="movimientoCtrl.js"></script>
-    <script src="movimientosFactory.js"></script>
-    <script src="maestrosFactory.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-cookies.min.js"></script>
+	<!-- Referencia para usar el módulo ngResource -->
+	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-resource.min.js"></script>
+	<script src="app/app.js"></script>
+	<!-- Gestor de la Seguridad -->
+	<script src="app/common/appSecurity.js"></script>
+	<script src="app/common/states.js"></script>
+	<script src="app/common/filtros.js"></script>
+	<script src="app/common/directivas.js"></script>
+	<script src="app/components/componentes.js"></script>
+	<script src="app/components/cabecera/cabecera.js"></script>
+	<script src="app/components/menuNavegacion/menuNavegacion.js"></script>
+	<script src="app/components/menuNavegacion/menuCtrl.js"></script>
+	<script src="app/components/valoracion/valoracion.js"></script>
+	<script src="app/states/total/total.js"></script>
+	<script src="app/states/nuevo/nuevo.js"></script>
+	<script src="app/states/lista/lista.js"></script>
+	<script src="app/states/lista/fila-movimiento/fila-movimiento.js"></script>
+	<script src="app/states/registro/registro.js"></script>
 </body>
+
 </html>

21-rest-advance/client/lista.html

@@ -1,31 +0,0 @@
-<section name="Lista">
-    <p class="lead">Estos son tus movimientos recientes.</p>
-    <br>
-    <label class="control-label" for="importe">Filtrar:</label>
-    <input type="text" name="filtro" placeholder="qué buscas?" class="input" ng-model="valorBuscado">
-    <table class="table">
-        <thead>
-            <tr>
-                <!--  Nueva columna para el Id-->
-                <th>Id</th>
-                <th><a href="" ng-click="campo = 'fecha'; sentido = campo == 'fecha' && !sentido">Fecha</a>
-                </th>
-                <th>Tipo</th>
-                <th>Categoría</th>
-                <th><a href="" ng-click="campo = 'importe'; sentido = campo == 'importe' && !sentido">Importe</a>
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr ng-repeat="movimiento in caja.movimientos | filter:valorBuscado | orderBy:campo:sentido">
-                <!--  Nueva columna para el Id, con enlace para ver ese movimiento en otra página-->
-				<!--  El enlace se formula como un cambio de estado con parámetros-->
-                <td class="text-left"><a ui-sref="movimiento({id: movimiento.id})">{{movimiento.id }}</a> </td>
-                <td class="text-left">{{movimiento.fecha | date}}</td>
-                <td class="text-left">{{movimiento.tipo}}</td>
-                <td class="text-left">{{movimiento.categoria}}</td>
-                <td class="text-left" ng-class="{'text-success': movimiento.tipo=='Ingreso', 'text-danger' : movimiento.tipo=='Gasto'}">{{movimiento.importe | number:2}} €</td>
-            </tr>
-        </tbody>
-    </table>
-</section>

21-rest-advance/client/maestrosFactory.js

@@ -1,9 +0,0 @@
-(function () {
-	var maestrosFactory =   function ($resource)  {
-		// Los resursos son totalmente configurables
-		// Una de sus utilidades de 'fábrica' de una caché simple pero potente
-		return $resource("/api/pub/maestros/",{},{get: {cache: true}});
-	};
-
-	angular.module('controlCajaApp').factory('maestrosFactory', maestrosFactory);
-}());

21-rest-advance/client/menuCtrl.js

@@ -1,8 +0,0 @@
-(function () {
-    var menuCtrl = function ($state) {
-        this.isActive = function (estado) {
-			return $state.is(estado);
-        }
-    }
-    angular.module('controlCajaApp').controller('MenuCtrl',menuCtrl);
-}());

21-rest-advance/client/movimiento.html

@@ -1,41 +0,0 @@
-<section name="verMovimiento" class="row-fluid">
-    <form class="form-horizontal text-left">
-        <fieldset>
-            <div id="legend">
-                <legend class="">Ver el movimiento {{ vm.movimiento.id}} </legend>
-            </div>
-            <div class="row-fluid">
-                <div class="col-xs-12 col-sm-6">
-                    <div class="control-group">
-                        <label class="control-label" for="tipo">Tipo</label>
-                        <div class="controls">
-                            <div class="btn-group">
-                                {{ vm.movimiento.tipo}}
-                            </div>
-                        </div>
-                    </div>
-                    <div class="control-group">
-                        <label class="control-label" for="categ">Categoría</label>
-                        <div class="controls">
-                            {{ vm.movimiento.categoria }}
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xs-12 col-sm-6">
-                    <div class="control-group">
-                        <label class="control-label" for="fecha">Fecha</label>
-                        <div class="controls">
-                            {{ vm.movimiento.fecha || date }}
-                        </div>
-                    </div>
-                    <div class="control-group">
-                        <label class="control-label" for="importe">Importe</label>
-                        <div class="controls">
-                            {{ vm.movimiento.importe }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </fieldset>
-    </form>
-</section>

21-rest-advance/client/movimientoCtrl.js

@@ -1,12 +0,0 @@
-(function () {
-    //  $stateParams es el servicio de ui-router para acceder a los parámetros de la ruta
-    var movimientoCtrl = function ($stateParams, movimientosFactory) {
-        var vm = this;
-        // El acceso es por nombre de parámetro
-        var movId = $stateParams.id;
-        // Se llama al recurso expuesto por la factoría de recursos
-		// enviándole el objeto que sirve de consulta al método get
-        vm.movimiento = movimientosFactory.movimientos.get({id:movId});
-    }
-    angular.module('controlCajaApp').controller('MovimientoCtrl', movimientoCtrl);
-}());

21-rest-advance/client/movimientosFactory.js

@@ -1,25 +0,0 @@
-(function () {
-
-    var movimientosFactory =   function ($resource)  {
-
-        var factory  =   {};
-
-        // $resource("/api/priv/movimientos/");
-        // El uso de parametros en los recursos debe especificarse
-        // Indicando el nombre local y el remoto
-        // En la url va el nombre remoto
-        // En el objeto se repute ese nombre como clave y se dice que propiedad será la que lo lleve
-        // La propiedad empieza por @
-        factory.movimientos =  $resource("/api/priv/movimientos/:id", {
-            id: "@id"
-        })
-
-
-
-        factory.total = $resource("/api/priv/total/");
-
-        return factory;
-    };
-
-    angular.module('controlCajaApp').factory('movimientosFactory', movimientosFactory);
-}());

21-rest-advance/client/not-found.html

@@ -1,3 +0,0 @@
-<section name="total">
-	<h2>No se ha encontrado lo que buscabas</h2>
-</section>

21-rest-advance/client/nuevo.html

@@ -1,53 +0,0 @@
-<section name="nuevoMovimiento" class="row-fluid">
-    <form class="form-horizontal text-left">
-        <fieldset>
-            <div id="legend">
-                <legend class="">Introduce tus movimientos</legend>
-            </div>
-            <div class="row-fluid">
-                <div class="col-xs-12 col-sm-6">
-                    <div class="control-group">
-                        <label class="control-label" for="tipo">Tipo</label>
-                        <div class="controls">
-                            <div class="btn-group">
-                                <button type="button" class="btn btn-success" ng-class="{'active':caja.nuevoMovimiento.esIngreso==1}" ng-click="caja.nuevoMovimiento.esIngreso=1; caja.nuevoMovimiento.esGasto=0">
-                                    <span ng-class="{'small':caja.nuevoMovimiento.esIngreso==0}">+ Ingreso</span>
-                                </button>
-                                <button type="button" class="btn btn-danger" ng-class="{'active':caja.nuevoMovimiento.esGasto==1}" ng-click="caja.nuevoMovimiento.esIngreso=0; caja.nuevoMovimiento.esGasto=1">
-                                    <span ng-class="{'small':caja.nuevoMovimiento.esGasto==0}">- Gasto</span>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="control-group">
-                        <label class="control-label" for="categ">Categoría</label>
-                        <div class="controls">
-                            <select ng-show="caja.nuevoMovimiento.esIngreso" name="categoria" ng-model="caja.nuevoMovimiento.categoria" ng-options="categoria for categoria in caja.maestros.categoriasIngresos"></select>
-                            <select ng-show="caja.nuevoMovimiento.esGasto" name="categoria" ng-model="caja.nuevoMovimiento.categoria" ng-options="categoria for categoria in caja.maestros.categoriasGastos"></select>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xs-12 col-sm-6">
-                    <div class="control-group">
-                        <label class="control-label" for="fecha">Fecha</label>
-                        <div class="controls">
-                            <input type="date" name="fecha" placeholder="" class="input" ng-model="caja.nuevoMovimiento.fecha">
-                        </div>
-                    </div>
-                    <div class="control-group">
-                        <label class="control-label" for="importe">Importe</label>
-                        <div class="controls">
-                            <input type="number" name="importe" placeholder="" class="input" ng-model="caja.nuevoMovimiento.importe">
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="text-right">
-                <button style="margin-top: 20px" type="button" class="btn btn-lg btn-primary" ng-click="caja.guardarMovimiento()">
-                    <span>Guardar {{ caja.tipo(caja.nuevoMovimiento) }}</span>
-                </button>
-            </div>
-        </fieldset>
-    </form>
-    	{{caja.movimientos}}
-</section>

21-rest-advance/client/registro.html

@@ -1,37 +0,0 @@
-<div class="container">
-    <div class="row">
-        <div class="span12">
-            <form class="form-horizontal">
-                <fieldset>
-                    <div id="legend">
-                        <legend class="">Login</legend>
-                    </div>
-                    <div class="control-group">
-                        <!-- email -->
-                        <label class="control-label" for="email">Email</label>
-                        <div class="controls">
-                            <input type="email" ng-model="registro.usuario.email" name="email" class="input-xlarge">
-                        </div>
-                    </div>
-                    <div class="control-group">
-                        <!-- Password-->
-                        <label class="control-label" for="password">Password</label>
-                        <div class="controls">
-                            <input type="password" ng-model="registro.usuario.password" name="password" class="input-xlarge">
-                        </div>
-                    </div>
-                    <div class="control-group">
-                        <!-- Button -->
-                        <div class="controls">
-                            <button class="btn btn-primary" ng-click="registro.entrar()">Login</button>
-                        </div>
-                        <!-- Button -->
-                        <div class="controls">
-                            <button class="btn btn-success" ng-click="registro.registrar()">Registro</button>
-                        </div>
-                    </div>
-                </fieldset>
-            </form>
-        </div>
-    </div>
-</div>

21-rest-advance/client/registroCtrl.js

@@ -1,26 +0,0 @@
-(function () {
-    var registroCtrl = function ($rootScope, $state, $http, $cookieStore) {
-        var urlBase = "http://localhost:3000/api/";
-        var vm = this;
-        vm.usuario = {};
-        vm.entrar = function () {
-            $http.post(urlBase + 'sesiones/', vm.usuario)
-                .success(function (data) {
-                    $rootScope.nombre = vm.usuario.email;
-                    $rootScope.mensaje = 'recién entrado';
-                    $cookieStore.put("sessionId", data);
-                    $state.go("total");
-                });
-        }
-        vm.registrar = function () {
-            $http.post(urlBase + 'usuarios/', vm.usuario)
-                .success(function (data) {
-                    $rootScope.nombre = vm.usuario.email;
-                    $rootScope.mensaje = 'recién creado';
-                    $cookieStore.put("sessionId", data);
-                    $state.go("total");
-                });
-        }
-    }
-    angular.module('controlCajaApp').controller('RegistroCtrl', registroCtrl);
-}());