- aluche
- audio
- camera raw
- cine
- economía
- escenas cotidianas
- fotografía
- horticultura
- informática
- internet
- libros
- moralzarzal
- música
- niños
- otros
- personal
- photoshop
- política
- premiere
- programación
- psicología
- Sin categoría
- vídeo
- vídeos
- vivienda
Angularapp1 (9 de 9): category.html
Éste es el código completo:
>>>>>>>>
<div>
<form>
<h1>Items of Category {{currCategory.name}}</h1>
<div ng-repeat=”item in currCategory.items” class=”item”>
<!– no me gusta mucho como he resuelto el tema de mostar rellena esta parte cuando se navega por la app. –>
<!– en el scope que puesto las variables auxiliares ckeckboxValues y selectValues –>
<input type=”checkbox” ng-click=”updateOrder(item.id)” id=”checkbox-{{item.id}}” ng-model=”ckeckboxValues[item.id]“/>
<select ng-change=”updateOrder(item.id)” id=”select-{{item.id}}” ng-model=”dummySelect”><!– el ng-change me [...]
Angularapp1 (8 de 9): category.js
Éste es el código completo
>>>>>>>
‘use strict’;
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 [...]
Angularapp1 (7 de 9): home.html
Éste es el código completo:
>>>>>
<div>
<h1>Home</h1>
<div ng-repeat=”category in model.categories” class=”category”>
<div>
<a href=”#!/category/{{category.id}}”><img ng-src=”img/categories/{{category.image}}” width=”100″ height=”100″/></a>
</div>
<div>{{category.name}}</div>
</div>
</div>
>>>>>
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 [...]
Angularapp1 (6 de 9): home.js
Éste es el código completo:
>>>>>>
‘use strict’;
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 == [...]
Angularapp1 (5 de 9): app.js
Éste es el código completo:
>>>>>>
var myApp = angular.module(‘angularapp1′, ['ngRoute']).
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 [...]
Angularapp1 (4 de 9): index.html
Éste es el código completo
>>>>>
<!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 [...]
Angularapp1 (3 de 9): Objetos del modelo
Considero que en el modelo de datos sólo debe de ir lo que se mandará al servidor y lo que se recupera de él. Cualquier objeto que se necesite para “pintar” la página o para otras cosas será parte del controlador, no del modelo.
De esta manera tengo los siguientes objetos:
Item:
Son los artículos de cada categoría. [...]
Angularapp1 (2 de 9): Estructura de los archivos
El árbol de archivos y carpetas de la aplicación es la que se ve en la imagen.
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 [...]
Angularapp1 (1 de 9): Introducción
He hecho una app de ejemplo con AngularJs que pueda ser un punto de partida para cualquier aplicación SPA (Single Page App).
No trata de ser la biblia, ni de javascript ni de angular, sino un ejemplo básico, un punto de partida sin tirarme tres veranos.
La aplicación es un simple carrito de la compra. Al entrar, [...]
Maven: 07 – Trabajando en jares que no están en repositorios
A veces se da el caso de que tienes un jar que no es tuyo y que no está en ningún repositorio. Lo que hay que hacer en este caso es instalarlo a mano por línea de comandos. Éste es el único caso que he encontrado necesario instalarse el maven, aunque incluso puede que se [...]