Question

我正在尝试在ExpressJS服务器上实现路由功能。

http://localhost:3000/app/sub_one
http://localhost:3000/app/sub_two

不幸的是，我能够在应用程序名称和模块之间使用#前缀。我一直在寻找解决方案，似乎这个代码会在我的角度配置中进行 - $locationProvider.html5Mode(true);。

但实现并调整链接后，访问以下链接会返回异常行为。

http://localhost:3000/app/sub_one => Cannot GET /app/sub_one
http://localhost:3000/app/sub_two => Cannot GET /app/sub_two

我可能有直觉认为问题是我server.js上的路由。

var port = 3000;
var express = require("express");
var morgan = require("morgan");
var server = express();

server.use(morgan("tiny"));
server.use("/app", express.static(__dirname + "/app"));
server.use("/bower_components", express.static(__dirname + "/bower_components"));
server.listen(port, function() {
    console.log("Node server initialized. Server's port: " + port);
});

我已在Bitbucket

上为此问题设置了存储库

Answer 1

我可能错了，但似乎您可能会将客户端路由与服务器端路由混淆。

通过ngRouter定义的路由根本不应该命中服务器。

我修改了你的代码以使它工作。它应该足以让你自己去 - 如果你有任何问题，请给我一个大喊。

Forked repo with below changes.

更改后的文件：

config.js

var angular = angular.module("NodeAngularJSRouting", ["ngRoute"]);

angular.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when("/app/sub_one", {
            templateUrl: "/view/sub_view_one/list.html",
            controller: "SubViewOneCtrl" })
        .when("/app/sub_two", {
            templateUrl: "/view/sub_view_two/list.html" })
        .otherwise({
            templateUrl: "/view/default/default.html",
            controller: "DefaultCtrl" });

    $locationProvider.html5Mode(true);
});

server.js

var port = 3000;
var express = require("express");
var morgan = require("morgan");
var server = express();

server.use(morgan("tiny"));

// serve bower components statically
server.use("/bower_components", express.static(__dirname + "/bower_components"));

// for all routes defined on client side send
// entry point to the app
// btw. changes of those routes on client side
// are not supposed to hit server at all (!)
server.use("/app*", function(req, res, next){
    res.sendFile(__dirname + '/app/main.html');
});

// for all public requests try to use /app folder
server.use("/", express.static(__dirname + "/app"));

server.listen(port, function() {
    console.log("Node server initialized. Server's port: " + port);
});

的index.html

重命名为main.html

<!DOCTYPE html>
<html ng-app="NodeAngularJSRouting" >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1">
        <title>Node AngularJS Routing</title>

        <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
        <link rel="stylesheet" href="/view/css/styles.css">
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="/app">Node AngularJS Route</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/app/sub_one">View One</a></li>
                        <li><a href="/app/sub_two">View Two</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>

        <div class="container" ng-view></div>

        <script src="/bower_components/jquery/dist/jquery.js"></script>
        <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
        <script src="/bower_components/angular/angular.js"></script>
        <script src="/bower_components/angular-route/angular-route.js"></script>
        <script src="/config/config.js"></script>
        <script src="/controller/default-default.js"></script>
        <script src="/controller/sub-one_list.js"></script>
    </body>
</html>

ExpressJS与AngularJS Routing配对，没有链接上的＃标签

1 个答案:

config.js

server.js

的index.html