Jade not working on Angular Routing

Question

I am using expressjs for webserver , along with jade. i am doing client side routing using angularjs but my UI is not what I expected here is my code and output

var express = require('express');
var morgan = require('morgan');
var app = express();

app.use(express.static(__dirname + '/public'));
app.use(morgan('dev'));
app.set('view engine', 'jade');



app.get('/', function (req, res) {

res.render("layout.jade");

});

app.listen(3030);

layout.jade

doctype html
html(ng-app="myapporder")
head
    title my orders app
    include scripts.jade
body
    block body
        h1 orders
            div(ng-view)

angapp.js

(function(){

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

app.config(function($routeProvider){

    $routeProvider
        .when('/' , {
            controller : 'customerController' ,
            templateUrl : 'customer'

        })
        .otherwise({ redirectTo :'/'});

  });



  }());

customer.jade

div.container
    p.
        Search <input type='text' ng-model='cusfil'></input> 
    table.table.table-hover.table-bordered
        tr
            th(ng-click="dosort('name')") name
            th(ng-click="dosort('city')") city
            th(ng-click="dosort('cost')") cost
            th(ng-click="dosort('date')") date
        tr(ng-repeat='cust in customers | filter:cusfil | orderBy:sortby:reverse')
            td {{ cust.name}}
            td {{ cust.city}}
            td {{ cust.cost | currency}}
            td {{ cust.date}}
    span total customers {{customers.length}}

customercontroller.js

(function(){


var CustControl = function ($scope){

    $scope.customers=[{name:'tina' , city:'yina' , cost :4.9987 , date:'200-12-11'} , 
    {name:'yina' , city:'yina' , cost :3.44 , date:'200-12-11'}];
    $scope.dosort = function(idw){
        $scope.sortby = idw;
        $scope.reverse = !$scope.reverse;
    };

}

angular.module('myapporder').controller('customerController' , CustControl);


}());

instead of showing the text output also shows div , h1 etc. tags output

orders div.container p. Search table.table.table-hover.table-bordered tr th(ng-click="dosort('name')") name th(ng-click="dosort('city')") city th(ng-click="dosort('cost')") cost th(ng-click="dosort('date')") date tr(ng-repeat='cust in customers | filter:cusfil | orderBy:sortby:reverse') td td td td span total customers 2

Jannis Lehmann Jannis Lehmann · Accepted Answer · 2015-08-04T17:57:43

You can't render Jade templates on the client side. The server needs to render them.

So youc could add a route to your express server, which renders the template.

app.get('/template/:name', function(req, server) {
  var name = req.params.name;
    server.render('templates/' + name);
});

The above code part renders the code and then edit your AngularJS route to access this URL.

$routeProvider
        .when('/' , {
            controller : 'customerController' ,
            templateUrl : 'template/customer.jade'

        })
        .otherwise({ redirectTo :'/'});

  });

Jade not working on Angular Routing

2 Answers