2016-05-10 7 views
2

M.E.A.Nスタックを使用してビルドおよびアプリケーションを作成しています。NodeJSサーバーパーシャルを取得するときに505/404エラーが返される

ルーティング用にAngular Ui Routerを使用していますが、正しくルーティングするために部分的な問題が発生しているようです。

メインビューへのリンクが正常に使用して呼び出されます。

.state("framework", { 
     url:"/genetic", 
     templateUrl: "/partials/framework/main.html", 
     css: "/stylesheets/genetic/global/main.css" 
}) 

しかし、私は、私は 「505内部サーバーエラー」に直面しています同じ形式を使用して、部分的に呼び出そうとします。

.state(framework.buttons", { 
     url:"/framework/buttons", 
     templateUrl: "/partials/framework/buttons.html", 
     css: "/stylesheets/framework/global/main.css" 
}) 

Iは(main.htmlと)への相対パスを設定しようとしたが、エラーを受信した: "見つかりません404"。

.state("framework.buttons", { 
     url:"/framework/buttons", 
     templateUrl: "buttons.html", 
     css: "/stylesheets/framework/global/main.css" 
}) 

アプリケーション構造:

+--public 
+--routes 
    +--index.js 
    +--users.js 
+--views 
| +--partials 
| | +--admin 
| | +--framework 
| | | +--app 
| | | | +--footer.jade 
| | | | +--navigation-list.jade 
| | | | +--app.jade 
| | | +--buttons 
| | | | +--default 
| | | | +--disabled 
| | | | +--document-overview 
| | | | +--fluid 
| | | | +--group-default 
| | | | +--group-vertical 
| | | | +--icon 
| | | | +--sizing 
| | | | +--buttons.jade 
| | | +--forms 
| | | +--buttons.html 
| | | +--main.html 
| | +--tour 
| | +--user 
| +--error.jade 
| +--index.jade 
| +--index.html 
| +--layout.jade 
+--app.js 
+--Gruntfile.js 
+--package.json 

app.js

var express = require('express'); 
var path = require('path'); 
var favicon = require('serve-favicon'); 
var logger = require('morgan'); 
var cookieParser = require('cookie-parser'); 
var bodyParser = require('body-parser'); 

var routes = require('./routes/index'); 
var users = require('./routes/users'); 

var app = express(); 

// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.engine('html', require('jade').renderFile); 
app.set('view engine', 'jade'); 

// uncomment after placing your favicon in /public 
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); 
app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(cookieParser()); 
app.use(express.static(path.join(__dirname, 'public'))); 

app.use('/', routes); 
app.use('/users', users); 

// catch 404 and forward to error handler 
app.use(function(req, res, next) { 
    var err = new Error('Not Found'); 
    err.status = 404; 
    next(err); 
}); 

// error handlers 

// development error handler 
// will print stacktrace 
if (app.get('env') === 'development') { 
    app.use(function(err, req, res, next) { 
    res.status(err.status || 500); 
    res.render('error', { 
     message: err.message, 
     error: err 
    }); 
    }); 
} 

// production error handler 
// no stacktraces leaked to user 
app.use(function(err, req, res, next) { 
    res.status(err.status || 500); 
    res.render('error', { 
    message: err.message, 
    error: {} 
    }); 
}); 


module.exports = app; 

Index.js

var express = require('express'); 
var router = express.Router(); 

/* GET home page. */ 
router.get('/', function(req, res, next) { 
    res.render('index.html', { title: 'Home' }); 
}); 

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

router.get('/partials/framework/:name', function(req, server) { 
    var name = req.params.name; server.render('partials/genetic/' + name); 
}); 

router.get('/partials/tour/:name', function(req, server) { 
    var name = req.params.name; server.render('partials/tour/' + name); 
}); 

module.exports = router; 

角度Uiをルーティング

var app = angular.module('app', [ 
    'ui.router', 
    'door3.css', 
    'appControllers' 
]); 

app.config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise("/framework"); 
    // 
    // Now set up the states 
    $stateProvider 
    .state("framework", { 
     url:"/framework", 
     templateUrl: "/partials/framework/main.html", 
     css: "/stylesheets/framework/global/main.css" 
    }) 
    .state("framework.buttons", { 
     url: "/buttons", 
     templateUrl: "/partials/framework/buttons.html", 
     css: ["stylesheets/framework/buttons/main.css", "/stylesheets/genetic/global/main.css"] 
}) 

}]); 

ジェイド:だけでなく、アプリケーションの構造buttons.htmlに応じ

include navigation-list 
main 
    nav.group.bar 
     ul.breadcrumb.col.collapse.large-6-12 
      li 
       a(href="#") Getting Started 
      li 
       a(href="#") Buttons 
    div(ui-view class="appview" id='appview') 

答えて

0

は内部のボタンフォルダです。

現在、私はいずれかを発見していない知っている、私が思うあなたのtemplateUrl

templateUrl: "/partials/framework/buttons.html", 

ですが、アプリケーション構造に従ってそれはこれが動作するはず

templateUrl: "/partials/framework/buttons/buttons.html", 

する必要があります他の理由はまだNOT部分図を読み込んでいます。 "404 Not Found"部分がフレームワークフォルダ内にあり、その内部のサブフォルダではない場合。

+0

ボタンの内側に「ボタン、翡翠」が表示されていると思います。これを "main.html"と同じレベルの "buttons.html"にコンパイルします。私は可読性のために不要な情報を削除しましたが、アプリケーション構造を変更していません。 – Toussaint

関連する問題