elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: AIO elhacker.NET 2021 Compilación herramientas análisis y desinfección malware


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  consumir API en Angular
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: consumir API en Angular  (Leído 2,431 veces)
Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
consumir API en Angular
« en: 2 Junio 2020, 19:19 pm »

Hola como hago para consumir est API en Angular?



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


En línea

7w7
[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: consumir API en Angular
« Respuesta #1 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".


En línea

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
redireccionar en angular JS
Desarrollo Web
landerzx 0 3,284 Último mensaje 23 Agosto 2013, 16:23 pm
por landerzx
Angular JS (Angular Material)
Desarrollo Web
carwen 3 3,439 Último mensaje 20 Junio 2016, 21:46 pm
por daniela Vega
curl y angular js
PHP
Adrialmend 1 2,393 Último mensaje 21 Agosto 2016, 15:18 pm
por Adrialmend
juego en angular
Desarrollo Web
Beginner Web 0 1,868 Último mensaje 20 Mayo 2020, 00:03 am
por Beginner Web
angular bootstrap express facebooik API
Desarrollo Web
Beginner Web 1 1,920 Último mensaje 23 Junio 2020, 09:46 am
por [u]nsigned
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines