个人中心
gpt4 book ai didi

node.js - 通过 NodeJS 服务器提供服务时，Angular 不更新 html 模板变量

转载 作者：搜寻专家 更新时间：2023-10-31 23:13:14 25 4
gpt4 key购买 nike

这是一个有点具体的问题，但我有点不知所措。

首先，介绍一下背景。我一直在努力学习 Angular，我想开始使用 Node 作为后端。我目前有一个可以在本地运行的工作教程应用程序，它只返回硬编码到主 Controller 中的数据。

当我将文件移动到我的 NodeJS 服务器时，它停止工作了。这是有效的:

  • 文件加载正确 - 没有控制台错误，我可以查看源中的每个文件(index.html、app.js、maincontroller.js)
  • 作用域存在，变量已定义。我在 mainController.js 文件中放置了一个 console.log($scope)，我可以看到所有正确定义的变量。
  • 非 Angular javascript 工作 - 我可以在 mainController 外部/内部放置警报，它们都可以正常工作(另外，console.log 显然可以工作)

我通过一个简单的 Node.js 服务器提供文件。我正在使用 express 和 hbs。我最初使用压缩和 0 缓存长度，但后来删除了那些，结果没有变化。

我遇到的具体问题是没有任何模板变量更新。我已将其简化为以下用于测试的代码。在本地查看时，页面显示“我现在了解范围的工作原理!”，当从 Cloud 9 提供服务时，结构存在，但模板中的 {{understand}} 变量不起作用。

index.html

<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/maincontroller.js"></script>
</head>
<body>
<div id="content" ng-app="MyTutorialApp" ng-controller="MainController">
    {{understand}}
</div>
</body>

应用程序.js

var app = angular.module('MyTutorialApp',[]);

主 Controller .js

app.controller("MainController", function($scope){
    $scope.understand = "I now understand how the scope works!";
});

server.js(Cloud 9 上的 Node 服务器)

var express = require('express');
var app = express();

var hbs = require('hbs');

app.set('view engine','html');
app.engine('html',hbs.__express);

app.configure(function() {
    app.set('views', __dirname);
});

//app.use(express.compress());
app.use('/js',express.static(__dirname + '/client/js'));
app.use('/css',express.static(__dirname + '/client/css'));
app.use('/img',express.static(__dirname + '/client/img'));

//router
app.get('/',function(req,res){
    res.render('client/index.html'); 
    return;
});

//404 responses
app.use(function(req, res, next){
res.status(404);

// respond with html page
if (req.accepts('html')) {
    res.render('client/404.html', { url: req.url });
    return;
}

// respond with json
if (req.accepts('json')) {
    res.send({ error: 'Not found' });
    return;
}

// default to plain-text. send()
    res.type('txt').send('Not found');
});

app.listen(process.env.PORT);
console.log('listening on port '+process.env.PORT);

最佳答案

当我阅读时，一切都变得清晰了

"Handlebars.js is an extension to the Mustache templating language"

这意味着 hbs 使用 {{}} 作为分隔符以及 Angular 分隔符，因此您的 html 中的 {{understand}} 永远不会变成 Angular ，因为它首先被 hbs 解析和替换。如果你想将 hbs 与 Angular 一起使用，你需要在你的应用程序配置中使用你的 Angular $interpolateProvider 来更改你的分隔符，例如

$interpolateProvider.startSymbol('{/{');
$interpolateProvider.endSymbol('}/}');

关于node.js - 通过 NodeJS 服务器提供服务时，Angular 不更新 html 模板变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23689028/

25 4 0
文章推荐： node.js - Qt 应用程序 - node.js 服务器通信
文章推荐： php - 无法理解的条件和功能的错误操作
文章推荐： php - Symfony 4 单一形式的多个实体
文章推荐： node.js - 如果响应时间太大，则永远重启 node.js 进程
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com