Question

我目前是MEAN堆栈的新手，基本上我有一个基本的应用程序。

我在localhost上运行节点服务器，因此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请求并使用响应数据并将其绑定到范围变量。我的意思是：

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

});

基本上，从我的角度来看，有2个GET请求正在进行中。当我转到localhost：3000 /并加载我的HTML页面，然后在HTML页面中加载控制器（通过getData完成）。有没有办法将此减少到一个GET请求（最好是在初始请求中）？

Answer 1

查看this express docs page about templating engines

您要做的是为索引文件提供模板而不是html。首先，我们需要告诉我们的快速应用程序我们想要的渲染引擎

App_Main

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

AppMain

您可以重写索引文件以使用特定的模板语法。 ejs会让你这么简单，所以我们会选择那个。我们只想获取原始的index.html文件，并将以下内容添加到头部或其中：

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

从这里开始，您可以使用app.get('/', function (req, res) { res.render('index', { allThemDatas: { username: 'pleb', password: 'password' } }) })，或者更可测试的角度方式是使用角度常量。

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

作为另一种选择，通过使用角度ui-router并使用window.userdata，您可以使用$ http从服务器获取数据，并且解析将$ http请求的结果注入你的视图控制器。

Answer 2

您的节点路由器设置了一个路由，您的角度服务方法可以向GET请求。

所以，举例说明：

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

如果您选择这样做，这实际上会产生GET请求并收集响应。如上图所示，您可以发送您想要的任何响应 - 在这种情况下，字符串“something”。把它想象成一个终点。

在您的角度服务中（在我看来，不是控制器），您可以发出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
     });

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

2 个答案: