如何在expressjs和angularjs之间共享数据

时间:2015-10-18 17:51:16

标签: angularjs express

我如何在express.js和angular.js之间共享数据,我在express.js中使用ejs视图引擎。如果我想在angular.js的根页面中共享数据,我可以简单地使用:

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

注意

angular.js页面根页的含义是express.js中路由的目标页面。在我的例子中是index.ejs。

问题
但是如果我想在angular.js的指令模板中使用express.js中的变量或数组呢?

示例:

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指令模板

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

注意
我可以在angular(index.ejs)的根页面中使用ng-init =“values ='&lt;%= values%&gt;'”,然后在指令模板中使用values数组。我在问这样做是否有更好的方法。

1 个答案:

答案 0 :(得分:1)

感谢Verymoticoner为你发表评论,我已经在expressjs中创建了REST API,因此处理来自angularjs的http请求然后从数据库中获取数据并将其返回。

示例:

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;
});

所以简单来说,
-------&GT; angularjs发送http获取     -----&GT; expressjs收到get请求处理它
      -----&GT;返回获取的数据。