Question

我正在做一个使用MEAN堆栈构建单页应用程序的教程。我已成功渲染到index.jade视图。但是，当我尝试列出到部分视图的路由时，页面的DOM不会呈现视图。也许用代码

可以清楚这一点

server.js

var express = require("express");
var stylus = require("stylus");
var logger = require("morgan");
var bodyParser = require('body-parser');


var env = process.env.NODE_ENV = process.env.NODE_ENV || "development";

var app = express();

function compile(str, path) {                       
    return stylus(str).set('filename', path);       
}

app.set('views', __dirname + '/server/views');  

app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(bodyParser());

app.use(stylus.middleware ({
    src: __dirname + "/public",
    compile: compile
}
));
app.use(express.static(__dirname, 'public'));   

app.get('/partials/:partialPath', function (req, res) {
    res.render('partials/'+ req.params.partialPath);
})



app.get('*', function (req, res) {    
    res.render('index');                
});                             


var port = 3030;
app.listen(port);
console.log("Listening on port number " + port);

layout.jade

doctype

html
    head
        link(href="/favicon.ico", rel="shortcut icon", type="image/x-icon")
        link(rel="stylesheet", href="/css/bootstrap.css")
        link(rel="stylesheet", href="/vendor/toastr/toastr.css")
        link(rel="stylesheet", href="/css/site.css")

    body(ng-app='app')
        h1 Layout
        block content
    include scripts

index.jade

extends ../includes/layout

block content

    section.content
        div(ng-view)
        h2 index.jade

app.js

angular.module("app", ["ngResource", "ngRoute"]); 

angular.module('app').config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/', {
            templateUrl: '/partials/main',
            controller: 'mainCtrl'
        })
});

angular.module('app').controller('mainCtrl', function ($scope) {
    $scope.myVar = "Hello Anglularz";
});

main.jade

extends ../../includes/layout

block content

    section.partial
    h1 This is a partial
    h2 {{ myVar }}

不知道出了什么问题。我怀疑问题出在路由上。另外，如果可能，请解释templateUrl和app.get路由如何协同工作。

Answer 1

---write routes for partials also in express

---call that routes inside angular controller and bind that values into scope variables

---use ng-include="" in DOM and call that partial views

在templateUrl的情况下，也表示路线将直接工作

无法路由到MEAN应用程序中的部分视图

1 个答案: