如何在AngularJS的索引页面上使用来自Node.js的信息

我现在是新的MEAN堆栈,基本上我有一个基本的应用程序。

我在本地主机上运行节点服务器,所以Node.js服务于索引页面

var index = require('./routes/index'); app.use('/', index); 

路由器看起来像这样:

 var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { }); module.exports = router; 

所以没有什么奇特的,这是一个空的路由器。 首先,我想了解这个路由器是如何提供HTML页面的? 我不应该做一个渲染()或什么?

我的下一个问题是,如何从Node.js获取数据并将其提供给初始GET请求并在Angular端使用该数据?

我知道另一种方法可能是发送另一个GET请求,并使用响应数据并将其绑定到作用域variables。 我的意思是:

 var app = angular.module('myApp'); app.controller('myController', function($scope, $http){ $scope.data = ['']; getData(); //Call getData to go to server and retrieve the data I want function getData() { $http .get('/') .success(function(data){ $scope.data = data; }); }); } }); 

基本上,从我的angular度来看,有2个GET请求。 当我去localhost:3000 /和我的HTML页面被加载,然后当控制器加载到HTML页面(这是通过getData完成)。 有没有办法减less这一个GET请求(最好在最初的请求)?

看看这个快速文档页面关于模板引擎

你会做的是给你的索引文件模板,而不是HTML。 首先,我们需要告诉我们的快递应用程序我们想要的渲染引擎

 app.set('view engine', 'ejs'); 

现在我们要定义我们的索引路由,索引路由返回以特定方式插入的html +数据。

 app.get('/', function (req, res) { res.render('index', { allThemDatas: { username: 'pleb', password: 'password' } }) }) 

您可以重写您的索引文件以使用特定的模板语法。 ejs是一个可以做得很容易,所以我们会去那个。 我们只是想把我们原来的index.html文件,并添加到头或以下任何地方:

 ... <head> <script> var userdata = <%= allThemDatas %>; </script> </head> ... 

从这里,你可以只使用window.userdata ,或者做一个更可testing的angular度方法是使用angular常量。

 angular .module('userdata', []) .constant("data", <%= allThemDatas %>) 

作为一个完全的另一种select,通过使用angular度ui路由器和使用resolve ,你可以使用$ http从服务器获取数据,parsing会将$ http请求的结果注入到你的视图控制器中。

你的节点路由器build立一个路由,你的angular度服务方法可以做一个GET请求。

所以说明一下:

 router.get('/', function(req, res, next) { res.send("something"); }); 

这实际上使GET请求和收集响应,如果你select这样做。 如上所示,您可以发送任何您想要的响应 – 在这种情况下,string“东西”。 把它看作是一个终点。

而在你的angular度服务(不是控制器,在我看来),你可以做一个GET请求:

 app.service('DataService', function(DataService){ function getData() { $http .get('/') .success(function(data){ $scope.data = data; // data will be "something" }); }); } }); 

这实际上是向该端点发出请求,并向控制器提供响应。 你可能想在视图中使用这个响应,或者用它做一些事情。

然后,像这样在你的控制器中注入这个服务:

 app.controller('MyController', ['DataService', function(DataService){ //... DataService.getData().then(function(data){ // do something with data });