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


 


Tema destacado: Sigue las noticias más importantes de elhacker.net en ttwitter!


+  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 239 veces)
Beginner Web


Desconectado Desconectado

Mensajes: 526


youtu.be/0YhflLRE-DA


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

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

{_id: "5ef16999f6ce240abc225ss3",
nombre: "Ana Keldysh",
nacionalidad: "Argentina",
edad: "17",
profesion: "Desarrollador Web Full Stack",
"__v": 0
}
[u]nsigned


Desconectado Desconectado

Mensajes: 2.363

Vue SSr


Ver Perfil WWW
Re: consumir API en Angular
« Respuesta #1 en: 6 Junio 2020, 02:55 »

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

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 2,184 Último mensaje 23 Agosto 2013, 16:23
por landerzx
Angular JS (Angular Material)
Desarrollo Web
carwen 3 1,968 Último mensaje 20 Junio 2016, 21:46
por daniela Vega
curl y angular js
PHP
Adrialmend 1 813 Último mensaje 21 Agosto 2016, 15:18
por Adrialmend
juego en angular
Desarrollo Web
Beginner Web 0 98 Último mensaje 20 Mayo 2020, 00:03
por Beginner Web
angular bootstrap express facebooik API
Desarrollo Web
Beginner Web 1 166 Último mensaje 23 Junio 2020, 09:46
por [u]nsigned
Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines