각도 응용 프로그램 - 내 파일/지시문 및 CSS 파일을 찾을 수없는 이유는 무엇입니까?

모서리가있는 앱을 만들지 만 내 경로가 잘못되어도 문제가없는 것 같습니다. 내 탐색 바 지시문을 CSS 파일과 같이 찾을 수 없습니다. 필자는 여러 가지 다른 게시물 등을보고 있었지만 아직도 어떤 일이 잘못되었는지 알지 못합니다. 도움이 될 것입니다!각도 응용 프로그램 - 내 파일/지시문 및 CSS 파일을 찾을 수없는 이유는 무엇입니까?

프로젝트 1/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>

프로젝트 1가/서버/

'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.js; 사진과 함께

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

프로젝트 1/JS/네비게이션 바/navbar.html

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

폴더 : HTML 파일에서

project1/public/css/style.css

출처

2017-01-07 javascripting

경로 당신이에 선언 정적 루트를 기준으로해야한다 express.static() configuration

당신의 CSS 파일이 projec1/public/css/style.css 당신이

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

사용하여 정적 루트를 구성 그런 다음 HTML은

출처

2017-01-07 22:32:37 tato

감사합니다 JS 파일에

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

같은 적용을 가리켜 야! 그리고 navbar 지시어는 어떨까요? 나는 navbar/navbar.js 또는 navbar.js를 시도했지만 둘 다 잘못되어 navbar/navbar.js를 수행 할 때 컴파일 오류가 발생하는 경우 (navbar.js를 사용하는 경우) 또는 찾을 수 없습니다. – javascripting

파일은 다음과 같습니다. navbar.html이라는 이름이어야합니다. 따라서 templateUrl 참조는 다음과 같아야합니다.'templateUrl : 'navbar/navbar.html'' – tato

감사합니다. 내 index.html 파일이 내 navbar와 같은 폴더에 없으면 경로는 js/navbar/navbar.js 여야합니까? – javascripting

각도 응용 프로그램 - 내 파일/지시문 및 CSS 파일을 찾을 수없는 이유는 무엇입니까?

답변

관련 문제