使Angular路线与Express路线配合使用 [英] Making Angular routes work with Express routes

问题描述

我在设置Angular路线以使用Express时陷入僵局.

I've got in impasse with setting Angular routes to work with Express.

我试图在这里 Express 4，NodeJS，AngularJS路由不工作.每次网址更改时，静态index.html都会投放，但Angular不会捕获部分网址.

I tried to do like here Express 4, NodeJS, AngularJS routing but that did not work. The static index.html serves each time the url changes, but the Angular does not catch the partial.

在Express中，我有以下代码:

In my Express I have the following code:

var express = require("express");
var app = express();
app.use(express.static(__dirname + '/app'));
app.use("*",function(req,res){
    res.sendFile(path.join(__dirname,"app/index.html"));
});
app.listen(1337, function(){
    console.log("Server is listening on port 1337");
});

在Angular应用中，我有以下内容:

And in my Angular app, I have the following:

var app = angular.module("myapp",["ngRoute","appControllers"]);

    app.config(["$routeProvider","$locationProvider",function($routeProvider,$locationProvider){
            $locationProvider.html5Mode(true);
            $routeProvider
                    .when("/list",{
                        templateUrl: "/partials/users.html",
                        controller: "userListCntr"
            })
                    .when("/edit", {
                        templateUrl: "/partials/edit.html",
                        controller: "userEditCntr"
            })
                    .when("/register", {
                        templateUrl: "/partials/register.html",
                        controller: "registerCntr"
            })
                    .when("/login", {
                        templateUrl: "/partials/login.html",
                        controller: "registerCntr"
            });

    }]);

我的浏览器控制台没有任何错误. html检查器显示: <!-- ngView: -->，因此该指令已初始化.

I don't have any errors in my browser console. The html inspector shows: <!-- ngView: --> so the directive is kind of initialized.

和依赖项列表:

dependencies": {
    "angular": "1.3.x",
    "angular-mocks": "1.3.x",
    "jquery": "1.10.2",
    "bootstrap": "~3.1.1",
    "angular-route": "1.3.x",
    "angular-resource": "1.3.x",
    "angular-animate": "1.3.x"
  }

这是我的文件结构:

--app (angular app)
   --components
   --js
   --css
   --img
   --assets
   --partials
   --index.html
--node-modules
--server.js (here express settigs are)

此外，我进行了如下更改以说明所有静态资源，但仍然无法正常工作:

ALso, I made changes as follows to account for all static resources, but still does not work:

app.use(express.static(__dirname+ "/app"));
app.use('/js', express.static(__dirname + '/app/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/app/css'));
app.use('/assets', express.static(__dirname + '/app/assets'));
app.use('/components', express.static(__dirname + '/app/components'));
app.use('/img', express.static(__dirname + '/app/img'));
app.use('/partials', express.static(__dirname + '/app/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('/app/index.html', { root: __dirname });
});

请帮忙，因为我找不到解决方案.谢谢！

Please, help, because I can't find a solution. Thanks!

推荐答案

如果不将路径传递给express.use()，则默认为/.您为*设置的处理规则要么多余，要么甚至不起作用.

When you don't pass a path to express.use(), then it defaults to /. The proceeding rule you set for * is either redundant or may not even work.

此外，由于您使用的是html5mode，因此您需要明确设置与资源分开的路由，以便Express不会尝试为所有请求提供index.html文件.

Also, since you're using html5mode, you need to explicitly set apart routes from resources so Express doesn't try to serve up your index.html file for all requests.

尝试从 查看全文