Display {{ }} Jade-Angular-React-Vue

Question

I'm trying to add {{}} for angular {{}} to Jade. In html you do this

 <p>{{ whatever  }}</p>

In jade, my understanding was:

p  {{ whatever }}

But it is not working. Any insight on how to add the double curly brackets to Jade so it display the information from Angular (react or vue, they all work the same way)

I tried

p {{ }}

p
  |{{ }}

p
= {{ }}

Any Jade ninja out there?

Answer 1

In "jade": "1.9.2", if you have following in JS:

res.render('blog_edit', {title: 'edit your blog', posts: "something"});

In template, you can use either of follwing:

#{locals.posts}

or

#{posts}

Answer 2

First thing to check,

1. did you specified ng-controller? if not, you should.

   body(ng-app="myApp" ng-controller="MainCtrl as main")

2. does your controller has that value? if not, you can create test code.

   $scope.test = "test"
p {{ test }}

3. did you include angular.js?

   script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js")

4. did you correctly create angular app?

   var app = angular.module('myApp'); app.controller('MainCtrl', function($scope){ $scope.test = "test"; }

5. did you include your angluar app?

   script(src="javascripts/myApp.js")

6. {{ }} should not have space between { and {.

If you still have a problem let me know.

Answer 3

Reference your vue files in jade (in express app, layout.jade) after block contents not inside the body tag:

body
//not here
block content
script(src="./javascripts/vueapp.js")

Answer 4

There is an alternative. Just put ng-bind, like this:

div(ng-app="" ng-init="name=' Rodrigo'")
        p My name is
            span(ng-bind="name")

Jade is no longer Jade hahaha, now it's Pug.js I know we are in 2018, but this is my small contribution