2015-03-02 57 views
0

我正在製作一個教程,用於使用MEAN堆棧構建單頁應用程序。我已成功渲染到index.jade視圖。但是,當我嘗試列出部分視圖的路由時,頁面的DOM不會呈現視圖。也許這將是明確的代碼無法在MEAN中路由到部分視圖應用程序

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路由如何協同工作。

回答

0
---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的情況下也快速線路將直接工作

相關問題