gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 16:36:29 25 4
gpt4 key购买 nike

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

我在本地主机上运行 Node 服务器,以便 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 请求并在 Angular 端使用该数据?

我知道另一种方法可能是发送另一个 GET 请求并使用响应数据并将其绑定(bind)到范围变量。我的意思是:

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 页面中加载 Controller 时(通过 getData 完成)。有没有办法将其减少到一个 GET 请求(最好是在初始请求中)?

最佳答案

看看this express docs page about templating engines

您要做的是为您的索引文件提供一个模板而不是 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>
...

从这里开始,您可以只使用 window.userdata,或者更可测试的 Angular 方法是使用 Angular 常量。

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

作为一个完全不同的替代方案,通过使用 angular ui-router 和 resolve,您可以使用 $http 从服务器获取数据,并且 resolve 将注入(inject) $ 的结果为您向 View 的 Controller 发送 http 请求。

关于javascript - 我如何在 AngularJS 的索引页面上使用来自 Node.js 的信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41513164/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com