0

I have configure node js default project with express and using HTML page instead of JADE. I want to use Angular JS within HTML pages. Angular JS Simple examples are working fine in this project as :

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

Its working Fine. But if i am using {{name}} instead of ng-bind="name", its not working in this project. For Example:

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

This is not working in node project. Can anyone help me to find-out the issue.

App.js File code is as following:

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;

Help will be appreciated.

Amandeep Singh
  • 372
  • 6
  • 20

3 Answers3

1

First remove it :

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

I'm not sure about your strug folder but I guess file index.html of you in folder public . Try add this code in your node :

   app.get('/*',function(req,res){
          res.sendFile( index.html,{root:path.join(__dirname,public/index.html)});
        })
Akashii
  • 2,251
  • 3
  • 17
  • 29
1

The html engine is not supported out of the box.

(ref: https://github.com/expressjs/express/wiki#template-engines)

Solution given by @Thanh Tùng will work, but if you really want to set html as a view engine you should follow this solution

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

Later you need to place your index.html inside /views directory

(original answer: https://stackoverflow.com/a/44945104/3627827)

EDIT: updated answer as suggested by @DanielZiga

kkalamarski
  • 134
  • 6
  • is like he said: My Moto isn't working and you are suggesting to buy a bike... while, instead, he's expecting to fix the issues! – Hitmands Jul 28 '17 at 10:36
  • Well, he said that he wants to use html view engine, so he does not care what tool will he choose. If the moto is broken down, why not use a bike? Also this moto's build is failing. Do you think it's safe to ride a moto with it's screws loosen? ;) – kkalamarski Jul 28 '17 at 10:41
  • It is commonly accepted that a good answer is a pertinent answer... If I wish to taste apples, I don't care that strawberries taste better. I want apples, if you don't have apples, then, you can't solve my issue... Otherwise, you could have suggested to build everything in `C++` to fix the issue – Hitmands Jul 28 '17 at 11:12
0

You are using Swig as a Template Engine for your Server Side Rendering.

As you can see in its doc, Swig uses {{ and }} as interpolation delimiters... they're the same used by AngularJS.

What could happen is that Swig doesn't let your raw html reach the angular...

Try to change 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('"_"');
  }])
;
Hitmands
  • 13,491
  • 4
  • 34
  • 69
  • in which file these chnages to be made?? – Amandeep Singh Jul 28 '17 at 10:01
  • anywhere... Try to don't use SO as debugging help social media. – Hitmands Jul 28 '17 at 10:03
  • @Hitmands you are lacking $ inside 'interpolateProvider', also you didn't specify where to put that code. (Notice that there's no js file attached) – kkalamarski Jul 28 '17 at 10:20
  • While it's true that Swig is set as view engine, [consolidate](https://github.com/tj/consolidate.js/) swig is no longer maintained (and it's build is failing), so I'd suggest against using it. – kkalamarski Jul 28 '17 at 10:23
  • @Hitmands after using this its showing "[$injector:nomod] http://errors.angularjs.org/1.6.4/$injector/nomod?p0=ModuleName" error – Amandeep Singh Jul 28 '17 at 10:24
  • As I said, SO is not a debugging help place. Instead of uncritically copy/past code, you should try to understand the code... `ModuleName` should be the name of the root module in your application. – Hitmands Jul 28 '17 at 10:29