ExpressJS 和 Angular 1 路由答案

【问题标题】：ExpressJS and Angular 1 routingExpressJS 和 Angular 1 路由
【发布时间】：2017-08-27 17:45:03
【问题描述】：

我正在尝试使用 Express 为我的页面前端创建 API 和 Angular，但我无法正确路由我的页面。有人可以看到我的代码并告诉我我遗漏了什么或做错了什么吗？我得到的错误是 404 每次我去尝试去 /about 它似乎默认为 index.html 这是我的代码：

//SERVER.JS

var express = require("express");
var app = express();
var PORT = process.env.PORT || 3001;
var path = require('path');
var router = express.Router();

app.use(express.static(__dirname + '/public'));

app.listen(PORT, function () {
    console.log("Server running in PORT " + PORT);
});

//MAIN.JS

var myApp = angular.module('myApp', ['ngRoute']);

console.log("in myApp module");


myApp.config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) {

    console.log("in app.config")

$routeProvider
    .when('/',{
       templateUrl:'../index.html',
    })
    .when('about',{
        templateUrl:"<h1>Banana</h1><p>Bananas contain around 75% water.</p>",
        controller:'AboutController'
    });



    console.log('after provider');
$locationProvider.html5Mode(true);

}]);

<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Morand Transportation</title>
    <link href="css/reset.css" rel="stylesheet">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
    <script src="./lib/angular/angular.min.js"></script>
    <script src="./controllers/main.js"></script>
    <script src="./lib/angular/angular-route-min.js"></script>
    <script src="./controllers/AboutController.js"></script>

    <link href="css/style.css" rel="stylesheet">

</head>


<body ng-app="myApp">
<div class="wrapper">
        <nav  class="navbar navbar-default navbar-custom navbar-fixed-top">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                    </button>
                    <a class="navbar-brand page-scroll" href="#page-top">Home</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="hidden">
                            <a href="#page-top"></a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#services">Services</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#about">About</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#team">Team</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>


        <div class="top-banner">

            <!-- Navigation -->


            <div class="container">
                <div class="row">
                    <div class="col-md-12 text-center" id="title">
                        <span id="title-first">Morand</span> <span id="title-second">Trasnportation</span>
                        <!--<img src="images/morandLogo.png" class="img-responsive">-->
                        <hr>
                    </div>

                </div>
            </div>
        </div>

    <div ng-view></div>

    <div class="push"></div>
</div><!--End of Wrapper-->


<div id="footer-bar">

    <center>footer</center>
</div>

</body>

<script
        src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>




<script src="./lib/bootstrap/js/bootstrap.js"></script>



</html>

【问题讨论】：

显示你的控制器。
你不应该使用'/about'而不是'about'吗？

标签： html angularjs express

【解决方案1】：

你可能犯了两个错误：

.when('/about',{ //should have a slash     
    templateUrl:"<h1>Banana</h1><p>Bananas contain around 75% water.</p>", 
    // this is not a templateUrl
    controller:'AboutController'
});

应该是这样的：

template:"<h1>Banana</h1><p>Bananas contain around 75% water.</p>",

我还建议使用这个很棒的ui-router 带角度的路由器；）

【讨论】：

谢谢！我做错了几件事，但我也转向了 ui-router。爱它！我只需要使用 express app.get 将我的路径指向“/”，然后使用 ui-router 进行路由
@Carl.G 很高兴你喜欢它！快乐编码:)