NodeJS + AngularJS +（CSSがレンダリングされない）

NodeJSをサーバーとして使用するAngularJSクライアントアプリケーションでCSSのレンダリングに問題があります。以下のコードは完全なSPA（シングルページアプリケーション）用であり、コンパイルが可能です。私は外部のWebサーバ（オンライン）、例えば、NodeJS + AngularJS +（CSSがレンダリングされない）

<style href="http://css_source.com/version/file.css" rel="stylesheet"></style>

から.cssファイルを参照する場合

/*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 rel="stylesheet" href="css/file.css"></script>

、私のアプリケーションのディレクトリ、例えば内からの.cssファイルを参照する場合しかし、それはなく、CSSの書式なしのHTMLページをレンダリングしません。誰も私にこの問題についてお手伝いできますか？以下のファイル構造と、下記の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/');

[MAIN PAGE .HTML] [ディレクトリ構造END]

<!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**.*/

でも私のアプリケーションフォルダ（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 CODE]

/* 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}

*いくつかのテキストは、上記のコードは、あなたがこのようなあなたのCSSを参照して示し*

出典

2016-10-11 Eyo

scriptタグでstyleタグを閉じている、あなたは提供できますこのすべてのオンライン版へのリンク？ – jcaron

あなたのページにアクセスするためにどのようなパスを使用していますか？なぜあなたのリンクは '../'を使って角をつけていますか？ – jcaron

ノードsrverからのCSSファイルを提供しているのですか、またはクライアント上でローカルにアクセスしていますか？ – mtsdev

を切り捨て：

<style rel="stylesheet" href="css/file.css"></script>

あなたは

出典

2016-10-12 03:39:31 laney

こんにちは、観察に感謝します。しかし、それは問題ではありません。上記のエラーは、この文書を入力している間にタイプミスです。ありがとう、すべて同じ。 – Eyo

NodeJS + AngularJS +（CSSがレンダリングされない）

答えて

関連する問題