文章/答案/技术大牛

发布

社区首页 >问答首页 >Angular应用-为什么我的文件/指令和css文件找不到？

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

Stack Overflow用户

提问于 2017-01-08 05:15:18

回答 1查看 572关注 0票数 0

我正在构建一个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);
});

‘使用严格的’；

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

Stack Overflow用户

回答已采纳

发布于 2017-01-08 06:32:38

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文件。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41526637

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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