Jade 未在 Angular 路由上工作

Question

我将 expressjs 与 jade 一起用于网络服务器。我正在使用 angularjs 进行客户端路由，但我的 UI 不是我所期望的这是我的代码和输出

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);


}());

不显示文本输出还显示 div 、 h1 等标签输出

订单 div.container 第搜索table.table.table-hover.table-bordered tr th(ng-click="dosort('name')") name th(ng-click="dosort('city')") city th(ng-click="dosort('cost')") 成本 th(ng-click="dosort('date')") 日期 tr(ng-repeat='cust in customers | filter:cusfil | orderBy:sortby:reverse') td td td td 跨度客户总数 2

Answer 1

Jade 模板必须由服务器呈现然后发送到客户端。我相信 angular 路由只会获取静态 html 文件，除非您向服务器发出请求。

Answer 2

您无法在客户端呈现 Jade 模板。服务器需要渲染它们。

所以你可以添加一个路由到你的快速服务器，它呈现模板。

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

以上代码部分呈现代码，然后编辑您的 AngularJS 路由以访问此 URL。

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

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

  });

Jade 未在 Angular 路由上工作

Jade not working on Angular Routing

node.js

express

angularjs

pug