2016-01-15 4 views
1

У меня есть этот AngularJS SPA с ui-router, который отлично работает. Он использует parse.com в качестве бэкэнд, и я работаю над обычным сервером Apache.AngularJS SPA с Node.js и parse.com backend

Теперь я хочу перенести его в node.js server-app, и я хочу, чтобы node.js обрабатывал все CRUD для parse.com.

Я создал небольшое приложение node.js для работы в качестве сервера, и он работает.

Вопрос: Как обрабатывать запросы между моим node.js server-app и моим AngularJS SPA?

Я включил файл server.js, если кто-нибудь сможет его использовать.

// set up ===================================================================================================== 
 
var express \t \t \t = require('express'), 
 
\t path \t \t \t = require('path'), 
 
\t morgan \t \t \t = require('morgan'), 
 
\t bodyParser \t \t = require('body-parser'), 
 
\t methodOverride \t = require('method-override'), 
 
\t routes \t \t \t = require('routes'), 
 
\t keys \t \t \t = require('./config/keys'), 
 
\t port \t \t \t = 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) { 
 
\t "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) { 
 
\t "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 

Текущая настройка

Таким образом, в настоящее время, я бы иметь дело с parse.com данных в моем (angularjs) приложение контроллер - и некоторые из них в облачном коде parse.

Теперь я хочу переместить все транзакции parse.com на серверное приложение node.js, так что мои angularjs «назовут» server-app 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 прост, потому что я могу напрямую использовать SDK parse.com в node.js. Но как мне получить приложение angularjs для связи с node.js server-app?

+0

Нужно быть более конкретным относительно того, какую проблему у вас есть. – charlietfl

+0

Хорошо, я добавлю еще несколько подробностей о том, что мне нужно ... Я, однако, пытался сохранить общий вопрос: это stackoverflow ... –

+0

Ну, слишком общий может сделать вопрос слишком широким. Не должно быть сложно настроить конечные точки (маршруты) в узле для каждого из ваших типов сбора при анализе. Также будет указывать на разбор REST с узла, а не на javascript sdk – charlietfl

ответ

0

Хорошо, поэтому мне удалось выйти из этого мозга.

Решение состоит в том, чтобы создавать маршруты, которые будут обрабатывать http-запросы из моего приложения angularjs.

routes.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 объекта и методов, которые называются выше.

модель.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}); 
 
    }); 
 
    } 
 

 
};

И, наконец, в мю 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); 
 
});

Обратные вызовы являются волшебство!

Смежные вопросы