- 얻을 수/템플릿

Question

내가 표현하는 새로운 그리고 난 내가 옥을 사용할 수있는 하나에이 프로젝트를

https://github.com/shawn-simon-developer/NodeAngularProxyhttps://github.com/shawn-simon-developer/NodeAngularProxy 를 변환 할 노력하고있어. npm을 통해 Jade를 설치했습니다. 내 폴더 구조는 다음과 같습니다

myProject 
--app 
----css (inside e.g. bootstrap) 
----index.jade 
----js 
------controllers 
------services 
----libs 
----templates 
------main.jade 
--index.js 
--node_modules 
----(tons of modules in here e.g.) 
----jade 
----sass 
----express 
--package.json 

하는 index.js은 다음과 같습니다

/** 
* Module dependencies. 
*/ 
var express = require('express'); 
var jade = require('jade'); 
var httpProxy = require('http-proxy'); 
var bodyParser = require('body-parser'); 

var apiForwardingUrl = 'http://api.open-notify.org/astros.json?'; 

// Solution for forwarding from http to https taken from: 
// http://stackoverflow.com/questions/15801014/how-to-use-node-http-proxy-for-http-to-https-routing 
var proxyOptions = { 
    changeOrigin: true 
}; 

httpProxy.prototype.onError = function (err) { 
    console.log(err); 
}; 

var apiProxy = httpProxy.createProxyServer(proxyOptions); 

console.log('Forwarding API requests to ' + apiForwardingUrl); 

// Node express server setup. 
var server = express(); 
server.set('port', 3000); 
server.use(express.static(__dirname + '/app')); 

server.all("/space/*", function(req, res) { 
    apiProxy.web(req, res, {target: apiForwardingUrl}); 
}); 

server.use(bodyParser.json()); 
server.use(bodyParser.urlencoded({ 
    extended: true 
})); 

// Start Server. 
server.listen(server.get('port'), function() { 
    console.log('Express server listening on port ' + server.get('port')); 
}); 


server.set('view engine', 'jade'); // register the template engine 

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

를 그리고이

html 
    head 
    title Angular App 
    // Angular Modules 
    script(type='text/javascript', src='libs/angular/angular.js') 
    script(type='text/javascript', src='libs/angular-route/angular-route.js') 
    script(type='text/javascript', src='libs/jquery/jquery.js') 
    // CSS Modules 
    link(rel='stylesheet', type='text/css', href='css/bootstrap/bootstrap.min.css') 
    body(ng-app='app') 
    .container(ng-view='') 
    // JS Modules 
    script(type='text/javascript', src='js/app.js') 
    script(type='text/javascript', src='js/controllers/MainCtrl.js') 
    script(type='text/javascript', src='js/services/apiService.js') 

처럼 index.jade 마지막

을 main.jade

{{ctrl.test}} 

p {{ctrl.wikiData | json}} 

h1 test 

그게 전부입니다. 프로젝트의 루트에 node index.js을 사용하여 서버를 시작할 수 있습니다. 그러나 내가 localhost:3000에 갈 때 Cannot GET / 문제가 발생하며 다른 많은 사람들도이 문제를 겪게됩니다. 그러나, 나는 노드와 익스프레스를 처음 사용하기 때문에 다른 질문에 대한 대답을 일반화하고 내 자신을 풀 수는 없었다. 여기에 무슨 일이 일어나고 있는지 누가 도와 주실 수 있습니까? 이미 감사드립니다!

편집 1 : 내가하는 index.js의 끝에

server.set('views', __dirname + '/app/templates'); 
server.get('/', function (req, res) { res.render('index', {}); }); 
server.get('/', function (req, res) { 
    res.send('hello'); 
}); 

을 추가하고 템플릿 폴더 안에 index.jade 파일을 옮겼습니다. 한 걸음 더 나아가이다

angular.js:10506 GET http://localhost:3000/templates/main 404 (Not Found) 

하지만 당신은 localhost를 지정하면 안됩니다 솔루션 아직

Answer 1

: 이제 어떻게 내가 갖는 것은이 같은 콘솔에 로그입니다. 대신 로컬 호스트를 가리 : 3000

http://localhoat:3000 

대답 주요 질문

에 내가 인덱스 라우터를 찾을 수 없습니다! 이런 식으로 인덱스 라우터를 추가 할 수 있습니까? 2 편집

에

server.get('/', function (req, res) { 
    res.send('hello'); 
}); 

답변 기능을 res.render하는 매개 변수에서 템플릿을 제거합니다. 템플릿에서

var express = require('express'); 
var jade = require('jade'); 
var server = express(); 
... 
server.use(express.static(__dirname + '/public')); 
server.set('view engine', 'jade'); 
server.set('views', __dirname + '/templates'); 
... 
server.get('/', function (req, res) { 
    res.render('index', {}); 
}); 

server.get('/:page', function (req, res) { 
    res.render(req.params.name, {caption: 'Example', text: 'Hello world'}); 
}); 

는, 예를 들어 layout을 사용하여 아래와 같이

server.get('/templates/:name', function (req, res){ 
    var name = req.params.name; 
    res.render(name); 
}); 

Answer 2

한번에 변경 파일

/public [rename app to www, static, pub] 
    /css 
    /js 
    /libs 
/node_modules 
/templates [jade is server-side, so don't share it for browsers] 
    /layout 
     index.jade 
    index.jade 
    main.jade 
index.js 
package.json 

에 대한 구조와 코드

// templates/layout/index.jade 
html 
    head 
    title Angular App 
    script(...) 
    link(...) 
    body(ng-app='app') 
    .container(ng-view='') 
    block content 

// templates/index.jade` 
extends ./layout/index.jade 
block content 
    IndexPage 

// templates/layout/main.jade` 
extends ./layout/index.jade 
block content 
    h1 {{caption}} 
    {{text}} 

P.Jade은 서버 쪽 렌더링 엔진이고 angular은 클라이언트 쪽입니다. 종종 그 중 하나가 충분합니다.