我在使用NodeJS作为服务器在AngularJS客户端应用上渲染CSS时遇到问题。 下面的完整代码是完整的SPA（单页面应用程序），它们是可编译的。
/*nodeJS: used to develop the server (server.js).*/
/*AngularJS: used to develop the HTML page (page.html).*/
/*w3 CSS: used as the custom CSS library.*/
当我从外部网络服务器（在线）引用.css文件时，例如，
<style href="http://css_source.com/version/file.css" rel="stylesheet"></style>
在完成所有CSS格式化的情况下正确呈现页面。但是当我从我的应用程序目录中引用.css文件时，例如，
<style rel="stylesheet" href="css/file.css"></script>
它确实呈现HTML页面但没有CSS格式。 有人可以帮我解决这个问题吗？ 请在下面找到文件结构，以及w3.css文件，server.js和page.html的相应代码。
谢谢。
[目录结构]
NodeJS folder contains the following:
----server.js
----AngularJS folder
AngularJS folder contains the following:
----CSS folder
----js folder
----img folder
----page1.html
----page2.html
----page3.html
----mainpage.html
CSS folder contains the following:
----w3.css
js folder contains the following:
----angular.min.js
----angular-route.js
----angular-animate.js
img folder contains the following:
----img1.jpg
---img2.jpg
---img3.jpg
[目录结构的终点]
[SERVER.JS CODE]
var http = require('http');
var fs = require('fs');
var url = require('url');
// Create a server
http.createServer( function (request, response) {
// Parse the request containing file name
var pathname = url.parse(request.url).pathname;
// Print the name of the file for which request is made.
console.log("Request for " + pathname + " received.");
// Read the requested file content from file system
fs.readFile(pathname.substr(1), function (err, data) {
if (err) {
console.log(err);
// HTTP Status: 404 : NOT FOUND
// Content Type: text/plain
response.writeHead(404, {'Content-Type': 'text/html'});
}else {
//Page found
// HTTP Status: 200 : OK
// Content Type: text/plain
response.writeHead(200, {'Content-Type': 'text/html'});
// Write the content of the file to response body
response.write(data.toString());
}
// Send the response body
response.end();
});
}).listen(9800);
// Console will print the message
console.log('Server running at http://127.0.0.1:9800/');
[主页.HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Easytime Calculator</title>
<script src="../angular.min.js"></script>
<script src="../angular-route.js"></script>
<link rel="stylesheet" href="css/w3.css">
/***...here if I reference the w3.css file from an external server, it renders perfectly with the css formatting**.*/
但是当我从我的app文件夹（angularJS / css / w3.css）中引用w3.css时，它不会呈现css格式，但是angularJS代码会编译。
</head>
<body ng-app="myApp">
<div class="w3-card-24 w3-margin" style="max-width:720px; height:550px;">
<header class="w3-container w3-light-grey w3-padding-18">
<h2>Easytime Calculators</h2>
</header>
<ul class="w3-navbar w3-green">
<!--<p><a href="#/" class="">Calculators Page</a></p>
<a href="#page1" class="">Simple Calculator</a>
<a href="#page2" class="">Advanced Calculator 1</a>
<a href="#page3" class="">Advanced Calculator 2</a>-->
<li><a href="#/" onclick="openCalc('main')" class="w3-hover-red">Main Page</a></li>
<li><a href="#page1" onclick="openCalc('simp')" class="w3-hover-red">Simple Calculator</a></li>
<li><a href="#page2" onclick="openCalc('adv1')" class="w3-hover-red">Advanced Calculator 1</a></li>
<li><a href="#page3" onclick="openCalc('adv2')" class="w3-hover-red">Advanced Calculator 2</a></li>
</ul>
<hr style="width:100%; border-bottom-color:purple; border-style:solid;" />
<ng-view></ng-view>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "mainpage.html",
})
.when("/page1", {
templateUrl : "page1.html",
})
.when("/page2", {
templateUrl : "page2.html",
})
.when("/page3", {
templateUrl : "page3.html",
});
});
app.controller("math1Ctrl", function ($scope) {
$scope.val1 = "";
$scope.val2 = "";
$scope.calculate = function() {
if(angular.equals($scope.selectedOperator, "-")){
$scope.result = ($scope.val1 - $scope.val2);
}
if(angular.equals($scope.selectedOperator, "+")){
$scope.result = ($scope.val1 + $scope.val2);
}
if(angular.equals($scope.selectedOperator, "*")){
$scope.result = ($scope.val1 * $scope.val2);
}
if(angular.equals($scope.selectedOperator, "/")){
$scope.result = ($scope.val1 / $scope.val2);
}
/*if(angular.equals($scope.selectedOperator, "%")){
$scope.result = ($scope.val1 % $scope.val2);
}*/
if($scope.selectedOperator ==""){
scope.result = "Invalid operator - Please select an operator";
}
}//end the calculate function
});
app.controller("math2Ctrl", function ($scope) {
$scope.val1 = "";
$scope.val2 = "";
$scope.calculate = function() {
if(angular.equals($scope.selectedOperator, "^")){
$scope.result = ($scope.val1 ** $scope.val2);
}
if(angular.equals($scope.selectedOperator, "100%")){
$scope.result = (($scope.val1 /100)* $scope.val2);
}
if(angular.equals($scope.selectedOperator, "%")){
$scope.result = ($scope.val1 % $scope.val2);
}
if(angular.equals($scope.selectedOperator,"")){
scope.result = "Invalid operator - Please select an operator";
}
}//end the calculate function
});
app.controller("math3Ctrl", function ($scope) {
$scope.val1 = "";
//$scope.val2 = "";
$scope.showMe = true;
//check which operator is active and hide or show the textbox
$scope.myFunc = function() {
if (angular.equals($scope.selectedOperator, "")){
$scope.showMe = true;
$scope.sh = false; //hid or show the 'of' keyword beside the textbox
}else if(angular.equals($scope.selectedOperator, "sqrt")){
$scope.showMe = true;
$scope.sh = true; //hid or show the 'of' keyword beside the textbox
$scope.sel = true; //show the <p> element for the selected number
$scope.action = "Square the Root"; //change the value of the action button
$scope.msg = "";
}else if(angular.equals($scope.selectedOperator, "pi")){
$scope.showMe = false;
$scope.sh = false; //hid or show the 'of' keyword beside the textbox
$scope.val1 = ""; //reset the val1 variable to empty
$scope.sel = false; //hide the <p> element for selected number
$scope.action = "Get Value of PI"; //display a different text on the action button
$scope.msg = ""; //clear the msg variable
}
}// end the myFunc function
//calculate and display the value based on the selected operator
$scope.calculate = function() {
if(angular.equals($scope.selectedOperator, "sqrt")){
$scope.result = Math.sqrt($scope.val1);
$scope.msg = "The Square Root of " +$scope.val1 +" is: "+ $scope.result;
if (angular.equals($scope.val1, "")){
$scope.msg = "Please select a number to square.";
}
}else if(angular.equals($scope.selectedOperator, "pi")){
$scope.x = 22;
$scope.y = 7;
$scope.result = ($scope.x / $scope.y);
$scope.msg = "The value of [Pi Ratio] is usually [22 / 7] = "+ $scope.result;
}else{
$scope.result = "Invalid operator - Please select an operator";
}
}//end the calculate function
});
</script>
<script>
/* this script is used to create a navigation tab on the page
you can add more tabs by adding div blogs above.
*/
openCalc("main")
function openCalc(calcName) {
var i;
var x = document.getElementsByClassName("calc");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(calcName).style.display = "block";
}
</script>
</div>
</body>
</html>
[PAGE1 .HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div ng-controller="math1Ctrl" style="margin-left:35px;">
<h2 style="color:navy;">Simple Functions Calculator</h2>
<form name="maths" action="">
<div>
<label>Enter 1st Number : </label>
<input type="number" name="val1" ng-model="val1" required />
<span class="w3-padding-left w3-text-red" ng-show="maths.val1.$touched && maths.val1.$invalid">value 1 must be a number and is required </span>
</div>
<p></p>
<div>
<label>Select Desired Operator : </label>
<select name="operator" ng-model="selectedOperator" nc-click="chkOperator()">
<option value="+" selected="selected">Addition</option>
<option value="-">Subtraction</option>
<option value="*">Multiplication</option>
<option value="/">Division</option>
</select>
</div>
<p></p>
<div>
<label>Enter 2nd Number : </label>
<input type="number" name="val2" ng-model="val2" required />
<span class="w3-padding-left w3-text-red" ng-show="maths.val2.$touched && maths.val2.$invalid">value 2 must be a number and is required</span>
</div>
<p></p>
<div>
<!--<button ng-click="calculate()">Calculate</button>-->
<h3 class="w3-btn w3-padding w3-green" ng-click="calculate()">
Calculate
</h3>
</div>
</form>
<p>1st Number is: <span class="w3-padding-left w3-text-red">{{val1}}</span></p>
<p>2nd Number is: <span class="w3-padding-left w3-text-red">{{val2}}</span></p>
<h3 class="w3-padding-left w3-text-red">
Value 1
<span class="w3-padding-left w3-text-purple">[ {{selectedOperator}} ]</span>
Value 2
<span class="w3-padding-left w3-text-green">equals to: </span>
{{result}}
</h3>
</div>
</body>
</html>
[PAGE 2]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div ng-controller="math2Ctrl" style="margin-left:35px;">
<h2 style="color:navy;">Advanced Calculator 1</h2>
<form name="maths" action="">
<div>
<label>Enter 1st Number : </label>
<input type="number" name="val1" ng-model="val1" required />
<span style="color:red;" ng-show="maths.val1.$touched && maths.val1.$invalid">value 1 must be a number and is required </span>
</div>
<p></p>
<div>
<label>Select Desired Operator : </label>
<select name="operator" ng-model="selectedOperator" nc-click="chkOperator()">
<!--<option value="+" selected="selected">Addition</option>
<option value="sqrt">SQRT</option>-->
<option value="^">Exponent (power of)</option>
<option value="100%">Percent</option>
<option value="%">Modulus (remainder)</option>
</select>
</div>
<p></p>
<div>
<label>Enter 2nd Number : </label>
<input type="number" name="val2" ng-model="val2" required />
<span style="color:red;" ng-show="maths.val2.$touched && maths.val2.$invalid">value 2 must be a number and is required</span>
</div>
<p></p>
<div>
<!--<button ng-click="calculate()">Calculate</button>-->
<h3 class="w3-btn w3-padding w3-green" ng-click="calculate()">Calculate</h3>
</div>
</form>
<p>1st Number is: <span class="w3-padding-left w3-text-red">{{val1}}</span></p>
<p>2nd Number is: <span class="w3-padding-left w3-text-red">{{val2}}</span></p>
<h3 class="w3-padding-left w3-text-red">
Value 1
<span class="w3-padding-left w3-text-purple">[ {{selectedOperator}} ]</span>
Value 2
<span class="w3-padding-left w3-text-green">equals to: </span>
{{result}}
</h3>
</div>
</body>
</html>
[PAGE3.HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div ng-controller="math3Ctrl" style="margin-left:35px;">
<h2 style="color:navy;">Advanced Calculator 2</h2>
<form name="maths" action="">
<div>
<label>Select Desired Operator : </label>
<select name="operator" ng-model="selectedOperator" ng-change="myFunc()">
<option value="sqrt" selected="selected">SQRT</option>
<option value="pi">PI Ratio</option>
</select> <span ng-show="sh">Of</span>
</div>
<p></p>
<div ng-show="showMe">
<label>Enter a Number : </label>
<input type="number" name="val1" ng-model="val1" required />
<span class="w3-padding-left w3-text-red" ng-show="maths.val1.$touched && maths.val1.$invalid">value 1 must be a number and is required </span>
</div>
<p></p>
<div>
<h3 class="w3-btn w3-padding w3-green" ng-click="calculate()">{{action}}</h3>
</div>
</form>
<p ng-show="sel">Selected Number is: <span style="color:red;">{{val1}}</span></p>
<h3 class="w3-padding-left w3-text-red">{{msg}} </h3>
</div>
</body>
</html>
[W3.CSS代码]
/* W3.CSS 2.8 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}
img{border-style:none}svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
h1,h2,h3,h4,h5,h6,.w3-slim,.w3-wide{font-family:"Segoe UI",Arial,sans-serif}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.w3-serif{font-family:"Times New Roman",Times,serif}
h1,h2,h3,h4,h5,h6{font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
img{margin-bottom:-5px}a{color:inherit}
.w3-image{max-width:100%;height:auto}
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}
.w3-table-all{border:1px solid #ccc}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}
.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}
.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}
.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
.w3-btn,.w3-btn-block{border:none;display:inline-block;outline:0;padding:6px 16px;vertical-align:middle;overflow:hidden;text-decoration:none!important;color:#fff;background-color:#000;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover,.w3-btn-block:hover,.w3-btn-floating:hover,.w3-btn-floating-large:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-btn-floating,.w3-btn-floating-large,.w3-closenav,.w3-opennav{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
*某些文字被截断*
答案 0 :(得分：1)
上面的代码显示您引用了这样的css：
<style rel="stylesheet" href="css/file.css"></script>
您正在使用style代码
script代码