Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Beginner Web en 2 Junio 2020, 19:19 pm



Título: consumir API en Angular
Publicado por: Beginner Web en 2 Junio 2020, 19:19 pm
Hola como hago para consumir est API en Angular?

(https://www.subeimagenes.com/img/100795358-579634039644183-5515823011292250112-o-copia-2134879.jpg)

Esto es lo que hice yo.
 
Código
  1. <section class="row">
  2.            <div class="col-md-8 d-md-block d-lg-block d-none">
  3.                <div class="card-header text-center">
  4.                    <h5 class="card-title">Conversor de divisas</h5>
  5.                    <div class="card-body">
  6.  
  7.                        <table class="table table-hover" cellpadding="3">
  8.                            <thead class="bg-primary">
  9.                                <th></th>
  10.                                <th>USD</th>
  11.                                <th>EUR</th>
  12.                                <th>GBP</th>
  13.                                <th>BTC</th>
  14.                                <th>ARS</th>
  15.                            </thead>
  16.                            <tbody>
  17.                                <tr>
  18.                                    <td>
  19.                                        <p>USD</p>
  20.                                        <p>Inverse</p>
  21.                                    </td>
  22.                                    <td>
  23.                                        <p>1.0000</p>
  24.                                        <p>1.0000</p>
  25.                                    </td>
  26.                                    <td>
  27.                                        <p>0.0000</p>
  28.                                        <p>0.0000</p>
  29.                                    </td>
  30.                                    <td>
  31.                                        <p>0.0000</p>
  32.                                        <p>0.0000</p>
  33.                                    </td>
  34.                                    <td>
  35.                                        <p>0.0000</p>
  36.                                        <p>0.0000</p>
  37.                                    </td>
  38.                                    <td>
  39.                                        <p>0.0000</p>
  40.                                        <p>0.0000</p>
  41.                                    </td>
  42.                                </tr>
  43.                                <tr>
  44.                                    <td>
  45.                                        <p>EUR</p>
  46.                                        <p>Inverse</p>
  47.                                    </td>
  48.                                    <td>
  49.                                        <p>0.0000</p>
  50.                                        <p>0.0000</p>
  51.                                    </td>
  52.                                    <td>
  53.                                        <p>1.0000</p>
  54.                                        <p>1.0000</p>
  55.                                    </td>
  56.                                    <td>
  57.                                        <p>0.0000</p>
  58.                                        <p>0.0000</p>
  59.                                    </td>
  60.                                    <td>
  61.                                        <p>0.0000</p>
  62.                                        <p>0.0000</p>
  63.                                    </td>
  64.                                    <td>
  65.                                        <p>0.0000</p>
  66.                                        <p>0.0000</p>
  67.                                    </td>
  68.                                </tr>
  69.                                <tr>
  70.                                    <td>
  71.                                        <p>ARS</p>
  72.                                        <p>Inverse</p>
  73.                                    </td>
  74.                                    <td>
  75.                                        <p>0.0000</p>
  76.                                        <p>0.0000</p>
  77.                                    </td>
  78.                                    <td>
  79.                                        <p>0.0000</p>
  80.                                        <p>0.0000</p>
  81.                                    </td>
  82.                                    <td>
  83.                                        <p>0.0000</p>
  84.                                        <p>0.0000</p>
  85.                                    </td>
  86.                                    <td>
  87.                                        <p>0.0000</p>
  88.                                        <p>0.0000</p>
  89.                                    </td>
  90.                                    <td>
  91.                                        <p>1.0000</p>
  92.                                        <p>1.0000</p>
  93.                                    </td>
  94.                                </tr>
  95.                            </tbody>
  96.  
  97.                        </table>
  98.                    </div>
  99.                </div>
  100.            </div>
  101.  
  102.            <!-- d-lg-block no oculta el compenente en tamaños grandes, d-none oculta en todos los demas tamaños <div class="col-md-4 d-md-block d-lg-block d-none">-->
  103.            <div class="col-md-4 col-sm-12">
  104.                <div class="card">
  105.                    <div class="card-header text-center conversor">
  106.                        Conversor de divisas
  107.                    </div>
  108.                    <div class="card-body bg-primary">
  109.  
  110.                        <form>
  111.                            <div class="form-group">
  112.                                <label for="txtCantidad">Cantidad</label>
  113.                                <input type="number" class="form-control form-control-sm" id="txtCantidad"
  114.                                    aria-describedby="emailHelp">
  115.                            </div>
  116.                            <div class="form-group">
  117.                                <label for="txtDe">De</label>
  118.                                <select class="form-control form-control-sm">
  119.                                    <option>Peso Argentino</option>
  120.                                    <option>Dolar US</option>
  121.                                    <option>Euro</option>
  122.                                </select>
  123.                            </div>
  124.                            <div class="form-group">
  125.                                <label for="txtA">A</label>
  126.                                <select class="form-control form-control-sm">
  127.                                    <option>Peso Argentino</option>
  128.                                    <option>Dolar US</option>
  129.                                    <option>Euro</option>
  130.                                </select>
  131.                            </div>
  132.                            <div class="form-group">
  133.                                <input type="password" class="form-control" readonly id="txtA">
  134.                            </div>
  135.                            <button type="submit" class=" col-sm-12 btn btn-warning btn-sm">Convertir</button>
  136.                        </form>
  137.  
  138.                    </div>
  139.                </div>
  140.            </div>
  141.        </section>

gracias


Título: Re: consumir API en Angular
Publicado por: [u]nsigned en 6 Junio 2020, 02:55 am
Hola, la verdad que nunca sue Angular, pero supongo que es tal simple como hacer una peticion HTTP 1.1 GET a la api en cuestion. En otros frameworks como React o Vue es tan simple como usar fetch (api nativa nativo) o axios (libreria externa y mi forma preferida de trabajar en Vue.)

Pero en Angular la cosa se complica, porque tenes que usar un services y el modulo especifico del framework.

https://angular.io/guide/http

Una pregunta, esto es una trabajo para la escuela/intituto o es por iniciativa propia? Si es el segundo caso, yo te recomendaria empezar primero con el framework Vue que es JS y esta exelentemente documentado, en dos o 3 dias lo aprendes en su totalidad y solo con la documentacion oficial.

Angular tiene la curva de aprendizaje mas elevada de todos, primero porque solo usa typescript y en segundo lugar porque no te da libertad, siempre tenes que hacer las cosas como el framework te lo impone, la famosa "angular way".