안녕하세요 저는 새로운 프로젝트의 시작 단계에 있습니다.익스프레스 라우팅 HTML5 스타일 캐치 모든 문제 없음 HASHBangs - Angular JS, Yeoman
프론트 엔드, 앵귤러 js 작업을 위해 필자는 현대적인 워크 플로 도구를 사용하려고합니다.
express를 사용하여 node.js로 작성된 백엔드. 나는 서버 상에 어떤 HTML도 생성하고 싶지 않다. 클라이언트에게 정적으로 제공 될 것이고, 익스프레션으로 작성된 RESTful 서비스를 통해 액세스 할 수 있으며, 각도 js 애플리케이션의 마법이 동적 컨텐츠를 생성 할 것이다. 앱은 한 페이지로 구성됩니다. 그것의 1 페이지로 전망을위한 포괄적 인 규칙 일 필요가있을 것입니다.
app.js
public < dir containing the static html, js, css etc.
index.html
scripts
styles
views
나는 대부분의 사람들이 HTML 서버 측 렌더링 후 추가 콘텐츠를 제공하기 위해 각도 또는 어떤 프레임 워크를 가지고 있음을 발견했다 :
은 현재 내가의 전형적인 구조를 가지고있다. 사람들은 일반적으로 콘텐츠를 제공하기 위해 서버에서 jade 템플릿을 사용합니다. 모든 콘텐츠가 매우 역동적 일 수 있으므로 필요하지 않습니다.Yeoman의 워크 플로가 너무 간단하고 강력합니다. 방해하지 않으려 고합니다. 새로운 경로를 추가 할 때 많은 이유 때문에 yeoman은 js 참조를 index.html의 맨 아래에 추가합니다. 템플리트가 다른 구문으로 사용되기 때문에 yeoman을 사용할 수 없습니다.
나는 또한이 아키텍처에서 우려의 분리를 좋아한다. 빠른 설치는 주로 RESTful 서비스에 중점을두고 프레젠테이션을 제어 할 수 없으며/public 폴더는 express.static (PATH)을 사용하여 제공되는 프레젠테이션을 제공합니다.
나는 행복하게 사용할 수 있지만 라우팅을 위해 hashbangs하지만 그다지 html5 푸시 스테이트에 대한 사소한.
내 문제는 모두를 잡아서 라우팅에 있습니다. 내가 아는 문제는/api 리소스 url 아래 있지 않은 모든 트래픽을 효과적으로 리디렉션하는 것입니다. index.html로 대체되는 자산을 중단시키지 않습니다.
app.get(url('/person/lesson/:id'), api.getLesson);
app.all('*', routes.index);
이 나는 시도했다 :
routes.index = function(req,res){
res.sendfile('./public/dist/index.html');
};
routes.index = function(req,res){
res.redirect('/');
};
안녕하세요. 저는이 작업을 원칙적으로 index.html에서 사용할 수 있지만 공용 폴더의 다른 파일에서는 작동하지 않습니다. –
요청한 파일이 공용 폴더에 있는지 확인해야합니다. 'app.use (표현.정적 (__ dirname + '/ client/public')); ' – ehsangh
http://expressjs.com/starter/static-files.html –