Primera Aplicación

Prerrequisitos

Necesitaremos nodejs:

  • grunt
  • angular-
  • Ensayar:
    • jasmine:
    • karma:

Creamos la aplicación

Haremos:

$ mkdir ex01
$ yo angular

Comienzo

Comenzamos concentrándonos en el resultado: ¿qué es lo que queremos obtener?:

  1. Queremos una tabla que muestre los aeropuertos de la Dafif.
  2. Queremos que la tabla contenga campos con los que podamos filtrar la información.
  3. 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}}&nbsp;{{driver.Driver.familyName}}
        </td -->
        <td>{{arpt.ICAO}}</td>

        <td>{{arpt.name}}</td>
        <td>{{arpt.lat}}</td>
        <td>{{arpt.lon}}</td>
      </tr>
    </tbody>
  </table>
</div>