Angular 사용법새 페이지가 요청될 때 JS가 Express(Node.js)를 사용하여 라우팅합니까?

Angular 사용법새 페이지가 요청될 때 JS가 Express(Node.js)를 사용하여 라우팅합니까?

익스프레스를 사용하고 있습니다.각도로 로드하는정적 디렉토리의 JS.보통, 나는 요청한다.http://localhost/익스프레스가 제공하는 서비스입니다.index.html올바른 Angular 파일 등내 Angular 앱에는 이러한 루트가 설정되어 있습니다.이 루트는, 다음의 컨텐츠로 치환됩니다.ng-view:

$routeProvider.when('/', {
    templateUrl: '/partials/main.html',
    controller: MainCtrl,
});

$routeProvider.when('/project/:projectId', {
    templateUrl: '/partials/project.html',
    controller: ProjectCtrl,
});

$locationProvider.html5Mode(true);

내 메인 페이지에 다음 링크가 있습니다.<a href="/project/{{project.id}}">그러면 템플릿이 정상적으로 로드되고 다음 페이지로 이동합니다.http://localhost/project/3또는 제가 지정한 ID를 지정합니다.이 문제는 브라우저에 다음 주소를http://localhost/project/3또는 페이지를 새로 고칩니다.요구는 Express/Node 서버로 전송되며, Express/Node 서버가 반환됩니다.Cannot GET /project/3.

이를 위해 익스프레스 루트를 설정하려면 어떻게 해야 하나요?Angular에서 를 사용해야 할 것 같습니다(단, 검색과 #해시를 사용하는 추악한 것은 피하고 싶지만), 이 문제를 해결하기 위해 Express 루트를 설정하는 방법에 대해서는 잘 모르겠습니다.

감사해요.

express 4에서는 모든 요구를 받아들여 angularjs로 리다이렉트 할 수 있습니다.index.html페이지입니다.app.use(app.router);더 이상 존재하지도 않고res.sendfile는 권장되지 않습니다.대문자 F와 함께 사용합니다.

app.post('/projects/', projectController.createProject);
app.get('/projects/:id', projectController.getProject);
app.get('*', function (req, res) {
    res.sendFile('/public/index.html');
});

모든 경로의 경로 앞에 모든 API 경로를 배치합니다.app.get('*', function (req, res){...})

필요한 데이터를 전송하는 일반 경로를 따라 실행되는 Catch-all 핸들러를 만듭니다.

app = express();
// your normal configuration like `app.use(express.bodyParser());` here
// ...
app.use(app.router);
app.use(function(req, res) {
  // Use res.sendfile, as it streams instead of reading the file into memory.
  res.sendfile(__dirname + '/public/index.html');
});

app.router모든 Express 루트를 실행하는 미들웨어입니다(예:app.get그리고.app.post보통 Express는 이것을 미들웨어 체인의 맨 끝에 자동으로 배치하지만, 여기서와 같이 체인에 명시적으로 추가할 수도 있습니다.

그러면 URL이 처리되지 않는 경우app.router마지막 미들웨어는 Angular HTML 뷰를 클라이언트에 전송합니다.이는 다른 미들웨어에서 처리되지 않는 URL에 대해 발생하므로 Angular 앱은 잘못된 경로를 올바르게 처리해야 합니다.

템플릿 엔진 사용에 관심이 없다는 것을 분명히 했어야 했는데, Angular가 HTML의 모든 부분을 자체적으로 풀링하도록 하면 Node는 완전히 정적 서버로서 기능하고 있습니다(JSON API에는 해당되지 않습니다).Brian Ford가 Jade를 사용하여 하는 방법을 소개합니다.http://briantford.com/blog/angular-express.html

제 앱은 한 페이지 앱이기 때문에 가능한 URL 패턴별로 익스프레스 루트를 작성했습니다만, 각각 같은 처리를 하고 있습니다.

fs.readFile(__dirname + '/public/index.html', 'utf8', function(err, content) {
    res.send(content);
});

요청 변수를 Angular에게 전달해야 한다고 생각했지만 Angular가 자동으로 처리하는 것 같습니다.

언급URL : https://stackoverflow.com/questions/13222252/how-to-use-angularjs-routes-with-express-node-js-when-a-new-page-is-requested