Primera Aplicación¶
Comienzo¶
Comenzamos concentrándonos en el resultado: ¿qué es lo que queremos obtener?:
- Queremos una tabla que muestre los aeropuertos de la Dafif.
- Queremos que la tabla contenga campos con los que podamos filtrar la información.
- Queremos que las cabeceras permitan ordenar la información.
Solución¶
Borrador¶
Lo primero es hacer un borrador en HTML que indique más o menos cómo se mostrará la información. Por ejemplo:
<!doctype html>
<html>
<head>
<title>ARPT</title>
</head>
<body>
<table>
<thead>
<tr><th colspan="4">Airports List</th></tr>
<tr><th>ID</th><th>Name</th><th>ICAO</th><th>Lat</th><th>Long</th></tr>
<tr>
<th><input></input></th>
<th><input></input></th>
<th><input></input></th>
<th><input></input></th>
<th><input></input></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>EMJD</td>
<td>Barajas</td>
<td>35.456</td>
<td>-1.0</td>
</tr>
<tr> <!-- ng-repeat="driver in driversList" -->
<td>2</td>
<td>ELAA</td>
<td>Getafe</td>
<td>36.456</td>
<td>-0.3</td>
</tr>
</tbody>
</table>
</body>
</html>
Usando directivas de AngularJS (parecido a los templates), podemos:
- Se usan vistas, por lo que dejamos de momento la tabla en un <div>.
- En el <div> le damos un nombre a la aplicación y definimos su controlador.
- Referirnos a variables de $scope en <input>.
- Las filas de la tabla pasar a ser una iteración de la lista.
Nota
llamaremos directivas a los atributos que empiezan por ng-.
quedará algo como:
<div ng-app="ARPT_ReaderApp" ng-controller="ARPTs_Controller">
<table>
<thead>
<tr><th colspan="4">Airports List</th></tr>
<tr><th>ID</th><th>Name</th><th>ICAO</th><th>Lat</th><th>Long</th></tr>
<tr>
<th><input type="text" ng-model="id"></input></th>
<th><input type="text" ng-model="icao"></input></th>
<th><input type="text" ng-model="name"></input></th>
<th><input type="text" ng-model="lat"></input></th>
<th><input type="text" ng-model="lon"></input></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="arpt in arptList">
<td>{{$index+1}}</td>
<!-- td>
<img src="img/flags/{{driver.Driver.nationality}}.png" />
{{driver.Driver.givenName}} {{driver.Driver.familyName}}
</td -->
<td>{{arpt.ICAO}}</td>
<td>{{arpt.name}}</td>
<td>{{arpt.lat}}</td>
<td>{{arpt.lon}}</td>
</tr>
</tbody>
</table>
</div>