Angular not updating html template variables when served via NodeJS server

StackOverflow https://stackoverflow.com/questions/23689028

Question

This is a bit of a specific question, but I'm at a bit of a loss for an answer.

First, a little background. I've been trying to learn angular, and I wanted to start using Node as the backend. I currently have a working tutorial app that I can run locally that just returns data that is hard coded into the main controller.

When I moved the files to my NodeJS server, it stopped working though. Here is what works:

  • The files load correctly - there are no console errors, and I can view each of the files in the source (index.html, app.js, maincontroller.js)
  • The scope exists, and the variables are defined. I put a console.log($scope) inside the mainController.js file, and I can see all of the variables defined correctly.
  • Non-angular javascript works - I can place alerts outside/inside the mainController, and they all work correctly (also, console.log obviously works)

I am serving the files via a simple Node.js server. I am using express and hbs. I was originally using compression, and 0 cache length, but have since removed those with no change in the result.

The specific issue I'm having is that none of the template variables update. I've simplified it down to the following code for testing. When viewed locally, the page says 'I now understand how the scope works!', when served from Cloud 9, the structure exists, but the {{understand}} variable in the template doesn't work.

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>

app.js

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

maincontroller.js

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

server.js (Node server on Cloud 9)

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);
Was it helpful?

Solution

everythin became clear when i read 

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

what this menas is that hbs uses {{}} as delimiters as well as angular so the {{understand}} in your html never gets to angular because is first parsed and substituted by hbs. if you want to use hbs with angular youll need to change your delimiters using your angulars $interpolateProvider in your app configuration something like

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

OTHER TIPS

You can use \{{understand}} as this will counter your hbs and put your angular on top.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top