зеркало из https://github.com/DeGsoft/meanjs.git
fix spa
This commit is contained in:
Alberto Basalo
Родитель
23d74903f2
Коммит
7d2d0edcef
|
|
@ -6,65 +6,31 @@ angular.module('cashFlow', ['ngRoute']);
|
|||
// Además de controladores, un módulo puede tener funciones de configuración
|
||||
// Estas se ejecutarán al arrancar la aplicación
|
||||
function configurarRutas($routeProvider) {
|
||||
// Declaramos una dependencia en el parámetro $routeProvider
|
||||
// Este servicio nos provee de métodos para realizar un enrutado en el cliente
|
||||
// Con esto se crean las SPA
|
||||
$routeProvider
|
||||
.when('/', {
|
||||
// Para cada ruta se declara la vista y el controlador asociados
|
||||
controller: 'CajaCtrl',
|
||||
controllerAs: 'caja',
|
||||
templateUrl: 'total.html'
|
||||
})
|
||||
.when('/nuevo', {
|
||||
controller: 'CajaCtrl',
|
||||
controllerAs: 'caja',
|
||||
templateUrl: 'nuevo.html'
|
||||
})
|
||||
.when('/lista', {
|
||||
controller: 'CajaCtrl',
|
||||
controllerAs: 'caja',
|
||||
templateUrl: 'lista.html'
|
||||
})
|
||||
.otherwise({
|
||||
// en caso de peticiones no contempladas podemos redirigir
|
||||
redirectTo: '/'
|
||||
});
|
||||
// Declaramos una dependencia en el parámetro $routeProvider
|
||||
// Este servicio nos provee de métodos para realizar un enrutado en el cliente
|
||||
// Con esto se crean las SPA
|
||||
$routeProvider
|
||||
.when('/', {
|
||||
// Para cada ruta se declara la vista y el controlador asociados
|
||||
controller: 'CajaCtrl',
|
||||
controllerAs: 'caja',
|
||||
templateUrl: 'total.html'
|
||||
})
|
||||
.when('/nuevo', {
|
||||
controller: 'CajaCtrl',
|
||||
controllerAs: 'caja',
|
||||
templateUrl: 'nuevo.html'
|
||||
})
|
||||
.when('/lista', {
|
||||
controller: 'CajaCtrl',
|
||||
controllerAs: 'caja',
|
||||
templateUrl: 'lista.html'
|
||||
})
|
||||
.otherwise({
|
||||
// en caso de peticiones no contempladas podemos redirigir
|
||||
redirectTo: '/'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function suma(a,b){
|
||||
var c= a + b;
|
||||
console.log(c);
|
||||
}
|
||||
|
||||
angular.module('cashFlow').value('a',5);
|
||||
|
||||
angular.module('cashFlow').value('b',7);
|
||||
|
||||
// Se registra la función como un configurador del módulo
|
||||
angular.module('cashFlow').config(suma);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
angular.module('cashFlow').config(configurarRutas);
|
||||
|
|
|
|||
|
|
@ -1,61 +1,62 @@
|
|||
<html lang="es" ng-app="cashFlow">
|
||||
<!--Distribuimos el contenido en tres vistas parciales y un archivo índice (este mismo)
|
||||
Cada vista será una 'página' con urls independientes -->
|
||||
|
||||
<head>
|
||||
<title>Control de Caja</title>
|
||||
<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="refs/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Control de Caja</title>
|
||||
<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="refs/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Se crea un menú de navegación -->
|
||||
<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('/') }">
|
||||
<a href="#/">Totales</a>
|
||||
</li>
|
||||
<li ng-class="{ active: menu.isActive('/nuevo') }">
|
||||
<a href="#/nuevo">Nuevo</a>
|
||||
</li>
|
||||
<li ng-class="{ active: menu.isActive('/lista') }">
|
||||
<a href="#/lista">Lista</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Se crea un menú de navegación -->
|
||||
<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('/') }">
|
||||
<a href="#/">Totales</a>
|
||||
</li>
|
||||
<li ng-class="{ active: menu.isActive('/nuevo') }">
|
||||
<a href="#/nuevo">Nuevo</a>
|
||||
</li>
|
||||
<li ng-class="{ active: menu.isActive('/lista') }">
|
||||
<a href="#/lista">Lista</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- El contenido principal se cargará dinámicamente -->
|
||||
<!-- De eso se encarga la directiva ng-view en colaboración con el ng-router -->
|
||||
<!-- Sólo puede haber un ng-view por página-->
|
||||
<div class="container text-center" style="padding-top:50px;" ng-view >
|
||||
<!-- Aquí irá el contenido dinámico -->
|
||||
<!-- Puede ser todo lo complejo que se quiera-->
|
||||
</div>
|
||||
<!-- El contenido principal se cargará dinámicamente -->
|
||||
<!-- De eso se encarga la directiva ng-view en colaboración con el ng-router -->
|
||||
<!-- Sólo puede haber un ng-view por página-->
|
||||
<div class="container text-center" style="padding-top:50px;" ng-view>
|
||||
<!-- Aquí irá el contenido dinámico -->
|
||||
<!-- Puede ser todo lo complejo que se quiera-->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript References -->
|
||||
<script src="/refs/angular.min.js"></script>
|
||||
</head>
|
||||
<!-- Referencia a Angular Route que contiene el módulo ngRoute -->
|
||||
<!-- Suelen seguir un patrón de nombrado -->
|
||||
<!-- angular-nombre-modulo.min.js para el fichero-->
|
||||
<!-- y ngNombreModulo para el módulo-->
|
||||
<script src="/refs/angular-route.min.js"></script>
|
||||
<!-- JavaScript References -->
|
||||
<script src="refs/angular.min.js"></script>
|
||||
<!-- Referencia a Angular Route que contiene el módulo ngRoute -->
|
||||
<!-- Suelen seguir un patrón de nombrado -->
|
||||
<!-- angular-nombre-modulo.min.js para el fichero-->
|
||||
<!-- y ngNombreModulo para el módulo-->
|
||||
<script src="refs/angular-route.min.js"></script>
|
||||
|
||||
<!-- Las vistas parciales no es necesario refrenciarlas en el html -->
|
||||
<script src="app.js"></script>
|
||||
<script src="menuCtrl.js"></script>
|
||||
<script src="cajaCtrl.js"></script>
|
||||
<!-- Las vistas parciales no es necesario refrenciarlas en el html -->
|
||||
<script src="app.js"></script>
|
||||
<script src="menuCtrl.js"></script>
|
||||
<script src="cajaCtrl.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
(function () {
|
||||
// El controlador ahora tiene una dependencia de la factoría
|
||||
// Las dependencias se buscan en nuestro módulo
|
||||
// o en cualquiera de sus dependencias
|
||||
var cajaCtrl = function (movimientosFactory,maestrosService) {
|
||||
var vm = this;
|
||||
// El controlador ahora tiene una dependencia de la factoría
|
||||
// Las dependencias se buscan en nuestro módulo
|
||||
// o en cualquiera de sus dependencias
|
||||
var cajaCtrl = function (movimientosFactory, maestrosService) {
|
||||
var vm = this;
|
||||
|
||||
vm.titulo = "Controla tu Cash Flow";
|
||||
vm.maestros = maestrosService.categorias;
|
||||
vm.nuevoMovimiento = {
|
||||
esIngreso: 1,
|
||||
esGasto: 0,
|
||||
importe: 0,
|
||||
fecha: new Date()
|
||||
};
|
||||
// La parte de datos que debe compartir la delega sobre la factoría
|
||||
vm.movimientos = movimientosFactory.getMovimientos();
|
||||
vm.total = movimientosFactory.getTotal();
|
||||
vm.titulo = "Controla tu Cash Flow";
|
||||
vm.maestros = maestrosService.categorias;
|
||||
vm.nuevoMovimiento = {
|
||||
esIngreso: 1,
|
||||
esGasto: 0,
|
||||
importe: 0,
|
||||
fecha: new Date()
|
||||
};
|
||||
// La parte de datos que debe compartir la delega sobre la factoría
|
||||
vm.movimientos = movimientosFactory.getMovimientos();
|
||||
vm.total = movimientosFactory.getTotal();
|
||||
|
||||
vm.guardarMovimiento = function () {
|
||||
var auxCopyMov = angular.copy(vm.nuevoMovimiento);
|
||||
movimientosFactory.postMovimiento(auxCopyMov);
|
||||
vm.nuevoMovimiento.importe=0;
|
||||
}
|
||||
vm.balance = movimientosFactory.balance;
|
||||
vm.tipo = movimientosFactory.tipo;
|
||||
}
|
||||
angular.module('cashFlow').controller('CajaCtrl', cajaCtrl);
|
||||
vm.guardarMovimiento = function () {
|
||||
var auxCopyMov = angular.copy(vm.nuevoMovimiento);
|
||||
|
||||
movimientosFactory.postMovimiento(auxCopyMov);
|
||||
vm.nuevoMovimiento.importe = 0;
|
||||
}
|
||||
vm.balance = movimientosFactory.balance;
|
||||
}
|
||||
angular.module('cashFlow').controller('CajaCtrl', cajaCtrl);
|
||||
}());
|
||||
|
|
|
|||
|
|
@ -6,47 +6,50 @@ Pero si los queremos mantener en memoria, entnoces han de venir de una factoria
|
|||
Las factorias y los servicios son singleton
|
||||
-->
|
||||
<html lang="es" ng-app="cashFlow">
|
||||
<head>
|
||||
<title>Control de Caja</title>
|
||||
<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="refs/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('/') }">
|
||||
<a href="#/">Totales</a>
|
||||
</li>
|
||||
<li ng-class="{ active: menu.isActive('/nuevo') }">
|
||||
<a href="#/nuevo">Nuevo</a>
|
||||
</li>
|
||||
<li ng-class="{ active: menu.isActive('/lista') }">
|
||||
<a href="#/lista">Lista</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container text-center" style="padding-top:50px;" ng-view >
|
||||
|
||||
</div>
|
||||
<!-- JavaScript References -->
|
||||
<script src="/refs/angular.min.js"></script>
|
||||
<script src="/refs/angular-route.min.js"></script>
|
||||
<script src="app.js"></script>
|
||||
<script src="menuCtrl.js"></script>
|
||||
<script src="cajaCtrl.js"></script>
|
||||
<!-- Referencia a la factoría recién creada, como siempre un fichero por componente -->
|
||||
<script src="movimientosFactory.js"></script>
|
||||
<script src="maestrosService.js"></script>
|
||||
<head>
|
||||
<title>Control de Caja</title>
|
||||
<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="refs/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('/') }">
|
||||
<a href="#/">Totales</a>
|
||||
</li>
|
||||
<li ng-class="{ active: menu.isActive('/nuevo') }">
|
||||
<a href="#/nuevo">Nuevo</a>
|
||||
</li>
|
||||
<li ng-class="{ active: menu.isActive('/lista') }">
|
||||
<a href="#/lista">Lista</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container text-center" style="padding-top:50px;" ng-view>
|
||||
|
||||
</div>
|
||||
<!-- JavaScript References -->
|
||||
<script src="refs/angular.min.js"></script>
|
||||
<script src="refs/angular-route.min.js"></script>
|
||||
<script src="app.js"></script>
|
||||
<script src="menuCtrl.js"></script>
|
||||
<script src="cajaCtrl.js"></script>
|
||||
<!-- Referencia a los nuevos objetos, como siempre un fichero por componente -->
|
||||
<script src="movimientosFactory.js"></script>
|
||||
<script src="maestrosService.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,50 +1,52 @@
|
|||
(function () {
|
||||
// Las factorías, y los servicios, son funciones estándar
|
||||
// Una gran diferencia con los controladores es que son singleton
|
||||
// Eso los convierte en un buen lugar para compartir datos
|
||||
var movimientosFactory = function () {
|
||||
// el array de movimientos y el total lo mantiene la factoría
|
||||
// de esta forma sobrevive a las recargas de controladores
|
||||
var movimientos = [];
|
||||
// Normalmente estos datos se persisten en servidores remotos
|
||||
// o al menos se almacenan en el browser
|
||||
var total = {
|
||||
ingresos: 0,
|
||||
gastos: 0
|
||||
};
|
||||
// las factorias siempre devuelven objetos, para eso son fábricas
|
||||
// Las factorías, y los servicios, son funciones estándar
|
||||
// Una gran diferencia con los controladores es que son singleton
|
||||
// Eso los convierte en un buen lugar para compartir datos
|
||||
var movimientosFactory = function () {
|
||||
// el array de movimientos y el total lo mantiene la factoría
|
||||
// de esta forma sobrevive a las recargas de controladores
|
||||
var movimientos = [];
|
||||
// Normalmente estos datos se persisten en servidores remotos
|
||||
// o al menos se almacenan en el browser
|
||||
var total = {
|
||||
ingresos: 0,
|
||||
gastos: 0
|
||||
};
|
||||
// las factorias siempre devuelven objetos, para eso son fábricas
|
||||
// en este caso le llamo result
|
||||
// Estos objetos pueden contener funciones de lógica reutilizables
|
||||
var result = {};
|
||||
// Estos objetos pueden contener funciones de lógica reutilizables
|
||||
var result = {};
|
||||
|
||||
/** lista de los movimientos actuales */
|
||||
result.getMovimientos = function () {
|
||||
return movimientos;
|
||||
};
|
||||
/** objeto total actual */
|
||||
result.getTotal = function () {
|
||||
return total;
|
||||
};
|
||||
/** guardar un nuevo movimiento */
|
||||
result.postMovimiento = function (movimiento) {
|
||||
movimientos.push(movimiento);
|
||||
total.ingresos += movimiento.esIngreso * movimiento.importe;
|
||||
total.gastos += movimiento.esGasto * movimiento.importe;
|
||||
};
|
||||
/** acceso al balance */
|
||||
result.balance = function () {
|
||||
return total.ingresos - total.gastos
|
||||
}
|
||||
/** función auxiliar para cabiar de movimiento */
|
||||
result.tipo = function (movimiento) {
|
||||
return movimiento.esIngreso && 'Ingreso' || 'Gasto'
|
||||
}
|
||||
/** lista de los movimientos actuales */
|
||||
result.getMovimientos = function () {
|
||||
return movimientos;
|
||||
};
|
||||
/** objeto total actual */
|
||||
result.getTotal = function () {
|
||||
return total;
|
||||
};
|
||||
/** guardar un nuevo movimiento */
|
||||
result.postMovimiento = function (movimiento) {
|
||||
movimiento.tipo = tipo(movimiento);
|
||||
movimientos.push(movimiento);
|
||||
console.log(movimiento);
|
||||
total.ingresos += movimiento.esIngreso * movimiento.importe;
|
||||
total.gastos += movimiento.esGasto * movimiento.importe;
|
||||
};
|
||||
/** acceso al balance */
|
||||
result.balance = function () {
|
||||
return total.ingresos - total.gastos
|
||||
}
|
||||
|
||||
// Exponemos funcionalidad devolviendo el objeto creado,
|
||||
// para que el cliente explote sus métodos
|
||||
return result;
|
||||
};
|
||||
// se registran dentro de un módulo con la palabra clave factory
|
||||
angular.module('cashFlow').factory('movimientosFactory', movimientosFactory);
|
||||
/** función privada auxiliar para trasnformar el tipo de movimiento */
|
||||
var tipo = function (movimiento) {
|
||||
return movimiento.esIngreso && 'Ingreso' || 'Gasto'
|
||||
}
|
||||
|
||||
// Exponemos funcionalidad devolviendo el objeto creado,
|
||||
// para que el cliente explote sus métodos
|
||||
return result;
|
||||
};
|
||||
// se registran dentro de un módulo con la palabra clave factory
|
||||
angular.module('cashFlow').factory('movimientosFactory', movimientosFactory);
|
||||
}());
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
vm.nuevoMovimiento.importe = 0;
|
||||
}
|
||||
vm.balance = movimientosFactory.balance;
|
||||
vm.tipo = movimientosFactory.tipo;
|
||||
}
|
||||
|
||||
}());
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<meta name="Keywords" content="AngularJS, ejemplo, tutorial, curso" />
|
||||
<link rel="author" href="https://plus.google.com/+AlbertoBasalo71" />
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="refs/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="refs/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -40,9 +40,9 @@
|
|||
<!-- Incluso estados anidados unos dentro de otros-->
|
||||
</div>
|
||||
<!-- JavaScript References -->
|
||||
<script src="/refs/angular.min.js"></script>
|
||||
<script src="refs/angular.min.js"></script>
|
||||
<!-- En lugar del enrutador de AngularJS, usaremos uno de terceros, llamado ui-router-->
|
||||
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
|
||||
<script src="refs/angular-ui-router.min.js"></script>
|
||||
<script src="app.js"></script>
|
||||
<script src="menuCtrl.js"></script>
|
||||
<script src="cajaCtrl.js"></script>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
};
|
||||
|
||||
result.postMovimiento = function (movimiento) {
|
||||
movimiento.tipo = tipo(movimiento);
|
||||
movimientos.push(movimiento);
|
||||
total.ingresos += movimiento.esIngreso * movimiento.importe;
|
||||
total.gastos += movimiento.esGasto * movimiento.importe;
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
return total.ingresos - total.gastos
|
||||
}
|
||||
|
||||
result.tipo = function (movimiento) {
|
||||
var tipo = function (movimiento) {
|
||||
return movimiento.esIngreso && 'Ingreso' || 'Gasto'
|
||||
}
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче