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 p。搜索table.table.table-hover.table-bordered tr th（ng-click =＆＃34; dosort（＆＃39; name＆＃39;）＆＃34;）name th（ng-click =＆＃34; dosort（＆＃39; city＆＃39;）＆＃34;）city th（ng-click =＆＃34; dosort（＆＃39; cost＆＃39;）＆＃34;）cost th（ng-click = ＆＃34; dosort（＆＃39; date＆＃39;）＆＃34;）date tr（ng-repeat =＆＃39; cust in customers | filter：cusfil | orderBy：sortby：reverse＆＃39;）td td td td跨越总客户2

Answer 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 :'/'});

  });

Answer 2

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

Jade没有处理Angular Routing

2 个答案: