Angular js 表达式在 Node js 项目中不起作用

Posted 2023-03-07

技术标签:

【中文标题】Angular js 表达式在 Node js 项目中不起作用【英文标题】：Angular js Expressions not working in Node js project 【发布时间】：2018-01-04 06:17:55 【问题描述】：

我已经用 express 配置了 node js 默认项目，并使用 html 页面而不是 JADE。我想在 HTML 页面中使用 Angular JS。 Angular JS 简单示例在这个项目中运行良好：

 <!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name : <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

它工作正常。但如果我使用 name 而不是 ng-bind="name"，则它在这个项目中不起作用。例如：

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name : <input type="text" ng-model="name"></p>
  <h1>Hello name</h1>
</div>

</body>
</html>

这在节点项目中不起作用。谁能帮我找出问题所在。

App.js 文件代码如下：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

// Sql server new code 
var Connection = require('tedious').Connection;
var Request = require('tedious').Request;

var webconfig = 
    user: 'sa',
    password: '#####',
    server: '######',
    database: 'Test_Training',

    options: 
        encrypt: false // Use this if you're on Windows Azure 
    

var sql = require('mssql');
// Sql server new code 

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();


// To use simple html page
var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
// To use simple html page

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: false ));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(__dirname + '/public'));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) 
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
);

// error handler
app.use(function(err, req, res, next) 
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : ;

  // render the error page
  res.status(err.status || 500);
  res.render('error');
);
module.exports = app;

我们将不胜感激。

【问题讨论】：

控制器在哪里它对我来说可以正常工作。 @sachilaranawaka 此代码在没有控制器的情况下工作 @Hadi 是的，你是对的。它在简单的 html 页面中工作正常。但在我的节点 js 项目中不起作用。我无法找出问题所在。你在使用视图引擎吗？你能在服务器中提供一些代码吗？ 【参考方案1】：

首先删除它：

app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

我不确定你的 strug 文件夹，但我猜你的文件 index.html 在文件夹 public 中。尝试在您的节点中添加此代码：

   app.get('/*',function(req,res)
          res.sendFile( index.html,root:path.join(__dirname,public/index.html));
        )

【讨论】：

董我已将 App.js 代码更新到我的问题部分。您能否在建议我添加此代码的地方修改此内容。我试过了，但它显示错误。 “意外的语法” @ThanhTùng 你在第一个参数中仍然缺少一个 '。【参考方案2】：

不支持开箱即用的 html 引擎。

（参考：https://github.com/expressjs/express/wiki#template-engines）

@Thanh Tùng 给出的解决方案可行，但如果你真的想将 html 设置为视图引擎，你应该遵循这个解决方案

app.set('views', path.join(__dirname, 'views'));
// Set EJS View Engine
app.set('view engine','html');
// Set HTML engine
app.engine('html', require('ejs').renderFile);

稍后您需要将 index.html 放在 /views 目录中

（原答案：https://***.com/a/44945104/3627827）

编辑：@DanielZiga 建议的更新答案

【讨论】：

就像他说的：我的 Moto 坏了，你建议买一辆自行车……而相反，他希望解决问题！好吧，他说他要使用html视图引擎，所以他不在乎他会选择什么工具。如果摩托车坏了，为什么不骑自行车呢？这个moto的构建也失败了。您认为在螺丝松动的情况下骑摩托车安全吗？ ;) 人们普遍认为，一个好的答案就是一个中肯的答案......如果我想品尝苹果，我不在乎草莓的味道更好。我想要苹果，如果你没有苹果，那么，你无法解决我的问题......否则，你可以建议在C++ 中构建所有内容来解决问题【参考方案3】：

您将Swig 用作服务器端渲染的Template Engine。

正如您在其文档中看到的，Swig 使用和作为插值分隔符...它们与 AngularJS 使用的相同。

可能发生的情况是 Swig 不会让您的原始 html 达到 angular...

尝试更改interpolation delimiters：

// https://docs.angularjs.org/api/ng/provider/$interpolateProvider

angular
  .module('ModuleName')
  .config(['$interpolateProvider', function($interpolateProvider) 

    // set start symbol here
    $interpolateProvider.startSymbol('^_^');

    // set end symbol here
    $interpolateProvider.endSymbol('"_"');
  ])
;

【讨论】：

要在哪个文件中进行这些更改？？任何地方...尽量不要使用 SO 作为调试帮助社交媒体。 @Hitmands 您在“interpolateProvider”中缺少 $，您也没有指定该代码的放置位置。（注意没有附加js文件）虽然 Swig 确实被设置为视图引擎，但 consolidate swig 不再维护（并且它的构建失败），所以我建议不要使用它。 @Hitmands 使用后显示“[$injector:nomod] errors.angularjs.org/1.6.4/$injector/nomod?p0=ModuleName”错误

以上是关于Angular js 表达式在 Node js 项目中不起作用的主要内容，如果未能解决你的问题，请参考以下文章

损坏的文件 - Angular 项目中 node_modules 中的 .xml2js.DELETE/package,json

angular js ng-class 将表达式显示为类而不是处理它

将 JSON 从 angular.js 发送到 node.js

Angular.js 的 Node.js CORS 会话 cookie

d3.js：在 Angular 应用程序和 node.js 上运行相同的代码

Angular、Node.js、MySQL 图片上传