Angular 应用程序 - 为什么找不到我的文件/指令和 css 文件？

Question

我正在构建一个 angular 应用程序，但无论我做什么，我的路由似乎都是错误的。我的导航栏指令无法像 css 文件一样找到。我一直在看很多不同的帖子等，但我仍然不知道我做错了什么。任何帮助都会很棒！

project1/js/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>page</title>

    <link rel="stylesheet" type="text/css" href="../public/css/style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
    <script type="text/javascript"   src="https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.1/angular-materialize.min.js"></script>

    <script src="app.js"></script>
    <script src="navbar.js"></script>
</head>

<body ng-app="myApp">

    <navbar></navbar>
    <ui-view></ui-view>
</body>

</html>

project1/server/app.js

'use strict'

var express = require('express');
var path = require('path');
var morgan = require('morgan');
var bodyParser = require('body-parser');

var app = express();
module.exports = app;
app.use(express.static(path.join(__dirname, '../public')));
app.use(express.static(path.join(__dirname, '../js')));
app.use(bodyParser.urlencoded({
    extended: false
}));
app.use(bodyParser.json());

app.listen(1337, function() {
    console.log('Server is listening on port 1337!');
});


var validFrontendRoutes = ['/'];
var indexPath = path.join(__dirname, '..', '..', 'public', 'index.html');
validFrontendRoutes.forEach(function(stateRoute) {
    app.get(stateRoute, function(req, res) {
        res.sendFile(indexPath);
    });
});
 app.use(function(err, req, res, next) {
    console.error(err.stack);
    res.status(500).send(err.message);
});

'use strict';

app.directive('navbar', function () {
    return {
        restrict: 'E',
        templateUrl: 'js/navbar/navbar.html'
    }
});

project1/js/navbar/navbar.html

<div class="navbar navbar-static-top navbar-inverse">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
            Hello
            </li>
        </ul>
    </div>
</div>

带图片的文件夹：

project1/public/css/style.css

Answer 1

您的 html 文件中的路径应该相对于您在 express.static() 配置中声明的静态根目录

如果您的 css 文件位于 projec1/public/css/style.css 下然后使用

配置静态根目录

app.use(express.static(path.join(__dirname, '../public')));

那么你的html应该指向

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

同样适用于js文件

Angular 应用程序 - 为什么找不到我的文件/指令和 css 文件？

Angular app - why can my files / directives and the css file not be found?

url-routing

node.js

angularjs