How to fetch data from database in node JS and display in angular? || Blockchain & Web development

Here are only couple of stray pieces that should fit together. Angular centers around the frontend side, while NodeJS centers around the backend side. MySQL is utilized for data set administration. There are only couple of stunts that you should utilize like MVC to make you code work and be vigorous. There are numerous ways you can carry out your venture. One of them is the accompanying:

Start Node.js command prompt.
Create the new project directory. For example “myproject”
cd path/myproject or cd path\myproject or cd path\myproject
npm init
npm install mysql --save
npm install express --save
npm install body-parser --save

Whenever you have done the above advances, we can begin coding. In your backend code you need to set up the listening port. You additionally need to design the default catalog. In your frontend you can utilize information restricting to wire up your information model to your perspectives. For example Degree is the paste between application regulator and the view. Design your application in a particular manner. There are many structure blocks we can use for our applications. The rundown is perpetual, so how about we start… Twofold wavy articulations are utilized for noticing, registers audience members techniques and update sees.

Front End:

app/view/index.html
app/js/app.js
app/js/test.js
app/lib/angular/angular.js
app/lib/jquery/jquery.js

Back End:

db/mydb.sql
node_modules
index.js
package.json

Database:

Create the database e.g. “mydb”
Create database user e.g. “user”
Create the database user's password.
Create database tables for the project e.g. “clients”

To begin your task you can utilize: hub index.js or npm start with the order brief. The application will be running at localhost. Utilize the program to see the venture. for example http://localhost:8080/

Index.js

console.log("Start...");
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var mysql = require('mysql');
var now = new Date();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(__dirname+'/app'));

var conexao = mysql.createConnection({
    host: "localhost",
    user: "user",
    password: "123456"
    database: "mydb"
});

conexao.connect(function(err){
    if(err){
        console.log(info()+" "+err);
    }
    else
    {
        console.log(info()+" connected...");
    }
});

function info()
{
    now = new Date();
    return now.getTime();
}

app.set('port', (process.env.PORT || 8080));
app.get('/', function(req, res){
    console.log(info()+" page request.... ");
    res.sendFile(__dirname +'/'+'app/view/index.html');
});

app.get('/clientes', function(req, res){
    console.log(info()+" cliente request.... ");
    var sql = "SELECT * FROM CLIENTES";
    conexao.query(sql, function(err, result, fields){
        if(err){
            console.log(info()+" "+err);
            res.send(info()+": dbErr...");
        }
        else
        {
            console.log(info()+" "+result);
            res.send(result);
        }
    });
});

app.post('/clientPost', function(req, res){
    var data = req.body;
    var dnome = data.nome;
    var dmorada = data.morada;
    var sql = "INSERT INTO CLIENTES (name,address) VALUES(?, ?)";
    conexao.query(sql, [dnome, dmorada], function(err, result){
        if(err){
            console.log(info()+":02 "+err);
            res.send(info()+": dbErr02...");
        }
        else
        {
            console.log(info()+" "+ result);
            res.send(result);
        }
    });
});

var dport = app.get('port');
app.listen(dport, function(){
    console.log(info()+" "+" app is running at http://localhost:"+dport+"/");
    console.log("   Hit CRTL-C to stop the node server.  ");
});

app.js

//alert("start...");
var now = new Date();

//Define the clientesApp module.
var clientesApp = angular.module('clientesApp', []);

//Define the clientesCtrl controller.
clientesApp.controller('clientesCtrl', function clientsList($scope, $http){
    $scope.clientes = [
        {
            name: 'User1',
            address: '123 Usa'
        },
        {
            name: 'User2',
            address: '456 USa'
        }
    ];

    $scope.feedback = now;

    $scope.listView = function(){
        //alert("View");
        $http.get('/clientes').then(function(data){
            $scope.clientes = data.data;
            $scope.feedback = data;
        }); 
    };

    $scope.listSubmit = function(){
        //alert("Submit..");
        var listData = {
            nome: $scope.nome,
            morada: $scope.morada
        };
        //alert(listData.nome);
        $http.post('/clientPost', listData).then(function(data){
            $scope.feedback = data;
        }); 
    };

});

index.html

<html lang="en">
    <head>
        <title>DemoJSPro</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body ng-app="clientesApp">
        <h1>How to fetch data from database in node JS and display in angular?</h1>

        <div ng-controller="clientesCtrl">
            <hr>
            <div>{{ feedback }}</div>
            <hr>
            <div>
                <br>
                Nome:
                <input type="text" ng-model="nome">
                <br>
                Morada:
                <input type="text" ng-model="morada">
                <br>
                <input type="button" value="OK" ng-click="listSubmit()">
                <br>
            </div>
            <div>
                <p>Selecionar um registo:</p>
                <select ng-model="clienteSelecionado" ng-options="x.nome for x in clientes"> 
                </select>
                <table>
                    <tr>
                        <td>{{ clienteSelecionado.nome }}</td>
                        <td>{{ clienteSelecionado.morada }}</td>
                    </tr>
                </table>
            </div>
            <hr>
            <div>
                <input type="button" value="View" ng-click="listView()">
                <hr>
                <table>
                    <tr>
                        <th>###</th>
                        <th>Nome</th>
                        <th>Morada</th>
                    </tr>
                    <tr ng-repeat=" y in clientes">
                        <td>{{ $index + 1 }}</td>
                        <td>{{ y.nome }}</td>
                        <td>{{ y.morada }}</td>
                    </tr>
                </table>
            </div>
            <br>
            <hr>
            <br><br>
        </div>

        <script src="../lib/angular/angular.js"></script>
        <script src="../lib/jquery/jquery.js"></script>
        <script src="../js/app.js"></script>
        <script src="../js/test.js"></script>
    </body>
</html>

CREATE DATABASE MYDB;

USE MYDB;

CREATE TABLE CLIENTES (
id int NOT NULL auto_increment,
name varchar (30) NOT NULL,
address varchar (99) NOT NULL,
PRIMARY KEY (id)
);

GRANT ALL ON MYDB.* to user@localhost identified by 'user';

How to fetch data from database in node JS and display in angular?

Problems are not stop signs, they are guidelines

Problems are not stop signs, they are guidelines

Problems are not stop signs, they are guidelines

Problems are not stop signs, they are guidelines

Problems are not stop signs, they are guidelines

Problems are not stop signs, they are guidelines