CODEWITHSUNDEEP
angularjsnode.jsexpressexpress-handlebars
codeinprogress
codeinprogress

Reputation: 3501

Using Angular with Express-Handlebars for a Node.js application

I have a node.js application running Express and express handlebars as the templating framework. I have recently started learning Angular and integrating it in my node.js app.

The only issue is, the markup for express-handlebars and angular is same. Both framework use {{}}. I did some research and found this Stackoverflow question: Using Express Handlebars and Angular JS

The accepted answer suggests changing the markup symbols using the interpolateProvider. I implemented this and it does not work for me (I have commented under that answer).

My code looks like this:

main.handlebars

<!DOCTYPE html>
<html ng-app="myapp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>GETTING STARTED WITH Angular</title>
        <meta name="description" content="An interactive getting started guide for Brackets.">
        <link rel="stylesheet" href="/css/style.css"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
        <script>
            var app = angular.module("myApp", []);
            app.config(function($interpolateProvider) {
                $interpolateProvider.startSymbol('//');
                $interpolateProvider.endSymbol('//');
            });


            app.controller('DemoController', function() {
                this.label = "This binding is brought you by // interpolation symbols.";
            });
        </script>
    </head>
    <body>
        {{{body}}}

        <input ng-model="name">
        <h3>Hi, //name// how are you doing</h3>

        <div ng-controller="DemoController as demo">
            //demo.label//
        </div>
    </body>
</html>

The above code is from the main.handlebars layout file. I even tried to put that code in the actual view but it did not work. What am I missing?

Thanks.

Upvotes: 1

Views: 868

Answers (1)

Sasang
Sasang

Reputation: 1281

This issue is occurring because of an incorrect app name reference or a simple typo. Change ng-app="myapp" to ng-app="myApp".

Upvotes: 2

Related Questions