Jade 无法处理 Angular 路由答案

【问题标题】：Jade not working on Angular RoutingJade 无法处理 Angular 路由
【发布时间】：2015-10-27 05:56:51
【问题描述】：

我正在使用 expressjs 作为 webserver 以及玉。我正在使用 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 p.搜索 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 span total customers 2

【问题讨论】：

你的意思是你的customer.jade没有渲染？

标签： angularjs node.js express pug

【解决方案1】：

您不能在客户端呈现 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 :'/'});

  });

【讨论】：

如果我有任何其他角度路线，那么是否也必须在 express 中定义 then ？
没有。如果调用localhost:3030/template/anotherTemplate.jade 'anotherTemplate.jade' 存储在req.params.name 那么最后一个URL参数基本上是一个变量。

【解决方案2】：

Jade 模板必须由服务器渲染然后发送到客户端。我相信除非您向服务器发出请求，否则角度路由只会采用静态 html 文件。

【讨论】：