Currently, I am working on building a web server using expressjs and jade for the frontend. I have also implemented client-side routing with angularjs but unfortunately, my UI is not displaying as expected. Below you can find my code and the unexpected output that I am getting:
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);
}());
The issue I am facing is that instead of displaying the expected text output, it is also showing HTML tags like div, h1, etc.