Question

我试图使用Express为我的页面的前端创建API和Angular，但我无法正确路由我的页面。谁能看到我的代码并告诉我我错过了什么或做错了什么？我得到的错误是每次我试图去/关于它似乎它默认为index.html 这是我的代码：

＆＃13;

//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);
});

＆＃13;

//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);

}]);

＆＃13;

<!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>

＆＃13;

Answer 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路由器与angular;）

ExpressJS和Angular 1路由

1 个答案: