My template engine is messing with Angular

Question

Really stuck here so will appreciate the help.

Let me explain my set up/stack first:

Backend - Node with Express
Frontend - Angular

Snippet from the Node part of the code:

var router = express.Router();

router.get('/main', function(req, res){
  res.render('wall', {siteTitle:'Home'});
});

Snippet from the HTML page:

<p>{{ siteTitle }}</p>

<div ng-controller="wallPosts">
  <div ng-repeat="post in posts">
    <p>{{ post.title }}</p>
  </div>
<div>

Snippet from the Angular controller:

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

angularApp.controller('wallPosts', ['$scope', '$http', function($scope, $http){

$http.get('/api/posts')
    .success(function(result){
        $scope.posts = result;
        console.log(result);
    })
    .error(function(data, status){
        console.log(data);
    });
}]);

Okay so here is the problem - {{ post.title }} bit in the HTML page is not getting updated. However, this is: {{ siteTitle }}

The difference - post.title comes from the Angular app whereas the siteTitle comes from the res.render from Node.

Also, the console.log in the Angular controller works as I wanted to rule out there being a problem with the connection. Also, I have ruled out the '/api/posts' API call as it does indeed pass on an array of objects.

I have configured my Node to use 'hogan-express' as below:

Snippet from Node:

app.engine('html', require('hogan-express'));

So - can someone help me out here? What am I doing wrong? I want my Node to do the routing plus act as an API server and Angular just to get the data from the APIs and just chuck them out to the HTML page.

Thanks in advance, Shayan

Is `{{ siteTitle }}` being rendered by the backend rendering engine or coming to client side as it is? — T J, Jul 07 '16 at 15:34

score 1 · Answer 1 · answered Jul 07 '16 at 15:37

The issue is that template tag for both your AngularJS and NodeJS template engine are same.

One fix is to change the AngularJS template tag to some something other than {{. You can do it by config.
Or change the template tag of the NodeJS template engine to something other than {{

Or for a quick fix you can move following code to a separate html and include it using ng-include.

<div ng-controller="wallPosts">
   <div ng-repeat="post in posts">
      <p>{{ post.title }}</p>
   </div>
<div>

Thanks for the input mate. I went for the first option using the below config: $interpolateProvider.startSymbol('{['); $interpolateProvider.endSymbol('}]'); — Sean, Jul 13 '16 at 16:16

score 1 · Accepted Answer · edited May 23 '17 at 12:32

1

Use something like this {[]} as either your server-side template syntax or your client-side (Angular) template syntax. Shouldn't matter which one you set. If you choose client-side, set it within the Angular config injecting in the $interpolateProvider. See the Angular docs for more info.

Also I think this is a possible dup...

edited May 23 '17 at 12:32

Community

1
1

answered Jul 07 '16 at 15:40

wpcarro

1,528
10
13

My template engine is messing with Angular

2 Answers2