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

【问题标题】：Angular app - why can my files / directives and the css file not be found?Angular 应用程序 - 为什么找不到我的文件/指令和 css 文件？
【发布时间】：2017-01-07 21:15:18
【问题描述】：

我正在构建一个有角度的应用程序，但无论我做什么，我的路由似乎都是错误的。无法像 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);
});

'使用严格';

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

【问题讨论】：

标签： angularjs node.js url-routing

【解决方案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 文件

【讨论】：

谢谢！那么导航栏指令呢？我尝试了 navbar/navbar.js 或 navbar.js，但两者都是错误的，要么找不到（当我执行 navbar.js 时），要么在执行 navbar/navbar.js 时出现编译错误
文件似乎被命名为 navbar.html 所以 templateUrl 引用应该是：templateUrl: 'navbar/navbar.html'
好的，谢谢。如果我的 index.html 文件与我的导航栏不在同一个文件夹中，那么路径是否必须是 js/navbar/navbar.js ？
与您在 express 中配置路由的方式一样，您的 index.html 文件在服务器目录结构中的位置并不重要。您需要意识到，通过 express.static() 和 app.get() 调用，您正在定义一个虚拟 url 结构，其中索引将在根 ('/') 中找到，js 和 css 文件将在以下路由下找到将本地“../public”和“../css”文件夹也安装到“/”上的结果