Las cosas a destacar de este archivo son:

<input type=”checkbox” ng-click=”updateOrder(item.id)” id=”checkbox-{{item.id}}” ng-model=”ckeckboxValues[item.id]“/>

Con ng-click hacemos que al modificar el checkbox se llame al updateOrder pasando el item id.

Este upddateOrder modifica el model y por tanto se actualiza el resumen del carrito, que en el html está así (en el index.html):

<div>Number of items: {{model.order.getNumberOfItems()}}</div>
<div>Total cost: {{model.order.getTotalCost()}}</div>

Es un ejemplo de data binding. El html coje automáticamente los valores que devuelven esas dos funciones.

El id de checkbox-{{item.id}} lo pongo para luego poder acceder al checkbox con document.getElementById.

La parte más importante aquí es el ng-model=”ckeckboxValues[item.id]“. Esto es el two way data binding. Cuando el usuario marca/desmarca el checkbox, la variable ckeckboxValues[item.id] pasa a ser true/false. Y viceversa, si algún js modifica por programación la variable ckeckboxValues[item.id], el checkbox aparecería marcado o desmarcado en consecuencia, en tiempo real.

Esto evita al programador el código de tener que hacer todo esto “a mano”.
ckeckboxValues es un array asociativo que relleno en el controller.

<select ng-change=”updateOrder(item.id)” id=”select-{{item.id}}” ng-model=”dummySelect”>
<option value=”1″ ng-selected=”selectValues[item.id][1]“>1</option>

Aquí utilizo ng-change en lugar de ng-click porque el ng-click se ejecuta sólo con clickar en el desplegable y no quiero.

El uso de ng-change me ha obligado a poner un ng-model, el cual me ha valido apuntar a una variable tonta que he llamado dummySelect.

El uso de ng-selected hace que la opción esté seleccionada si la variable selectValues[item.id][1] es true. Es otro ejemplo de two way databinding.

Todo esto seguro que se puede hacer mejor pero como he dicho en artículos anteriores sólo he querido hacer un ejemplo básico.

<button ng-disabled=”model.order.getNumberOfItems() < 1″ ng-click=”go(‘/summary’)”>Checkout</button>

El ng-disabled hace que el botón salga desactivado si no hay ningún elemento en el carrito. En cuanto el usuario selecciona un elemento sale activado y se vuelve a desactivar si el usuario quita todos los elementos.

myApp
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/category/:categoryId', {
templateUrl: 'category/category.html',
controller: 'CategoryController'
});
}])

.controller(‘CategoryController’, ['$scope','$routeParams', '$http', function($scope, $routeParams, $http) {
console.log("[CategoryController]“);
var categoryId = $routeParams.categoryId;
console.log(“[CategoryController]categoryId: ” + categoryId);
console.log(“[CategoryController]$scope.model: “);
console.log($scope.model);
var category = $scope.model.getCategory(categoryId);
$scope.currCategory = category;//para poder pintar la categoria en el html

//meto estas propiedades para poder pintar los checkboxes como marcados cuando corresponde mientras navego por la app, ya que no se pude poner ng-model con funciones
//no me gusta mucho como he resuelto el tema de mostar rellena esta parte cuando se navega por la app.
$scope.initCheckboxValues = function() {
$scope.ckeckboxValues = new Array();
$scope.selectValues = new Array();
var item;
for(var i in category.items){
item = category.items[i];
var orderItem = $scope.model.order.getOrderItem(item.id);
$scope.ckeckboxValues[item.id] = (orderItem != null);
$scope.selectValues[item.id] = new Array();
var quantity;
if (orderItem != null) {
quantity = orderItem.quantity;
} else {
quantity = 1;
}
for (var i=1; i<=3; i++) {
$scope.selectValues[item.id][i] = (i == quantity);
}
}
console.log("[CategoryController]$scope.ckeckboxValues: ");
console.log($scope.ckeckboxValues);
console.log("[CategoryController]$scope.selectValues: ");
console.log($scope.selectValues);
}

//meto los items en el modelo solo si no estaba ya. De esta manera si navego por la app no se hacen llamasas ajax innecesarias
if (category.items == null || category.items.length == 0) {
$http({
method: 'GET',
url: 'fake-ajax/get-items-' + categoryId + '.html'
}).then(function successCallback(response) {
console.log("[CategoryController] successCallback");
var item;
for(var i in response.data){
item = new Item();
item.parseFromObject(response.data[i]);
if(item != null){
category.items.push(item);
}
item = null;
}
$scope.initCheckboxValues();
}, function errorCallback(response) {
console.log("[CategoryController] errorCallback");
});
} else {
$scope.initCheckboxValues();
}

//se le llama cuando el usuario modifica el carrito
$scope.updateOrder = function(itemId) {
console.log("[CategoryController - updateOrder] itemId: " + itemId);

var checkbox = document.getElementById("checkbox-" + itemId);
var select = document.getElementById("select-" + itemId);

var item = category.getItem(itemId);
if (checkbox.checked) {
$scope.model.order.addItem(item, Number(select.value));
} else {
$scope.model.order.removeItem(item);
}

console.log("[CategoryController - updateOrder]$scope.model: ");
console.log($scope.model);
};
}]);
>>>>>>>

En estas líneas

myApp
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/category/:categoryId', {
templateUrl: 'category/category.html',
controller: 'CategoryController'
});
}])

Aparte de lo que ya comenté en el home.js, se ve que defino el parámetro categoryId el cual recojo luego en el contoller con

$routeParams.categoryId

Después en el contoller hago las siguientes cosas:

• Cojo la categoría del model y la pongo en el scope para poder “pintar el html”
• Inicializo y relleno un par de arrays asociativos a partir del model y que me servirán para “pintar” los artículos tal y como los ha ido seleccionando el usuario para el carrito, es decir, si el usuario selecciona un artículo de la categoría roja, cuando

navego por la app y vuelvo a la categoría roja, pinto ese artículo como marcado y con el número de artículos que el usuario seleccionó. Esta parte seguro que se puede resolver mejor, pero como dije en la introducción sólo he pretendido hacer un punto de partida.

• Me traigo la lista de artículos de la categoría y al igual que en el home, lo hago una única vez, para no hacer llamadas innecesarias al servidor.
• Tengo el método updateOrder. A este método se le llama cada vez que el usuario modifica el carrito, ya lo veremos luego.

Poco que comentar. Se ve cómo accede a los objetos del $scope, al cual tienen acceso mágicamente.

El uso de ng-src en lugar de src es porque con src el navegador daría not found al procesarlo e intentar ir a por esa imagen sin que el angular haya hecho todavía el reemplazo de los {{}} por el correspondiente valor.

myApp
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'home/home.html',
controller: 'HomeController'
});
}])

.controller(‘HomeController’, ['$scope', '$http', function($scope, $http) {
console.log("[HomeController]“);
console.log(“[HomeController]$scope.model: “);
console.log($scope.model);
//meto las categorias en el modelo solo si no estaba ya. De esta manera si navego por la app no se hacen llamasas ajax innecesarias
if ($scope.model.categories == null || $scope.model.categories.length == 0) {
$http({
method: ‘GET’,
url: ‘fake-ajax/get-categories.html’
}).then(function successCallback(response) {
console.log(“[HomeController] successCallback”);
var category;
for(var i in response.data){
category = new Category();
category.parseFromObject(response.data[i]);
if(category != null){
$scope.model.categories.push(category);
}
category = null;
}

}, function errorCallback(response) {
console.log(“[HomeController] errorCallback”);
});
}
}]);
>>>>>>

Con las líneas

myApp
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'home/home.html',
controller: 'HomeController'
});
}])

Se le está diciendo que cuando en la url estés en /home tiene que coger el contenido de home/home.html y el controlador de esta sección es el HomeController.

El HomeController se ejecuta cada vez que el usuario vaya a /home, tanto navegando por la app como con el botón de back del navegador.

Lo que hago en ese controller es traerme la lista de categorías y añadirlas al model. Y sólo lo hago una única vez, para no hacer llamadas ajax innecesarias. Las categorías no cambian, no hay necesidad de volver a consultar al servidor si ya me las he traído anteriormente.

config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');

$routeProvider.otherwise({redirectTo: '/home'});
}]);

myApp.controller(‘MyAppController’, ['$scope', '$location', function($scope, $location) {
console.log("[MyAppController]“);
$scope.model = new Model();//este objeto lo heredan el resto de controllers
console.log(“[MyAppController]$scope.model: ” + $scope.model);
console.log($scope.model);

$scope.go = function ( path ) {
$location.path( path );
};
}]);
>>>>>>

Vemos que en la línea

var myApp = angular.module(‘angularapp1′, ['ngRoute']).

se hace referencia a lo que en el index.html se puso como ng-app.

Con la línea

$routeProvider.otherwise({redirectTo: ‘/home’});

Simplemente le decimos que al entrar en la aplicación vaya al /home. Veremos posteriormente que cada controlador de sección tendrá su propia instrucción para su ruta.

Vemos en la línea

myApp.controller(‘MyAppController’, [‘$scope’, ‘$location’, function($scope, $location) {

que se hace referencia al ‘MyAppController’, que en el index.hmtl se puso en el ng-controller.

Es el controlador general de la aplicación y lo único que hago en él es definir la función go que se usará en el botón de ir a la home, e inicializar el model de esta manera:

$scope.model = new Model();

Esto es lo más importante de todo. El único sitio donde creo un model es aquí y lo meto en el $scope.

El resto de controladores de sección que veremos luego accederán a este $scope.model puesto que heredarán del controlador principal.

>>>>>
<!doctype html>
<html ng-app=”angularapp1″>
<head>
<meta charset=”utf-8″>
<title>Test Angular</title>
<link rel=”stylesheet” href=”css/styles.css” />

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js”></script>

<!– model –>
<script src=”js/model/Item.js”></script>
<script src=”js/model/Category.js”></script>
<script src=”js/model/OrderItem.js”></script>
<script src=”js/model/Order.js”></script>
<script src=”js/model/Model.js”></script>

<script src=”js/app.js”></script>
<script src=”home/home.js”></script>
<script src=”category/category.js”></script>
<script src=”summary/summary.js”></script>

</head>
<body ng-controller=”MyAppController”>

<div>Header</div>
<button ng-click=”go(‘/home’)”>Home</button>
<div>Cart summary:</div>
<div>Number of items: {{model.order.getNumberOfItems()}}</div>
<div>Total cost: {{model.order.getTotalCost()}}</div>

<div ng-view></div>

<div>Footer</div>

</body>
</html>
>>>>>

Se incluye tanto el js de angular como el módulo angular-route.js, que es independiente de angular y se necesita para hacer una Single Page App con varias secciones.

Después incluyo cada objeto del model, el app.js y cada controlador.

En el html he añadido una especie de header, botón para ir a la home, resumen del carrito y footer, que aparecerá en todas las páginas o secciones.

Destaco en el html estas directivas:

<html ng-app=”angularapp1″>

Aquí decimos como que estoy en una app que se llamará angularapp1. Veremos posteriormente que a esto se hace referencia en el app.js

<body ng-controller=”MyAppController”>>

Aquí decimos que el controlador general de la app será el MyAppController. Veremos posteriormente que a esto se hace referencia en el app.js.

También veremos posteriormente que cada sección tendrá su propio controlador particular.

<div ng-view></div>

Dentro de este div es donde AngularJs meterá el html de cada sección, el cual se traerá por ajax.

De esta manera tengo los siguientes objetos:

Item:

Son los artículos de cada categoría. Un objeto simple con los atributos id, name, image y price.

Category:

Tiene los atributos id, name, image y un array de items.
También tiene la función getItem que devuelve el item dado el itemId.

OrderItem:

Es cada elemento del carrito de la compra.
Tiene como atributos un item de los vistos anteriormente y un quantity.

Order:

Es el propio carrito de la compra.
El único atributo es un array de OrderItem y tiene una serie de métodos para añadir y eliminar del carrito, obtener el número de orderitems, el coste total y algún otro método necesario.

Model:

Es el objeto que representa el modelo de la aplicación. No lo he llamado App por no confundir con el app de AngularJs.
Contiene un array de Category, un Order y el método getCategory para obtener una categoría dado su id.

La aplicación es un único html, el index.html, el cual incluye otras páginas o secciones, que en este caso son home.html, category.html y summary.hml.

Cada una de estas secciones va en su propia carpeta y tiene dos archivos, el html de view y el js de controller.

En la carpeta css pongo un css muy básico.

En el fake-ajax pongo unos archivos a los que llamo por ajax para traerme del servidor las categorías y los artículos de cada categoría.

En la carpeta img van las imágenes de las categorías y sus artículos.

En la carpeta js hay una carpeta model y el app.js.

Dentro de la carpeta model hay un archivo por cada objeto del model. Me gusta hacer un archivo por cada objeto como se suele hacer en java y así el código está bien distribuido y fácil de encontrar.

El archivo app.js es el que tiene la inicialización de la aplicación.

Esta manera de distribuir los archivos me parece bastante limpia. Añadir nuevas páginas a la aplicación no es más que crear la carpeta y meter dentro el html de view y el js de controller e incluir este último en el index.html.

Para instalar el jar en tu repositorio local:
[maven-home]/mvn install:install-file -Dfile=XXXX -DgroupId=XXXX -DartifactId=XXXX -Dversion=XXXX -Dpackaging=jar
Donde en Dfile hay que poner la ruta al jar.

Para instalar en el repositorio interno privado (ver Maven: 02 – Conceptos):
[maven-home]/mvn deploy:deploy-file -Dfile=XXXX -DgroupId=XXXX -DartifactId=XXXX -Dversion=XXXX -Dpackaging=jar -DrepositoryId=release-repository -Durl=ftp://XXXX/maven-repository-release

Donde -DrepositoryId debe coincidir con el correspondiente en el C:\Users\pepe\.m2\settings.xml y -Durl debe ser la url del repositorio.

Para ejecutar este último comando me encontré con varios problemas para los cuales me fue difícil encontrar la solución porque no daba errores descriptivos.
Tuve que copiar a mano estos dos jares:

• C:\Users\pepe\.m2\repository\org\apache\maven\wagon\wagon-ftp\2.10\wagon-ftp-2.10.jar a [maven-home]/lib
• C:\Users\pepe\.m2\repository\commons-net\commons-net\3.1\commons-net-3.1.jar a [maven-home]/lib

Si no tuvieras el commons-net-3.1.jar (u otras versiones supongo que valdrán) la tendrás que conseguir, yo la tenía porque la había usado como dependencia de algúnn proyecto.