帶有Node.js和parse.com后端的AngularJS SPA

Question

我有帶有ui-router的AngularJS SPA，它運行良好。 它使用parse.com作為后端，並且我在常規Apache服務器上工作。

現在，我想將其移至node.js服務器應用程序，並希望node.js處理parse.com的所有CRUD。

我設置了一個不錯的node.js小應用程序來充當服務器，它可以正常工作。

我的問題是：如何處理node.js服務器應用程序與AngularJS SPA之間的請求？

我已經包含了我的server.js文件，以防任何人可以使用它。

 // set up ===================================================================================================== var express = require('express'), path = require('path'), morgan = require('morgan'), bodyParser = require('body-parser'), methodOverride = require('method-override'), routes = require('routes'), keys = require('./config/keys'), port = 80; var app = express(); var Parse = require('parse/node').Parse; // view engine setup ========================================================================================== app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); // configuration ============================================================================================== app.use(require('prerender-node').set('prerenderToken', keys.prerender)); app.use(morgan('dev')); app.use(bodyParser.urlencoded({'extended':'true'})); // parse application/x-www-form-urlencoded app.use(bodyParser.json()); // parse application/json app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json app.use(methodOverride()); app.use(express.static(path.join(__dirname, 'public_html'))); Parse.initialize(keys.app, keys.js); // routing ==================================================================================================== app.use(function(req, res) { "use strict"; // use res.sendfile, as it streams instead of reading the file into memory. =============================== res.sendfile(__dirname + '/public_html/index.html'); }); app.use('/', routes); // catch 404 and forward to error handler ===================================================================== app.use(function(req, res, next) { "use strict"; var err = new Error('Not Found'); err.status = 404; next(err); }); // listen (start app with node server.js) ===================================================================== app.listen(port); console.log("App listening on port %d", port); 

文件結構：

- public_html/ <-- the angularjs app -->
- node_modules/ <-- installed modules for node -->
- config/
    - keys.js
- server.js
- package.json

當前設置

因此，目前，我將在我的（angularjs）應用控制器中處理parse.com數據-其中一些數據將在parse的雲代碼中處理。

現在，我想將所有parse.com處理都移到我的node.js服務器應用程序中，以便我的angularjs“調用” node.js服務器應用程序，而后者又“調用” parse.com以獲取所需的數據，然后將其返回給angularjs應用，以便我可以更新視圖（使用來自parse.com的新數據）。

我想要的例子

parse.com <--> node.js server-app <--> angularjs SPA (views)

我在控制器中做的一件簡單的事情就是

 var Profile = Parse.Object.extend('Profile'); var query = new Parse.Query(Profile); query.equalTo('objectId', $stateParams.authorPermaLink); query.find().then(function(results){ var object = results[0]; $scope.authorObj = results[0]; $scope.template.pageName = object.get('screenname'); $scope.template.pageAuthor = object.get('screenname'); $scope.template.pagePublished = object.createdAt; $scope.template.pageLastEdit = object.updatedAt; $scope.$apply(); }, function(error){ // error-handling console.log("Error: " + error.code + " " + error.message); }); 

現在，將這段代碼移動到node.js很簡單，因為我可以直接在node.js中使用parse.com SDK。 但是，如何使angularjs應用程序與node.js服務器應用程序通信？

Answer 1

好的，所以我設法解決了這個問題。

解決方案是創建可處理我的angularjs應用中的http請求的路由。

route.js（節點）：

 app.get('/api/article/:permalink', function(req, res) { blog.getArticle(req.params.permalink, function(data) { res.json(data); }); }); // everything else app.use(function(req, res) { // use res.sendfile, as it streams instead of reading the file into memory. res.sendfile('./public_html/index.html'); }); 

然后使用上面提到的blog對象和方法創建一個模型。

model.js（也是節點）：

 module.exports = { getArticle : function(permalink, callback) { "use strict"; var Article = Parse.Object.extend('Article'); var query = new Parse.Query(Article); query.include('category'); query.include('profile'); query.equalTo('permalink', permalink); query.find().then(function(results) { var result = results[0]; var object = { title: result.get('title'), screenname: result.get('profile').get('screenname'), profileID: result.get('profile').id, content: result.get('content'), publishedAt: result.get('publishedAt'), updatedAt: result.updatedAt, categoryName: result.get('category').get('categoryName'), categoryPermaLink: result.get('category').get('categoryPermaLink'), articleID: result.id }; callback(object); }, function(error) { callback({error: error}); }); } }; 

最后，在mu angularjs應用程序中，只需進行一個http請求（在此示例中獲取，但其他剩余動詞也都可以）。

controller.js（angularjs）：

 $http.get('/api/article/' + $stateParams.articlePermaLink ).then(function successCallback(response) { response = response.data; $scope.articleTitle = response.title; $scope.template.pageName = response.title; $scope.articleAuthor = response.screenname; $scope.template.pageAuthor = response.screenname; $scope.profilePermaLink = response.profileID; $scope.articleContent = response.content; $scope.publishDate = response.publishedAt; $scope.template.pagePublished = response.publishedAt; $scope.template.pageLastEdit = response.updatedAt; $scope.category = response.categoryName; $scope.categoryPermaLink = response.categoryPermaLink; $scope.currentArticle = response.articleID; console.log(response.commentObj); }, function errorCallback(response) { console.log("Error: " + response.code + " " + response.message); }); 

回調是魔術！