Question

我使用express和使用HTML页面而不是JADE配置节点js默认项目。我想在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 =＆＃34; name＆＃34;，那么它在这个项目中不起作用。例如：

<!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;

帮助将不胜感激。

Answer 1

首先删除它：

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

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

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

Answer 2

开箱即用不支持html引擎。

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

@ThanhTùng给出的解决方案可行，但如果您真的想将html设置为视图引擎，则应遵循此解决方案

<div class="container">
  <div class="block">
    <h5>New</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien, a scelerisque neque.</p>
  </div>
  <div class="block">
    <h5>Heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
  </div>
  <div class="block">
    <h5>Cras conva</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapien.</p>
  </div>
  <div class="block">
    <h5>Cras nita</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin purus sapient.</p>
  </div>
</div>

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

中

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

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

Answer 3

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

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

可能发生的事情是Swig没有让你的原始html达到角度......

尝试更改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('"_"');
  }])
;

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

3 个答案: