2015-10-18 35 views
1

我如何在express.js和angular.js之間共享數據,我在express.js中使用ejs視圖引擎。在情況下,如果我想共享數據在angular.js的根頁,我可以簡單地使用:如何在expressjs和angularjs之間共享數據

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

注angular.js頁的根頁

意思是目標頁面express.js中的路由。在我的例子中是index.ejs。

問題
但如果我想使用express.js變量或數組angular.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(); 
}; 

角指令模板

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


我可以在角度(index.ejs)根頁使用納克-INIT =「值=‘<%=值%>’」,然後使用值陣列中的指令模板。我問是否有更好的方法做到這一點。

+1

顯然,您必須在Express中創建一個get請求處理程序,以便用您的客戶端(即Angular應用程序)的某些ajax請求響應期望的數據。 – Nonemoticoner

回答

1

非常感謝您的評論,我已經在expressjs中創建了REST API,因此處理來自angularjs的http請求,然後從數據庫中獲取數據並將其返回。

實施例:

app.js

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

路由/ 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(); 
}; 

角HTTP工廠

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; 
}); 
在簡單的一句話

所以,
-------> angularjs發送HTTP GET
-----> expressjs收到get請求處理它
----->返回取回的數據。