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

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

javascript angularjs node.js http

Javascript 如何在AngularJS的索引页上使用Node.js中的信息,javascript,angularjs,node.js,http,Javascript,Angularjs,Node.js,Http,我目前还不熟悉MEAN stack，基本上我有一个基本的应用程序我正在本地主机上运行节点服务器，因此node.js提供索引页面 var index = require('./routes/index'); app.use('/', index); 路由器如下所示： var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { });

我目前还不熟悉MEAN stack，基本上我有一个基本的应用程序

我正在本地主机上运行节点服务器，因此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页面服务的？难道我不应该做一个render（）之类的事情吗

我的下一个问题是，如何从Node.js获取数据并将其提供给初始GET请求，并在角度方面使用该数据

我知道另一种方法是发送另一个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;
            });
        });
    }

});

基本上，在我看来，有两个GET请求被提出。当我转到localhost:3000/并加载我的HTML页面时，然后在HTML页面中加载控制器时（这是通过getData完成的）。有没有办法将此减少为一个GET请求（最好是在初始请求中）？

您的节点路由器设置了一条路由，您的角度服务方法可以向其发出

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

看看

您要做的是为索引文件提供一个模板而不是html。首先，我们需要告诉我们的express应用程序我们需要什么样的渲染引擎

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

作为另一种完全不同的选择，通过使用angular ui router和使用

resolve

，您可以使用$http从服务器获取数据，resolve将$http请求的结果注入视图的控制器中。

“首先，我试图了解此路由器是如何为HTML页面服务的？”-我根本不明白它是怎么做的。当我运行代码时，它会说：

ReferenceError:app未定义

。您的请求中是否缺少某些内容？为什么要将其减少为一个请求？这是一种更具可扩展性的模式，可以将静态html的服务与应用程序数据的提供分开。@Quentin这不是最小的、完整的、可验证的，因为我删除了一些代码，使其更易于阅读。如果ReferenceError来自服务器端，您可能必须添加使用express框架的

var app=express（）

。@Sahil-您应该提供一个。它之所以能够呈现页面，大概是因为你没有包含代码。@Belfordz我可以提出两个请求，特别是因为这个应用程序很小，但我认为最好只有一个。我知道如果我想发出GET请求，路由将为该请求提供响应，我可以在服务或工厂中使用该响应。我感到困惑的是，当您在浏览器中键入“localhost:3000”时，浏览器会发送GET请求，但我如何访问该初始请求？是否无法从客户机发出的第一个get请求获得响应？你总是要做第二个吗？你也可以完全控制它！当您第一次启动服务器时，您可以告诉它根路径是什么

是

localhost:3000

映射到的根路径。如果需要，您可以将

localhost

映射到

/任何内容？ejs模板userdata
和$scope.data
不冲突吗？或者默认情况下，我可以在ejs文件中执行类似于$scope.data=userdata
的操作吗？我开始认为，这只会使事情变得复杂，最好是对静态页面发出第一个GET请求，然后对数据发出第二个GET请求。从您的评论中可以看出，您希望有一种简单的方法将GET
请求的响应输入到您的视图中。视图
->控制器
->服务
->路由
模式是可伸缩的，这意味着它可以分离关注点，这就是您想要代码的样子。从长远来看，这种模式更容易测试，更容易维护。我想我现在更了解这一点。我认为现在发生的是服务
->路线
->查看
当您最初键入URL时。。。我试图将控制器
放在视图之前，但这不起作用。@ilovecoding更新，希望在这里提供更清晰的信息。
angular
.module('userdata', [])
.constant("data", <%= allThemDatas %>)