Home / Questions / 17600
Accepted
Sergio Romero
Asked: 2020-07-24 21:48:50 +0800 CST 2020-07-24 21:48:50 +0800 CST

fetch information from database with angular 2

  • 772

I'm new to angular 2,I used angular 1x a bit for a college project.

My question is with angular 2, can you bring information from the database?

For example of a database in MySQL but my question is how. In angular 1 I made a script in php that made a query to the database but in it is the same? How do I get information from the database?

Almost all the examples I've seen use @angular/httpwith the method .get(<la url>) but use a file .jsoninstead of records from a table.

I've thought about putting a file .phpin the folder of a component that queries the server, but I'm not entirely sure why I do http.get(<la url>) n't know how to put the address in the method in the url. I have tried with a .jsonand everything is fine but to bring data from the server I have doubts.

angularjs-2.0

3 Answers

  1. Best Answer

    While you could connect directly from Angular2, this is bad practice as it involves exposing the database to the client. The method you mention, connecting to an intermediate server is preferred.

    In order to make the request , the PHP script has to be hosted on a web server (even if it's on the same machine). That way, <la url>it will be the url where your script is, either at http://localhost/xxxx/tu_script.phpor where it is hosted.

    Code

    In broad strokes, and only by way of example

    From Angular2

    import {Http, Response} from 'angular2/http';


class Componente {
  data: Object;

  constructor(private http: Http) {
    http.get('http://localhost/xxxx/tu_script.php')  //usar la url que corresponda
        .map((res: Response) => res.json())
        .subscribe(
            res => this.data = res,
            err => console.error(err),
            () => console.log('Funciona!')
        );
  }
}

    in PHP

    <?php

    //Conectar a MySQL y obtener los valores deseados.. 
    // En este ejemplo se asume que ya tenemos los datos en un array
    $json['query_de_bd'][] = array(
        'campo1' => 'valor1', 
        'campo2' => 'valor2',
        'etc'    =>  '...'
    );

    //Enviar headers y el JSON como respuesta
    header('Content-Type: application/json');
    header('Content-Type: text/html; charset=utf-8');
    echo json_encode($json);
?>
    • 3

  2. To bring data into Angular 2 from a MySQL database , I recommend using the following.

    • It uses Angular 2 services to make requests to a RESTFul API .

    • Create server-side RESTFul APIs that receive and return data of type JSON for better data transfer speed and so that you can process them in the Angular 2 view correctly.

    • I recommend you to use Express with Node JS .

    See an example of how to make a request and print the data in the view.

    Angular 2 HTTP Request

    • 3

  3. If the technique is the same, although of course the code differs when it comes to TypeScript, since angular 2 it has the http to be able to invoke a service that returns json

    If you look at the documentation

    http-client

    you will see that when creating the service it is imported

    import { Http, Response } from '@angular/http';

    it is through this that you will invoke the service using http.getwhich it will return an observable (it would be the equivalent to the promise)

    • 1