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


 


Tema destacado: Recuerda que debes registrarte en el foro para poder participar (preguntar y responder)


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


Desconectado Desconectado

Mensajes: 542


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.372

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

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