How to share data between expressjs and angularjs

Question

How can i share data between express.js and angular.js , am using ejs view engine in express.js . in case if i want share data to in the root page of angular.js i can simply use :

 <%= {{variable from express.js}} %>

Note

meaning of root page of angular.js page is the target page of route in express.js . in my example is index.ejs.

Question
but what if i want use the variable or array in express.js inside a directive template of angular.js ??

Example :

index.js

var mysql = require('mysql');

exports.index = function (req, res) {
    var connection = mysql.createConnection({
        host: '*****',
        user: '*****',
        password: '******',
        insecureAuth: true
    });

    connection.connect();
    connection.query('select * from asterisk.queue_log limit 10', function (err, rows, fields) {
        if (err) throw err;
        console.log(rows);
        res.render('index', {
            values: rows,
            title: 'Express',
        });
    });

    connection.end();
};

Angular directive template

<div class="half-unit bg-light-ltr" ng-repeat="active in ActiveCalls">
    <dtitle>{{active.queueName}}</dtitle>
    <hr>
    <div>

    </div>

    <h2>{{values}} <!--<i class="fa fa-arrow-up {{test}}"></i>--></h2>
    <p>
        <img src="images/up-small.png" alt=""> 412 Max. |
        <img src="images/down-small.png" alt=""> 89 Min.
    </p>
</div>

NOTE
I can use ng-init="values='<%= values%>'" in the root page of angular (index.ejs) and then use values array in directive template . am asking if there is a better way doing that .

Obviously, you have to make a get request handler in Express that is going to response with desired data to some ajax requests from your client-side i.e. Angular app. — Nonemoticoner
– Nonemoticoner, Commented Oct 18, 2015 at 22:28

uno-2017 · Accepted Answer · 2015-10-19 10:23:35Z

Thanks Nonemoticoner for you comment , i have create REST API in expressjs , so to handle http request come from angularjs then fetch data from database and return it back .

Example :

app.js

...
...
var api = require('./routes/api');
app.get('/api/answerdcalls/:id', api.answerdCalls);
...
...

routes / api.js

/*
 * RESET API Handler .
 */

// Datetime format : 2015-10-18 15:00:00 database
// Datetime format : Mon Oct 19 2015 12:48:10 GMT+0300 (EEST)   javascript

var mysql = require('mysql');

exports.answerdCalls = function (req, res) {
    var connection = mysql.createConnection({
        host: '******',
        user: '*****',
        password: '******',
        insecureAuth: true
    });

    connection.connect();

    var d = new Date();
    var year = d.getFullYear();
    var day = d.getDate();
    var hour = d.getHours();
    var mon = d.getMonth() + 1;

    connection.query('select count(*) as count from asterisk.queue_log where time between "' + year + '-' + mon + '-' + day + ' ' + hour + ':00: 00"' + 'and "' + year + '-' + mon + '-' + day + ' ' + hour + ':59:59" ' + ' and event ="CONNECT" ',
        function (err, rows, fields) {
            if (err) throw err;
            console.log(rows[0]);
            res.send(rows[0]);

        });

    connection.end();
};

Angular http factory

app.factory('ResetCalls', function ($rootScope, $http) {

    var service = {};
    var answerdCallsUrl = 'http://localhost:4000/api/answerdcalls';

    service.getAnswerdCalls = function (queueId) {
        $http.get(answerdCallsUrl + '/' + queueId).success(function (data) {
            $rootScope.queueTotal = data.count;
        });
    };

    return service;
});

So in simple word ,
-------> angularjs send the http get
-----> expressjs receive the get request handle it
-----> return back the fetched data .

Collectives™ on Stack Overflow

How to share data between expressjs and angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related